《JavaScript笔记知识点整理图文(共23页)》由会员分享,可在线阅读,更多相关《JavaScript笔记知识点整理图文(共23页)(23页珍藏版)》请在金锄头文库上搜索。
1、精选优质文档-倾情为你奉上一、JavaScript基础1. 变量:区分大小写( html 不区分大小写)变量和作用域:1) Js在函数内部直接读取全局变量2) 在函数外部无法读取函数内部的局部变量3) 在函数内部声明变量的时候,要使用 var,如果不用,则认为声明的是全局变量2. 标识符的命名:第一个字符必须是字母、下划线或 $第二个字符及以后:字母、数字、下划线或¥3. 保留字(不可以当做标识符) :4. 声明变量:1) 声明变量: var a;2) 赋值: a=10;3) 声明变量和初始化变量: var a=10;4) 声明多个变量: var x,y,z=10;5) 不声明变量,直接使用:
2、 x=105. 数据类型:1) Typeof 操作符:用来检测变量的数据类型:a) Undefined :未定义b) Boolean:布尔型c) String:字符串d) Number :数值e) Object:对象 /nullf) Function:函数g) 例如: Var sun=“太阳”;Alert(typeof sun );2) Undefined 类型:定义了一个变量但是没有给这个变量赋值、使用一个为定义的量、或者用了一个不存在的对象的属性的时候,返回 undefined3) Null 类型:空字符,表示不存在的值a) 如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为n
3、ull 。b) 养成编码的规范,不要忘记初始化变量。4) Boolean 类型: true/false (小写)a) Var hello=“hello world ”;alert(typeof hello )/ 返回的是 string 类型专心-专注-专业b) Var hello=Boolean(hello world ;alert(typeof hello )/ 返回的是 boolean 类型c) If 语句: Var hello=“hello world ”if ( hello ) alert( 如“果条件为 true ,就执行这条语句 ”); else alert( 如“果条件为 fal
4、se,就执行这条语句 ”);d)5) Number 类型:数字型a) 整数或者实数, 所有的数字都以浮点型来表示, 如:var a=474;var b=54.23;b) 判定是否超过数字型的范围: isfinite()函数 ,如果没有超过, 返回 true ,超过了返回 false 。var box=10e1000;alert(isFinite(box); / 返回 falsec) 处理整数: parseInt()函数6) String 类型:表示由零或多个 16 位 Unicode 字符组成的字符序列, 即字符串。a) 字符串可以由双引号 (?) 或单引号 ( 表) 示。b) Tostrin
5、g ()函数 :把值换成字符串7) Object 类型:一组数据和功能的集合a) Var box = new object();b) Object 里可以任意传参,可以传数值、字符串、布尔值等。而且,还可以进行相应的计算。6. 转义序列:a) n:换行b) t :制表c) b:空格d) r:回车e) f :换页f) :斜杠7. 运算符:8. 数组:1) Push():追加数组数据2) Pop():删除数组最后一个数据3) Shift():移除数组第一个数据4) Unshift ():把数据移到数组的第一位9. 实例属性和类属性:实例属性:在函数中用 this 前缀修饰的变量,要通过对象来访问类
6、属性:在函数中以函数名前缀修饰的变量, 类属性是整个类的, 可以通过类(函数)来访问。局部变量:只能在函数里面访问10. 函数:1) 函数的声明:a) 无参函数: function box ()Alert (只有函数被调用,我才会被执行 )调用函数: box();b) 有参函数: function box (name,age)Alert (你的名字 +name+年龄 +age)调用函数并且传参数: box(爆米花,12);c) 定义函数的三种方式:定义命名函数定义匿名函数使用 function 类匿名函数var s = new Function(nume,document.write (Fun
7、ction 定义的函数+document.write (“你好” +name)+)2) 递归函数:3) Return 返回值:4) Arguments 对象:a) 是所在函数的一个内置类数组对象,可以用数组的 i 和.length 。b) Sdc) 重载:就是根据参数选择相同函数名而参数不同的函数11. 调用函数的三种方式1) 直接调用函数2) 以 call()方法调用函数:需要动态传入一个函数引用(动态的调用函数)函数的引用 .call(调用者,参数 1,参数 2)3) 以 apply()方法调用函数4) Apply()和 call()的区别:Call()调用的时候,必须在括号内详细的列出每
8、个参数Apply()动态调用的时候,可以在括号中用 arguments 来代表所有参数12. 对象的创建1) 使用 new 关键字调用构造器创建对象2) 使用 object 直接创建对象Js的对象都是 object 类的子类3) 使用 json 创建对象二、语句1. Foreach 循环: for(var 变量名 in 数组名) 2. For 循环: for(var 变量名;范围;变量 +/-) 13. If 语句14. While 语句15. Do while 语句16. Switch 语句17. Break:跳出整个循环(当前所在的循环)Continue:结束本次循环,进行下一次循环跳出外
9、层循环:设置标签,如图三、DOM(document object model )文档对象模型3. DOM HTML1) 改变 HTML 内容:Document.getElementById(id).innerHTML = new html;id.innerHTML= 新内容或者:2) 改变 HTML 属性Document.getEelementId(id).attribute = new value; id.属性=新的属性值18. DOM CSSDocument.getEelementId(id).style.property=new style; id.style.属性 =新的属性值19.
10、DOM 事件1) Onclick 事件:在 html 元素上点击执行 function ;2) Ondblclick 时间:双击触发3) Onload 事件/onunload 事件共同点:在用户进入或者离开页面的时候被触发;用于处理 cookie不同点: onload 检测发访问者的浏览器类型和版本,加载网页的正确版本4) Onchange 事件:对输入的字段进行验证5) Onmouseover/onmouseout 事件:鼠标放在元素上面 /移动的时候触发函数类似伪元素选择器: hover,不同在于这个触发函数6) Onmousedown/onmouseup 事件:点击按钮的时候触发事件 1
11、,松开鼠标后,触发事件 2,最后结束的时候,类似事件 onclick。7) Onfocus 事件:获得焦点8) Onblur 时间:失去焦点9) Onkeydown/onkeypress/onkeyup :按下键盘某个键的时候触发 / 单机键盘某个键/ 松开键盘某个键10) Onreset:重置表单的时候触发Onsubmit :提交11) Onsize:改变窗口大小20. DOM 节点1) 添加节点:第一步 :创建一个新的元素类型: createElement ();第二步:在创建一个元素节点第三步:在元素的后面追加这个节点在已有的元素里面追加这个新的元素第四步:定义原有对象的元素名称第五步:
12、向已有的元素后面追加新的元素2) 删除节点:第一步:获取父元素 id第二步:获取将要删除元素的 id第三步:从父元素中删除子元素3) 修改 html 元素a) innerHTML:div/span/td 内容的呈现b) value:textarea 内容的呈现c) className:修改 HTML 的 css样式: class选择器名称d) style:修改 HTML 元素的内联 css样式e) optionsindex :select 指定列表4) 复制当前节点: node cloneNode (boolean t/f ):复制当前节点。当值为 true ,表示在复制当前节点的同时,复制该
13、节点的全部及其后代当值为 false,表示只复制当前节点5) 插入节点:InsertBefore (Node newNode ,Node refNode ):在 refNode 节点之前插入newNode6) 替换节点: replaceChild(Node newNode ,Node oldNode );7) 为列表框和下拉菜单添加选项a) HTMLSelectElement 的 add 方法进行添加选项Add(option ,before):在 before 选项之前添加 option 选项,before 指定为奴的时候可以将 option 选项添加到最后b) 直接为 select 的执行选
14、项赋值appendChild(option );c) New option (text ,value,defaultselected ,selected)Text:选项的文本Value:选中该选项的值DefaultSelect:默认是否选中选项Selected:该选项当前是否被选中8) 动态添加表格内容:a) insertRow(index):在指定索引处插入一行b) createCaption():为表格创建标题c) insertCell(long index):在指定索引处创建一个单元格9) 节点访问 HTML 元素:a) ParentNode:返回当前节点的父节点b) PreviousS
15、ibling:返回当前节点的前一个兄弟节点c) nextSibling:返回当前节点的下一个兄弟节点d) childElementByTagName(tagName):返回当前节点的具有指定标签名的所有子节点e) firstChild :返回当前节点的第一个子节点f) lastChild:返回当前节点的最后一个子节点10) 访问表单控件 a) Action:表单提交的地址b) Element:返回表单内全部表单控件组成的数组c) Length:个数d) Methode) Target:_self,_blank,_parent,_top : 指定提交表单式的结果窗口f) Reset():重置表单g) Submit():提交表单