JS笔记.docx

1、JS笔记第一章基础语法 31在页面中使用js代码 3(1)直接使用：标签中插入 3(2)在html中任意位置声明写入 3(3)导入js文件 32语法规则 43.常量 44. 变量 45.命名规则： 46.注释： 57.数据类型 5(1)值类型： 5(2)引用类型 5(3)获取变量类型函数 5(4) 强制类型转换函数 61parseInt()、parseFloat()和Number()：数值型强转函数 62Boolean()：布尔型强转函数。 63String()：字符串强转函数 68.运算符 7(1)算术运算符： 7(2)自增/减运算符： 7(3)比较运算符 7(4)赋值运算符 7(5)逻辑运

2、算符 7第二章控制语句 8一、if条件语句 81.if语句 8二、几个js中常用的函数 9三、switch语句 9四、while循环 10六for循环 10七、两个关键字 10第三章数组 11一、定义 11二、声明 11三、属性 11四、获取数组元素 11五、数组方法 121.连接数组 122.添加元素 123.删除元素 124.提取数组元素 135.分隔符 136.反转元素：reverse():将数组元素的全部位置左右反转。 137.数组元素排序：sort( function(a,b) ) 138.数组转换成字符串 13六、遍历数组 14第四章函数 14一、定义 14二、匿名函数 15三、全

3、局变量和局部变量 15四、prototype 16五、JS的三种方法 16第五章常用对象 17一、Math对象 17二、Numbe对象 18三、document对象 18四、Date对象 19五.时间对象： 19七.DOM对象 201.把文档中标签转换DOM对象。 202.DOM对象的作用 203.DOM对象的几个事件句柄： 214.DOM对象的offset相关属性 22八、自定义对象 221定义方式 22六、String对象 231.创建 232.常用属性 233.常用方法 23第六章节点处理 25一、定义和分类 25二、节点内容 25三、节点之间的关系 26四、节点的控制：创建、添加、删除

4、、插入、克隆、替换 261.创建 262.添加 263.删除节点 264.插入节点 275.克隆节点：相当于复制，但不会粘贴。 276.替换子节点 277.节点应用知识： 27第七章正则表达式 29一、定义 29二、正则表达式作用： 29三、声明 291.显示声明 292.隐式声明 293.模式修饰符 29四、正则表达式字符 30五正则常用方法 31六前瞻 31总结： 331.调用JS三种办法：直接插入、声明写入、导入JS文件 332.声明常量与变量：const和var 333.六大数据类型：引用function，string，object和值类型：number 、undefined，bool

5、ean 334.强制类型转换：parseInt()；parseFloat()；Number(); String()；Boolean()。 335.逻辑运算： a|b (a或b,true a false b)和 a&b 336.js常用函数： 337.控制语句： 348.三元表达式：ab?a:b; 349.声明数组和数组方法 3410两种函数声明方式(基本和引用)，以及调用方法。 3411.函数体中(有var声明)是局部变量，否则是全局变量 3412.常用对象和其方法 3413.DOM 35(1)获取和设置DOM对象 35(2)获取相关节点对象 35(3)控制节点对象 35第一章基础语法1在页面

6、中使用js代码(1)直接使用：标签中插入点击(2)在html中任意位置声明写入 alert(11);(3)导入js文件2语法规则执行顺序：从上到下，从左到右。每行结尾加分号。3.常量声明常量：const常量名=值。 const AGE=27岁;4.变量1先声明再赋值： var age; age=31;2声明同时赋值：var age=31;3一个关键字声明多个变量：var a,b,c; a=1; b=1; c=1; var a=1,b=2,c=3;5.命名规则：常量：用大写英文单词变量： 字母或下划线开头,数字/字母/下划线组成； 不能使用关键字作为变量名； 区分大小写；6.注释：/单行注释 /

7、*多行注释*/7.数据类型(1)值类型：1 number(数字型):包括整数和浮点数 NaN非数字和Infinity无穷大是number型。2 undefined(未定义)：未声明的或未赋值的变量。3 boolean(布尔型)：true、false(2)引用类型1 string(字符串)：单引号或双引号之间的所有字符。 单引号不能嵌套单引号，双引号不能嵌套双引号。反斜杠可转义引号成字符。2 object(对象)：null空值是object型；3 function(函数)：(3)获取变量类型函数typeof(varName);返回数据类型字符串。返回值是小写字符串，如string(4)非数字判断

8、函数isNaN(a):判断a是否是一个非数字，是返回true;不是返回false。(5)强制类型转换函数1parseInt()、parseFloat()和Number()：数值型强转函数字符串类型：parseInt()和parseFloat()：只有字符串中的第一个数字会被返回，若第一个字符不是数字则转成NaN。Number()：字符串只能是数字字符，才能转为数字，否则为NaN未定义类型：undefined- NaN：对象类型：object-NaN; null-0布尔类型false-0; true-1;程序发生数学运算时，程序将自动将运算符两边的值转换为number型。2Boolean()：布

9、尔型强转函数。”/undefined/null/0和 NAN :五种-flase 其他-true3String()：字符串强转函数undefined/null/true和false/NaN,0,数字转换成相对应的字符串注：对象用 toString()方法转换成字符串：对象若存在，则转成的字符串就是toString()返回的值; 若不存在，则为undefined。8.运算符(1)算术运算符：+加-减*乘/ 除%余 +两边有一边是字符串，则作为字符串连接符。(2)自增/减运算符：+i;-i;先自增/减，后赋值。i+；i-;先赋值，后自增/减(3)比较运算符大于=大于等于小于b?a:b;条件?结果a

10、:结果b；条件为真时，返回结果a,假时返回结果b。第三章数组1.定义数组:用一个变量来存放多个有顺序条理的数据。js数组中可以存放任意类型数据。数组长度可变。(可以删除数组元素)数组的数据类型是object。数组元素可以是表达式。2.声明(1)显示声明 var arr=new Array(数组元素);(2)隐式声明 var arr=数组元素3.获取数组元素数组下标从左到右，从arr0开始。4.属性(1)length：返回数组长度值 var l=arr.length;说明:字符串也有length属性。5.方法(1)控制元素1添加元素.push(元素/数组):向数组的末尾添加一个或更多元素，并返回

11、新的长度。.unshift(元素/数组)向数组的开头追加一个或多个元素，并返回新的长度。 添加多个元素时，元素之间逗号隔开； 如果添加的数组，原数组新的元素为一个数组,此时原数组变成二维数组。2删除元素.pop():移除最后一个元素并返回该元素值。.shift()：移除第一个元素并返回该元素值，数组中元素自动前移。.splice(a,b,c):(删除元素开始下标,删除个数,替换内容);返回删除元素组成的新数组。 a表示删除下标为a的元素以及其后的元素。 (a,b)表示从下标为a的元素开始,删除b个元素 (a,b,c)：表示添加或替换，返回一个空数组。(因为元素个数没减少,所以为空。) 注：(1

12、)c可以是多个要添加的新元素：(a,b, val1,val2,valn)。 (2)c可以是一个数组：(a,b,arr) (3)a:表示新元素插入位置。 (4)b:表示从下标为a的元素之前开始替换b个元素; b为0时，表示在下标为a的元素之前，用c替换0个元素，即添加新元素; c中新元素个数小于b时,删除未替换完的元素。3提取数组元素.slice(a,b)：提取从下标为 a的元素到下标b的前一个元素。不改变原数组。 如果b缺省,则提取a后面的所有元素。 如果 barr.length,等同于缺省。4反转元素：reverse():将数组元素的全部位置左右反转。5数组元素排序：数组名.sort(自定义

13、排序函数名)；如arr.sort(zeng)自定义排序函数function zeng(a,b)return a-bfunction jian(a,b)return b-a排序规则：ASCII码顺序先排字符第一位，再比较字符第二位。6遍历数组for(var i(即数组下标) in 数组名)循环体; i，初始值为0，每循环一次自动加1，循环次数由数组元素个数决定。(2)控制数组(1)连接多个数组.concat(arr1,arr2,arrn):连接两个或更多的数组，并返回连接后的新数组。如：var arr3=arr.concat(arr1); 注：顺序连接。(2)将数组转换成字符串1arr.toSt

14、ring()：将arr数组转换成字符串，字符之间用逗号连接。2arr.join()：将数组arr中所有的元素用连接成一个字符串。3运算转换var str=arr+：将组数元素连接成字符串。第四章函数1.声明(1)基本形式：function 函数名 (形参列表) 函数体 return (2)引用形式： var 函数名=function(形参列表) 函数体 return (3)return说明：一个函数只能有一个返回值,但想返回多个值可以返回一个数组。return：把函数产生的结果,返回给函数外部使用。return只能在函数内部使用，且一个函数可以有多个return。return具有终止函数继续向

15、下执行的功能。等价于break。(4)两种声明函数方式的比较：以相同形式声明的同名函数,总是后声明的覆盖先声明。以基本形式声明的函数会提前加载到内存中；以引用形式声明的函数，总是在代码执行到的时候才会加载。于是，引用形式声明的同名函数，总是会覆盖以基本形式声明的同名函数。以基本形式声明的函数，可以在函数声明之前进行调用，但引用形式声明的函数只能在声明后调用。2匿名函数 js中没有函数名的函数就是匿名函数。(略)3.函数调用：函数名(实参列表); 实参给形参赋值是，从左到右依次赋值。 没有赋值的，其值为undefined。 实参比形参多，多的实参不报错不影响。 arguments(下标)：获取实

16、参列表参数值。 arguments.length：获取参数列表个数。4.全局变量和局部变量在函数内部： 有var声明的变量是局部变量；外部不能访问局部变量。 无var声明的变量是全局变量，哪怕没有在函数外声明。如果在函数内部有一个局部变量和全局变量同名,那么在函数内访问时,首先访问的局部变量；如果要访问全局变量,则需要使用：window.全局变量名获取在函数内部声明的局部变量会声明提前。5.函数原型属性prototype每一个构造函数都有一个属性叫做原型(prototype)。prototype是一个对象，给prototype的属性添加属性或方法，这些属性或方法将会成为使用这个构造函数创建的对

17、象的通用属性。function Fish(name, color) this.name=name; this.color=color;Fish.prototype.price=20;Fish.prototype.getPrice= Function() return this.price;var x =new Fish();alert(x. getPrice ();6.JS的三种方法对象方法function People(name) this.name=name; this.Introduce=function() alert(My name is +this.name); 类方法People

18、.Run=function() alert(I can run);原型方法People.prototype.IntroduceChinese=function() alert(我的名字是+this.name);/测试var p1=new People(Windking);p1.Introduce();People.Run();p1.IntroduceChinese();第五章JS内置对象1.Math对象max(a,b,n)、.min(a,b,n)：返回所有数字中最大值或最小值。random()：返回01之间的随机数。不包括0、1。输出09的数：document.write(Math.floor

19、(Math.random()*10);ceil()、.floor()：对一个数进行向上/下取整。round()：四舍五入取整。注：Math对象的方法 返回的数据类型都是Number型。如Math.random()2.Numbe对象Number.toFixed(保留小数的位数)例子：var num = 13.37;document.write(num.toFixed(1);3.Date对象(1)创建当前时间的Date对象：var变量名 =new Date();(2)常用方法Date() ：返回当天的日期和时间。getDate() ：返回月份的某一天。getMonth() ：返回表示月份的数字。g

20、etDay()：返回表示星期的某一天的数字。使用 getHours(), getMinutes() 以及 getSeconds() 来显示当前的时间。(3)计时事件1定义：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。2创建计时对象var 对象名=setTimeout(javascript语句,毫秒)3清除计时对象clearTimeout(对象名)4应用在函数内部调用计时事件，达到死循环效果。 function fn() var sw=$(sp).offsetWidth; var num=Math.ceil(sw/pw*100) if(swpw) $(s

21、p).style.width=sw+2+px; $(sp1).innerHTML=num+% setTimeout(fn,20)； 5类似方法setInterval(函数名/”js语句”,时间毫秒)：每隔多少时间之后执行函数或者JS语句一次。clearInterval(时间对象)：清除setInterval时间对象。4.String对象(1)两种创建字符串方式的区别var str=”abc”; str数据类型是字符串，但也可以调用String对象的方法和属性。var 变量名=new String(“值”)；变量名数据类型是对象(2)属性length：返回字符串长度。(3)方法1)改变字符：.s

22、ub():把字符串显示为下标；.sup(): 上标。.toLowerCase():把字符串转换为小写。.toUpperCase(): 大写。replace(正则/子字符串,用于替换的字符串)：用字符串来替换子字符串或正则表达式匹配的字符串。返回替换后的字符串。2查找字符charAt(index):返回下标指定位置的字符。超出则返回为空。indexOf(substr,index)：返回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1。 参数：substr子字符串；index开始下标，下标缺省则默认从0开始。lastIndexOf(substr,index):返回Stri

23、ng对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回 -1。 参数：substr子字符串；index结束下标，下标缺省则父字符串长度。search(正则/子字符串)：返回与正则表达式查找内容匹配的第一个字符串的位置，或返回子字符串第一次出现位置。如没找到，返回-1。.match(正则/子字符串)：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，如果是字符串搜索，返回找到子字符串，没找到返回空字符串。如果是正则搜索，找到返回数组，没找到返回null。3截取字符slice(start,end)：提取起始到结束下标的子字符串。substr(start,length)：返回指定位置

24、开始的,提取指定长度的子字符串。length缺省，则提取到末尾。start可为负数。 子字符串查找，只替换第一次找到的字符串； 正则表达式查找，除非全局匹配，也只能替换第一次找到的字符串。substring(x,y)：返回String对象中下标x,y之间的子字符串。x,y哪个值小就是起始位置。.split(正则/字符串)：取掉字符串或正则，把断开的原字符串分割为字符串数组。5.document对象1.属性：.title：获取/设置文档标题；.bgColor：获取/设置文档背景色；.fgColor：获取/设置文档内容颜色。2.方法(1)输出方法write()、writeln()(2)获取和控制节

25、点对象createElement(tag)：根据指定标记创建一个HTML标签getElementById(id)：获得指定id的HTML元素getElementByName：获得指定名称的HTML元素的数组getElementByTagName：获得指定标签名称的HTML元素的数组第六章节点对象(DOM)1.定义(1)DOM对象Document Object Model文档对象模型。 DOM对象，有时我们也叫DOM元素。D即html、xml文档(标签);O即把文档中内容 (标签)，转换为Object 对象；M即模型，程序设计一钟架构。(2)节点定义和类型HTML DOM中，每个部分都是节点。可分为：文档节点：即文档本身；元素节点：即：所有HTML元素；属性节点：所有HTML属性；文本节点：HTML元素内的文