笔记:菜鸟教程-JavaScript
2017-12-13 14:57
253 查看
一、javaScript输出
1、javaScript可以通过不同的方式来输出数据。
(1)window.alert()弹出警告框。
(2)document.write()方法将内容写到html文档中。
(3)innerHTML写入到html元素。
(4)console.log()写入到浏览器的控制台。
二、javaScipt语法
1、在编程语言中,一般固定值为字面量。
(1)javaScript字面量:①数字(Number)字面量。②字符串(String)字面量。③表达式字面量。④数组(Array)字面量。⑤对象(Object)字面量。⑥函数(Function)字面量。
(2)在指令式语言中,变量是一个名称,变量通常是可变的;字面量是一个值。
2、(1)JavaScript 关键字必须以字母、下划线(_)或美元符($)开始。
(2)后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开关键字和数字)
三、javaScript数据类型
(1)①javaScript数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
②(aSuncat外注):5种原始类型(primitive[‘prɪmɪtɪv] type):String、Number、Boolean、Undefined、Null
(2)创建数组的3种方式
①常规方式
2
3
[/code]
②condensed array(简洁方式)
[/code]
③literal array(字面)
[/code]
(3)对象属性有2种寻址方式:
2
[/code]
(4)对象的赋值
(aSuncat外注)如果定义一个变量,要用这个变量给对象赋值,就得用
2
3
[/code]
得到的是:
[/code]
(5)JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
①当您声明新变量时,可以使用关键词 “new” 来声明其类型:
2
3
4
5
[/code]
(6)①访问person对象的fullName方法
[/code]
②访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:
[/code]
四、javaScript函数
1、(1)在使用 return 语句时,函数会停止执行,并返回指定的值。
函数调用将被返回值取代:
2
3
4
5
[/code]
(2)仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的。
2
3
4
5
6
7
[/code]
如果a>b,则上面的代码将退出函数,并不会计算a和b的总和。
五、javaScript作用域
1、在 JavaScript 中, 对象和函数同样也是变量。(aSuncat:对象和函数既是字面量,又是变量)
2、在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
3、在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
六、javaScript字符串
1、可以使用索引位置来访问字符串中的每个字符。
2
[/code]
2、字符串长度
可以使用内置属性 length 来计算字符串的长度
2
[/code]
3、特殊字符
4、创建字符串
(1) JavaScript 字符串是原始值,可以使用字符创建:
[/code]
(2)也可以使用 new 关键字将字符串定义为一个对象
[/code]
注意:不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
5、(1)①原始值字符串,如 “John”, 没有属性和方法(因为他们不是对象)。
②原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
(2)(aSuncat:外注)
①原始值
存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
②引用值
存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
6、字符串属性
7、字符串方法
七、javaScript运算符
在两个字符串之间增加空格的两种方法。
(1)把空格插入一个字符串之中。
2
3
[/code]
(2)把空格插入字符串中
2
3
[/code]
2、空文本 + 数字得到的运算结果都是把数字转成字符串,无论文本有多少个空格。
2
3
[/code]
八、javaScript比较
1、条件运算符(三目运算符)
variablename=(condition)?value1:value2
2
[/code]
九、javaScript循环
1、for in循环不仅可以遍历对象的属性,还可以遍历数组。
十、javaScript Break和Continue
1、break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代,所以 continue 只能用于循环的代码块。
2、(1)continue 语句(带有或不带标签引用)只能用在循环中。
(2)break 语句(不带标签引用),只能用在循环或 switch 中。
(3)通过标签引用,break 语句可用于跳出任何 JavaScript 代码块。
2
3
4
5
6
7
8
9
10
11
[/code]
十一、javaScript typeof
1、用typeof检测null返回是object。
2、null是一个只有一个值的特殊类型。表示一个空对象引用。
3、undefined是一个没有设置值的变量。
4、null和undefined的值相等,但是类型不相等。
十二、javaScript类型转换
1、Number()转换为数字,String()转换为字符串,Boolean()转换为布尔值。
2、(1)javaScript中有5种不同的数据类型:string、number、boolean、object、function
(2)3种对象类型:Object、Date、Array
(3)2个不包含任何值的数据类型:null、undefined
3、(1)NaN的数据类型是number
(2)数组(Array)的数据类型是object
(3)日期(Date)的数据类型为object
(4)null的数据类型是object
(5)未定义变量的数据类型为undefined
4、如果对象是Array或Date,就无法通过typeof来判断他们的类型,因为都是Object.
5、constructor 属性返回所有 JavaScript 变量的构造函数。
(2)可以使用constructor属性来查看对象是否为数组(包含字符串“Array”)
2
3
[/code]
(3)可以使用constructor属性来查看对象是否为日期(包含字符串“Date”)
2
3
[/code]
6、
(1)数字转换为字符串的方法:
(2)日期转换为字符串
(3)字符串转换为数字
(4)布尔值转换为数字
(5)日期转换为数字
(6)自动转换类型
当javaScript尝试操作一个“错误”的数据类型时,会自动转换为“正确”的数据类型。
①数字+null,null转换为0,+为运算符
5 + null // 返回 5 ,null 转换为 0
②字符串+null,null转换为字符串”null”,+为拼接
“5” + null // 返回”5null” , null 转换为 “null”
③字符串+数字,数字转换为字符串,+为拼接
“5” + 1 // 返回 “51”,1 转换为 “1”
④字符串-数字,字符串转换为数字,-为运算符
“5” - 1 // 返回 4,”5” 转换为 5
(7)自动转换为字符串
当你尝试输出一个对象或一个变量时,javaScript会自动调用变量的toString()方法
2
3
4
5
[/code]
十三、javaScript正则表达式
1、正则表达式
(1)正则表达式是由一个字符序列形成的搜索模式。
(2)搜索模式可用于文本搜索和文本替换。
(3)正则表达式可用于所有文本搜索和文本替换的操作。
2、var patt = /runoob/i
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
3、在javaScript中,正则表达式通常用于两个字符串方法:search()和replace()。
(1)search()方法:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
①正则表达式搜索Runoob,且不区分大小写。
2
3
[/code]
②search()方法可使用字符串作为参数。字符串参数会转换为正则表达式。
[/code]
(2)replace()方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
①使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
[/code]
②replace() 方法将接收字符串作为参数。
[/code]
4、正则表达式修饰符
5、正则表达式模式
(1)方括号用于查找某个范围内的字符。
(2)元字符是拥有特殊含义的字符
(3)量词
6、使用RegExp对象
在javaScript中,RegExp对象是一个预定义了属性和方法的正则表达式对象。
7、test()和exec()
(1)test()
test()方法是一个正则表达式方法。
test()方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false.
①
2
3
[/code]
返回true
②
2
3
4
5
6
7
8
9
[/code]
(2)exec()
exec()方法是一个正则表达式方法。
exec()方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为null。
2
3
[/code]
返回e
十四、javaScipt错误
1、javaScript错误-throw、try和catch
(1)try语句测试代码块的错误。
(2)catch语句处理错误。
(3)throw语句创建自定义错误。
2、try和catch
(1)try语句允许我们定义在执行时进行错误测试的代码块。
(2)catch语句允许我们定义当try代码块发生错误时,所执行的代码快。
(3)javaScript语句try和catch是成对出现的。
2
3
4
5
[/code]
(4)catch块会捕捉到try块中的错误,并执行代码来处理它。
2
3
4
5
6
7
8
9
10
11
12
[/code]
3、throw语句
(1)throw语句创建或抛出异常(exception[ik’sepʃən]:异常)。
(2)throw与try和catch一起使用,能够控制程序流,并生成自定义的错误消息。
(3)语法
[/code]
异常可以是javaScript字符串、数字、逻辑值或对象。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[/code]
十五、javaScript调试
1、console.log()
2、debugger
debugger关键字用于停止执行javaScript,并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。
十六、javaScript变量提升
1、javaScript中,函数及变量的声明都将被提升到函数的最顶部。
2
3
4
[/code]
2、javaScipt只有声明的变量会提升,初始化的不会。
2
3
4
[/code]
y输出了undefined,因为变量声明(var y)提升了,但是初始化(y=7)并不会提升,所以y变量是一个未定义的变量。
上述代码类似于下列代码
2
3
4
5
[/code]
十七、javaScript严格模式(use strict)
1、严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。”use strict” 指令只运行出现在脚本或函数的开头。
2、为什么使用严格模式?
消除javascript语法的一些不合理,不严谨之处,减少一些怪异行为。
(1)消除代码运行的一些不安全之处,保证代码运行的安全。
(2)提高编译器效率,增加运行速度。
(3)为未来新版本的javascript做好铺垫。
3、同样的代码,在”严格模式”中,可能会有不一样的运行结果;一些在”正常模式”下可以运行的语句,在”严格模式”下将不能运行。
4、严格模式的限制:
(1)不运行使用未声明的变量。
对象也是一个变量。
(2)不允许删除变量或对象。
2
3
[/code]
(3)不允许删除函数。
(4)不允许变量重名。
(5)不允许使用八进制。
(6)不允许使用转义字符。
2
[/code]
(7)不允许对制度属性赋值。
2
3
4
[/code]
(8)不允许对一个使用getter方法读取的属性进行赋值。
2
3
4
[/code]
(9)不允许删除一个不允许删除的属性。
2
[/code]
(10)变量名不能使用“eval”字符串。
(11)变量名不能使用“arguments”字符串。
(12)不允许使用一下这种语句。
2
[/code]
(13)由于一些安全原因,在作用域eval()创建的变量不能被调用。
2
3
[/code]
(14)禁止this关键字指向全局对象。
2
3
4
5
6
7
8
9
10
[/code]
因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。
2
3
4
5
[/code]
十八、javaScript使用误区:
1、赋值运算符应用错误。
在javaScript程序中,如果你在if条件语句中使用赋值运算符的等号(=)将会产生一个错误结果,正确的方法是使用比较运算符的两个等号(==)。
(1)
2
[/code]
(2)
2
[/code]
(3)
2
[/code]
赋值语句返回变量的值。
2、比较运算符常见错误
这种错误经常会在switch语句中出现,switch语句会使用恒等计算符(===)进行比较。
3、加法与连接注意事项。
加法是两个数字相加。
连接是两个字符串连接。
javaScript的加法和连接都使用+运算符。
4、浮点型数据使用注意事项
javaScript中的所有数据都是以64位浮点型数据(float)来存储。
2
3
4
[/code]
为解决以上问题,可以用整数的乘除法来解决:
[/code]
5、字符串分行
(1)javaScript允许我们在字符串中使用断行语句:
2
[/code]
(2)在字符串中直接使用回车换行是会报错的:
2
[/code]
(3)字符串断行需要使用反斜杠(\)
2
[/code]
6、return语句使用注意事项。
不用对 return 语句进行断行。
2
3
4
5
6
[/code]
返回undefind;
①如果是一个不完整的语句,如:
②javaScript将尝试读取第二行的语句:
③但是由于这样的语句是完整的:
④javaScript将自动关闭语句:
由于 return 是一个完整的语句,所以 JavaScript 将关闭 return 语句。
7、数组中使用名字来索引
(1)许多程序语言都允许使用名字来作为数组的索引。
使用名字来作为索引的数组称为关联数组(或哈希)。
(2)javaScript不支持使用名字来索引数组,只允许使用数字索引。
2
3
4
5
6
[/code]
(3)在javaScript中,对象使用名字作为索引。
如果你使用名字作为索引,当访问数组时,javaScript会把数组重新定义为标准对象。
执行这样的操作后,数组的方法和属性将不能再使用,否则会产生错误。
2
3
4
5
6
[/code]
8、undefined不是null
(1)在javaScript中,null用于对象,undefined用于变量,属性和方法。
对象只有被定义才有可能为null,否则为undefined;
(2)如果我们想测试对象是否存在,在对象还没定义时会抛出一个错误。
错误的使用方式:
[/code]
正确的方式是我们需要先使用typeof来检测对象是否已定义:
[/code]
十九、javaScript表单
1、数据验证
(1)服务端数据验证是在数据提交到服务器上后再验证。
(2)客户端数据验证side validation是在数据发送到服务器前,在浏览器上完成验证。
2、约束验证css伪类选择器
二十、javaScript验证API
1、约束验证DOM方法
2
3
4
5
6
7
8
9
10
11
12
13
[/code]
2、约束验证DOM属性
3、validity属性
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[/code]
二十一、javaScript保留关键字
地址:http://www.runoob.com/js/js-reserved.html
二十二、javaScript JSON
1、json语法规则:
(1)数据为键/值对。
(2)数据由逗号分隔。
(3)大括号保存对象
(4)方括号保存数组
2、json数据——一个名称对应一个值
键/值对包含字段名称(在双引号中),后面一个冒号,然后是值:
[/code]
3、json字符串转换为javaScript对象
(1)创建javaScript字符串,字符串为json格式的数据。
2
3
4
[/code]
(2)使用javaScript内置对象JSON.parse()将字符串转换为javaScript对象:
[/code]
(3)在页面中使用新的javaScript对象:
2
3
4
5
6
7
[/code]
4、相关函数
二十三、javaScript void
1、javascript:void(0)中最关键的是void关键字,void是javaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
2、语法格式如下:
2
3
4
5
6
7
8
9
10
11
[/code]
void(0)计算为0,但javaScript上没有任何效果。
3、href=”#”与href=”javascript:void(0)”的区别
(1)#包含了一个位置信息,默认的锚是#top也就是网页的上端。
(2)javascript:void(0),仅仅表示一个死链接。
(3)在页面很长的时候会用#来定位页面的具体位置,格式为:#+id
二十四、javaScript代码规范
1、代码规范通常包括以下几个方面。
(1)变量和函数的命名规则。
(2)空格、缩进、注释的使用规则
(3)其他常用规范…
2、变量名。
变量名推荐使用驼峰法来命名(camelCase)。
3、空格与运算符。
通常运算符(=+-*/)前后需要添加空格。
[/code]
4、代码缩进
(1)通常使用4个空格符号来缩进代码块。
(2)不推荐使用tab键来缩进,因为不同编辑器tab键的解析不一样。
5、语句规则。
(1)简单语句的通用规则:
①一条语句通常以分号作为结束符。
(2)复杂语句的通用规则。
①将花括号放在第一行的结尾。
②左花括号前添加一空格。
③将右花括号独立放在一行。
④不要以分号结束一个复杂的声明。
2
3
[/code]
6、对象规则
(1)将左花括号与类名放在同一行。
(2)冒号与属性值间有个空格。
(3)字符串使用双引号,数字不需要。
(4)最后一个属性-值对后面不要添加逗号。
(5)将右花括号独立放在一行,并以分号作为结束符号。
2
3
4
5
6
[/code]
(6)短的对象代码可以直接写成一行。
[/code]
7、每行代码字符小于80
(1)为了便于阅读每行字符建议小于数80个。
(2)如果一个javaScript语句超过了80个字符,建议在运算符或者逗号后换行。
2
[/code]
8、命名规则
(1)一般很多代码语言的命名规则都是类似的。
①变量和函数为驼峰法。(camelCase)
②全局变量为大写(UPPERCASE)
③变量(如PI)为大写(UPPERCASE)
(2)html和css的横杠(-)字符
①css使用-来连接属性名(font-size)。
②-通常在javaScript被认为是减法,所以不允许使用。
(3)下划线。
①SQL数据库。
②php语言通常都使用下划线。
(4)帕斯卡拼写法(PascalCase)。
①单字之间不以空格断开或连接号(-),底线(_)连接,第一个单字首字母采用大写字母,后续单字的首字母亦用大写字母。
②帕斯卡命名法也称为“大驼峰式命名法”。
③帕斯卡拼写法(PascalCase)在C语言中运用较多。
js函数
二十五、javaScript函数定义
1、函数声明后不会立即执行,会在我们需要的时候调用到。
2、分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句,所以不以分号结束。
3、匿名函数:
2
[/code]
匿名函数,函数存储在变量中,不需要函数名称,通常通过变量名来调用。
4、函数定义的3种方式:
(1)函数声明:
2
3
[/code]
(2)函数表达式:
[/code]
(3)Function()构造函数
2
3
[/code]
也可以写成:
2
3
[/code]
注意:在 JavaScript 中,很多时候,你需要避免使用 new 关键字。
5、(1)函数可以通过声明定义,也可以是一个表达式。
(2)函数可以作为一个值使用,也可以作为一个表达式使用。
①值:
2
3
4
5
[/code]
②表达式:
2
3
4
5
[/code]
6、提升(Hoisting)
(1)提升是 JavaScript 默认将当前作用域提升到前面去的的行为。
(2)提升(Hoisting)应用在变量的声明与函数的声明。
(3)表达式定义函数时无法提升。
7、自调用函数
(1)函数表达式可以 “自调用”。
(2)自调用表达式会自动调用。
(3)如果表达式后面紧跟 () ,则会自动调用。
(4)不能自调用声明的函数。
(5)通过添加括号,来说明它是一个函数表达式。
(6) 匿名自我调用的函数:
2
3
[/code]
8、函数是对象
(1)arguments.length 属性返回函数调用过程接收到的参数个数
2
3
[/code]
(2)toString() 方法将函数作为一个字符串返回:
2
3
4
5
[/code]
9、函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。
二十六、javaScript函数参数
1、显式参数(Parameters)与隐式参数(Arguments)
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。
2、默认参数
如果函数在调用时未提供隐式参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值:
2
3
[/code]
3、arguments对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
4、传递参数的2种途径:
(1)通过值传递参数
①在函数中调用的参数是函数的隐式参数。
②JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。
③如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。
④隐式参数的改变在函数外是不可见的。
(2)通过对象传递参数
①在JavaScript中,可以引用对象的值。
②因此我们在函数内部修改对象的属性就会修改其初始的值。
③修改对象属性可作用于函数外部(全局变量)。
④修改对象属性在函数外是可见的。
二十七、javaScript函数调用
1、javaScript4种调用方式:作为函数调用、作为方法调用、使用构造函数调用函数、作为函数方法调用函数。
每种方式的不同方式在于 this 的初始化。
2、this
一般而言,在Javascript中,this指向函数执行时的当前对象。
3、
2
3
4
[/code]
这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。
4、全局对象
(1)当函数没有被自身的对象调用时, this 的值就会变成全局对象。
(2)在 web 浏览器中全局对象是浏览器窗口(window 对象)。
(3)函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。
5、函数作为方法调用
2
3
4
5
6
7
8
[/code]
函数作为对象方法调用,会使得 this 的值成为对象本身。
6、使用构造函数调用函数
(1)如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象。
(2)构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
(3)构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
7、作为函数方法调用函数
(1)在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
(2)call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
(3)
2
3
4
[/code]
2
3
4
5
[/code]
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
二十八、javaScript闭包
1、JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
2、变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。
3、全局和局部变量即便名称相同,它们也是两个不同的变量。修改其中一个,不会影响另一个的值。
4、(1)闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
2
3
4
5
6
7
8
[/code]
①add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
②这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
③计数器受匿名函数的作用域保护,只能通过 add 方法修改。
(2)闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。
或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。
js html dom
二十九、dom简介
三十、dom html
1、改变html元素的属性:
document.getElementById(id).attribute=新属性值
[/code]
三十一、dom css
document.getElementById(id).style.property=新样式
[/code]
三十二、dom事件
1、onload 和 onunload 事件
onload 和 onunload 事件可用于处理 cookie。
2、onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
三十三、dom EventListener
1、addEventListener()
(
265fc
1)addEventListener() 方法用于向指定元素添加事件句柄。
(2)addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
(3)你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
(4)addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
(5)当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
(6)可以使用 removeEventListener() 方法来移除事件的监听。
2、语法
[/code]
(1)第一个参数是事件的类型 (如 “click” 或 “mousedown”).
(2)第二个参数是事件触发后调用的函数。
(3)第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
3、当用户重置窗口大小时添加事件监听:
2
3
[/code]
4、事件冒泡或事件捕获
(1)事件传递有两种方式:冒泡与捕获。
(2)事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素中,用户点击
元素, 哪个元素的 “click” 事件先被触发呢?
(3)在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:
元素的点击事件先触发,然后会触发
元素的点击事件。
(4)在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
元素的点击事件先触发 ,然后再触发
元素的点击事件。
(5)addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:
(6)addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
5、(1) IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
2
[/code]
(2)跨浏览器解决办法:
2
3
4
5
6
[/code]
三十四、dom元素
1、
2、
3、
4、
5、
js高级教程
三十五、javaScript对象
1、javaScript中的所有事物都是对象:字符串、数值、数组、函数…
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
2、对象的属性和方法:
(1)访问对象属性的语法是:
[/code]
(2)方法是能够在对象上执行的动作。
可以通过以下语法来调用方法:
[/code]
3、创建对象的2种方法:
(1)定义并创建对象的实例
2
3
4
5
[/code]
(2)使用函数来定义对象,然后创建新的对象实例
2
3
4
5
6
7
8
9
[/code]
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
4、JavaScript 是面向对象的语言,但 JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
JavaScript 基于 prototype,而不是基于类的。
5、JavaScript for…in 语句循环遍历对象的属性。
2
3
[/code]
for…in 循环中的代码块将针对每个属性执行一次。
三十六、javaScript Number对象
1、JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。
2、javaScript中,所有的数字都是由 浮点型类型。
3、精度
(1)整数(不使用小数点或指数计数法)最多为 15 位。
2
[/code]
(2)小数的最大位数是 17,但是浮点运算并不总是 100% 准确:
[/code]
4、八进制和十六进制
(1)如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 “x”,则解释为十六进制数。
2
3
4
[/code]
绝不要在数字前面写零,除非您需要进行八进制转换。
(2)默认情况下,JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
2
3
4
[/code]
5、无穷大(infinity)
无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。
6、NaN
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
2
3
4
[/code]
7、数字属性
8、数字方法
三十七、javaScript String
三十八、javaScript日期
1、4种初始化日期方式:
2
3
4
[/code]
上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。
2、设置日期
将日期对象设置为 5 天后的日期:
2
[/code]
注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
三十九、javaScript 数组
1、可以在一个数组中包含对象元素、函数、数组。
2
3
[/code]
2、
四十、javaScript Boolean
1、定义一个名为 myBoolean 的布尔对象:
[/code]
2、如果布尔对象无初始值或者其值为:
0、-0、null、”“、false、undefined、NaN
那么对象的值为 false。
否则,其值为true。(即使是字符串“false”)
四十一、javaScript Match
1、JavaScript 提供 8 种可被 Math 对象访问的算数值:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
2、算术方法。
四十二、javaScript RegExp对象
1、正则表达式(regular expression)
2、语法:
(1)var patt=new RegExp(pattern, modifiers);//modifiers修饰符:是否全局,是否大小写。
(2)var patt=/pattern/modifiers;
JS浏览器BOM
四十三、javaScript window
1、浏览器对象模型BOM(Browser Object Model)
2、document也是window对象的属性之一。
3、window尺寸。
(1)对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
(2)对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者:
document.body.clientHeight
document.body.clientWidth
2
3
4
5
6
7
8
[/code]
4、其他window方法
(1)window.open()-打开新窗口
(2)window.close()-关闭当前窗口
(3)window.moveTo()-移动当前窗口
(4)window.resizeTo()-调整当前窗口的尺寸
四十四、javaScript window screen
1、window.screen对象包含有关用户屏幕的信息。
2、screen.availWidth - 可用的屏幕宽度。以像素计,减去界面特征,比如窗口任务栏。
screen.availHeight -可用的屏幕宽度
四十五、javascript window location
1、window.location对象用于获得当前页面的地址(url),并把浏览器重定向到新的页面。
四十六、javaScript window history
1、windwo.history对象包含浏览器的历史
四十七、javaScript window navigator
1、
2、来自navigator对象的信息具有误导性,不应该被用于检测浏览器版本,因为:
(1)navigator数据可被浏览器使用者更改。
(2)一些浏览器对测试站点会识别错误。
(3)浏览器无法报告晚于浏览器发布的新操作系统。
3、只有opera属性支持window.opera,可以由此识别出opera
[/code]
四十八、javascript弹窗
1、可以在javascript中创建三种消息框:警告框,确认框,提示框。
2、警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
3、确认框
确认框通常用于验证是否接受用户操作。
当确认框弹出时,用户可以点击“确认”或者“取消”来确定用户操作。
当你点击“确认”,确认框返回true,如果点击“取消”,确认框返回false。
4、提示框
提示框通常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为null。
5、换行。
弹窗使用反斜杠(\n)来设置换行。
四十九、 计时事件
1、setInterval()-间隔指定的毫秒数不停地执行指定的代码。
2、setTimeout()-暂停指定的毫秒数后执行指定的代码。
3、clearInterval()
要使用clearInterval()方法,在创建计时方法时你必须使用全局变量。
2
3
4
[/code]
4、clearTimeout()
要使用clearTimeout()方法,你必须在创建超时方法中(setTimeout)使用全局变量。
如果函数还未执行,你可以使用clearTimeout()方法来停止执行函数代码。
2
3
4
5
6
7
[/code]
五十、JavaScript cookie
1、cookie是一些数据,存储在你电脑上的文本文件中。
2、cookie的作用就是用于解决“如何记录客户端的用户信息”:
(1)当用户访问web页面时,他的名字可以记录在cookie中。
(2)在用户下一次访问该页面时,可以在cookie中读取用户访问记录。
3、cookie以名/值对形式存储,如下所示:
username=John Doe
4、1)创建cookie
(1)创建cookie
[/code]
(2)可以为cookie添加一个过期时间(以UTC或GMT时间)。默认情况下,cookie在浏览器关闭时删除:
[/code]
(3)可以使用path参数告诉浏览器cookie的路径。默认情况下,cookie属于当前页面。
[/code]
2)读取cookie
[/code]
3)使用js修改cookie
在js中,修改cookie类似于创建cookie,如下:
[/code]
旧的cookie将被覆盖。
4)js删除cookie
删除cookie非常简单。您值需要设置expires参数为以前的时间即可。
[/code]
注意,当你删除时不必指定cookie的值。
5、cookie字符串
document.cookie属性看起来像一根普通的文本字符串,其实它不是。
6、(1)设置cookie值的函数:
2
3
4
5
6
7
[/code]
(2)获取cookie值的函数
2
3
4
5
6
7
8
9
10
11
[/code]
(3)检测cookie值的函数:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[/code]
js库
五十一、javaScript测试jQuery
1、jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
2、jQuery 对象拥有的属性和方法,与 DOM 对象的不同。
3、不能在 jQuery 对象上使用 HTML DOM 的属性和方法。
4、jQuery允许链接(链式语法)。
链接(chaining)是一种在同一对象上执行多个任务的便捷方法。
五十二、javaScript测试prototype
2
3
[/code]
1、event.observe()接受三个参数:
(1)您希望处理的html dom或bom对象。
(2)您希望处理的事件。
(3)您希望调用的函数。
js实例
五十三、javaScript实例
1、创建对象的实例
2
[/code]
2、创建用于对象的模板
2
3
4
5
6
7
8
[/code]
五十四、javaScript对象实例
1、
1、javaScript可以通过不同的方式来输出数据。
(1)window.alert()弹出警告框。
(2)document.write()方法将内容写到html文档中。
(3)innerHTML写入到html元素。
(4)console.log()写入到浏览器的控制台。
二、javaScipt语法
1、在编程语言中,一般固定值为字面量。
(1)javaScript字面量:①数字(Number)字面量。②字符串(String)字面量。③表达式字面量。④数组(Array)字面量。⑤对象(Object)字面量。⑥函数(Function)字面量。
(2)在指令式语言中,变量是一个名称,变量通常是可变的;字面量是一个值。
2、(1)JavaScript 关键字必须以字母、下划线(_)或美元符($)开始。
(2)后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开关键字和数字)
三、javaScript数据类型
(1)①javaScript数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
②(aSuncat外注):5种原始类型(primitive[‘prɪmɪtɪv] type):String、Number、Boolean、Undefined、Null
(2)创建数组的3种方式
①常规方式
var cars=new Array(); cars[0]='Saab'; cars[1]='Volvo';1
2
3
[/code]
②condensed array(简洁方式)
var cars=new Array('Saab','Volvo');1
[/code]
③literal array(字面)
var cars=['Saab','Volvo'];1
[/code]
(3)对象属性有2种寻址方式:
①name=person.lastname; ②name=person["lastname"];1
2
[/code]
(4)对象的赋值
(aSuncat外注)如果定义一个变量,要用这个变量给对象赋值,就得用
person[y]="1"。如下:
var person={} var y=id1; person[y]="1";//不能用person.y="1";1
2
3
[/code]
得到的是:
person={id1:"1"};1
[/code]
(5)JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
①当您声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;1
2
3
4
5
[/code]
(6)①访问person对象的fullName方法
name = person.fullName();1
[/code]
②访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:
name = person.fullName;1
[/code]
四、javaScript函数
1、(1)在使用 return 语句时,函数会停止执行,并返回指定的值。
函数调用将被返回值取代:
function myFunction(){ var x=5; return x; } var myVar=myFunction();1
2
3
4
5
[/code]
(2)仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的。
function myFunction(a,b){ if (a>b) { return; } x=a+b }1
2
3
4
5
6
7
[/code]
如果a>b,则上面的代码将退出函数,并不会计算a和b的总和。
五、javaScript作用域
1、在 JavaScript 中, 对象和函数同样也是变量。(aSuncat:对象和函数既是字面量,又是变量)
2、在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
3、在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
六、javaScript字符串
1、可以使用索引位置来访问字符串中的每个字符。
var carname = 'Volvo XC60'; var character = carname[7];1
2
[/code]
2、字符串长度
可以使用内置属性 length 来计算字符串的长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length;1
2
[/code]
3、特殊字符
代码 | 输出 |
---|---|
\n | 换行 |
\r | 回车 |
\t | 制表符 |
\b:backspace | 退格 |
\f | 换页符 |
(1) JavaScript 字符串是原始值,可以使用字符创建:
var firstName = "John"1
[/code]
(2)也可以使用 new 关键字将字符串定义为一个对象
var firstName = new String("John")1
[/code]
注意:不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
5、(1)①原始值字符串,如 “John”, 没有属性和方法(因为他们不是对象)。
②原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。
(2)(aSuncat:外注)
①原始值
存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
②引用值
存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
6、字符串属性
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性 |
方法 | 描述 | 使用 |
---|---|---|
charAt() | 返回指定索引位置的字符 | var n = str.charAt(2); |
charCodeAt() | 返回指定索引位置字符的Unicode值 | |
concat() | 连接两个或多个字符串,返回连接后的字符串 | var n = str1.concat(str2); |
fromCharCode() | 将Unicode转换为字符串 | |
indexOf() | 返回字符串中检索指定字符第一次出现的位置。如果没有找到对应的字符,函数返回-1。 | str.indexOf("welcome"); |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的地方 | |
localeCompare() | 用本地特定的顺序来比较两个字符串 | |
match() | 找到一个或多个正则表达式的匹配。如果找到的话,返回这个字符;没有找到则返回null。 | str.match("World");//返回World或者null |
replace() | 替换与正则表达式匹配的子串.str.replace("Microsoft","w3cschool"); | |
search() | 检索与正则表达式相匹配的值 | |
split() | 把字符串分割为子字符串数组。 | txt="a,b,c,d,e"//String; txt.split(",");//使用逗号分隔;输出[a,b,c,d,e] |
slice() | 提取字符串的片段,并在新的字符串中返回被提取的部分 | |
substr() | 从起始索引号提取字符串中指定数目的字符 | |
substring() | 提取字符串中两个指定的索引号之间的字符 | |
toLocalLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 | |
toLocalUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 | |
toLowerCase() | 把字符串转换为小写 | |
toString() | 返回字符串对象值 | |
toUpperCase() | 把字符串转换为大写 | |
trim() | 移除字符串首位空白 | |
valueOf() | 返回某个字符串对象的原始值 |
在两个字符串之间增加空格的两种方法。
(1)把空格插入一个字符串之中。
txt1="What a very "; txt2="nice day"; txt3=txt1+txt2;1
2
3
[/code]
(2)把空格插入字符串中
txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;1
2
3
[/code]
2、空文本 + 数字得到的运算结果都是把数字转成字符串,无论文本有多少个空格。
var result1=""+5; // 得到的结果是"5" var result2=" "+5; // 得到的结果是"5" var result3=" "+5; // 得到的结果是"5"1
2
3
[/code]
八、javaScript比较
1、条件运算符(三目运算符)
variablename=(condition)?value1:value2
var voteable,age; voteable=(age<18)?"年龄太小":"年龄已达到";1
2
[/code]
九、javaScript循环
1、for in循环不仅可以遍历对象的属性,还可以遍历数组。
十、javaScript Break和Continue
1、break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代,所以 continue 只能用于循环的代码块。
2、(1)continue 语句(带有或不带标签引用)只能用在循环中。
(2)break 语句(不带标签引用),只能用在循环或 switch 中。
(3)通过标签引用,break 语句可用于跳出任何 JavaScript 代码块。
cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); }1
2
3
4
5
6
7
8
9
10
11
[/code]
十一、javaScript typeof
1、用typeof检测null返回是object。
2、null是一个只有一个值的特殊类型。表示一个空对象引用。
3、undefined是一个没有设置值的变量。
4、null和undefined的值相等,但是类型不相等。
十二、javaScript类型转换
1、Number()转换为数字,String()转换为字符串,Boolean()转换为布尔值。
2、(1)javaScript中有5种不同的数据类型:string、number、boolean、object、function
(2)3种对象类型:Object、Date、Array
(3)2个不包含任何值的数据类型:null、undefined
3、(1)NaN的数据类型是number
(2)数组(Array)的数据类型是object
(3)日期(Date)的数据类型为object
(4)null的数据类型是object
(5)未定义变量的数据类型为undefined
4、如果对象是Array或Date,就无法通过typeof来判断他们的类型,因为都是Object.
5、constructor 属性返回所有 JavaScript 变量的构造函数。
(1)函数 | 返回值 |
---|---|
“John”.constructor | // 返回函数 String() { [native code] } |
(3.14).constructor | // 返回函数 Number() { [native code] } |
false.constructor | // 返回函数 Boolean() { [native code] } |
[1,2,3,4].constructor | // 返回函数 Array() { [native code] } |
{name:’John’, age:34}.constructor | // 返回函数 Object() { [native code] } |
new Date().constructor | // 返回函数 Date() { [native code] } |
function () {}.constructor | // 返回函数 Function(){ [native code] } |
function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; }1
2
3
[/code]
(3)可以使用constructor属性来查看对象是否为日期(包含字符串“Date”)
function isDate(myDate) { return myDate.constructor.toString().indexOf("Date") > -1; }1
2
3
[/code]
6、
(1)数字转换为字符串的方法:
方法 | 描述 |
---|---|
String(x) | |
x.toString() | |
toExponential() | 把对象的值转换为指数计数法。 |
toFixed() | 把数字转换为字符串,结果的小数点后有指定位数的数字。 |
方法 | 描述 |
---|---|
String(x) | |
x.toString() | |
getFullYear() | 从Date对象以四位数字返回年份 |
getMonth() | 从Date对象返回月份(0-11) |
getDate() | 从Date对象返回一个月中的某一天(1-31) |
getHours() | 返回Date对象的小时(0-23) |
getSeconds() | 返回Date对象的秒数(0-59) |
getMilliseconds() | 返回Date对象的毫秒(0-999) |
getDay() | 从Date对象返回一周中的某一天(0-6) |
getTime() | 返回1970年1月1日至今的毫秒数 |
方法 | 描述 |
---|---|
Number() | ①全局方法Number()可以将字符串转换为数字。②空字符串转换为0。③其他的字符串会转换为NaN |
parseFloat() | 解析一个字符串,并返回一个浮点数 |
parseInt() | 解析一个字符串,并返回一个整数 |
一元运算符+ | ①可将变量转换为数字。②var y = "5"; // y 是一个字符串; var x = + y;// x 是一个数字③如果变量不能转换,它仍然会是一个数字,但值为NaN。 var y = "John";// y 是一个字符串; var x = + y;// x 是一个数字 (NaN) |
方法 | 描述 |
---|---|
Number() | Number(false)// 返回 0; Number(true) // 返回 1 |
方法 | 描述 |
---|---|
Number() | d = new Date();Number(d) |
getTime() | 日期方法getTime()能将日期转换为数字。d = new Date();d.getTime() |
当javaScript尝试操作一个“错误”的数据类型时,会自动转换为“正确”的数据类型。
①数字+null,null转换为0,+为运算符
5 + null // 返回 5 ,null 转换为 0
②字符串+null,null转换为字符串”null”,+为拼接
“5” + null // 返回”5null” , null 转换为 “null”
③字符串+数字,数字转换为字符串,+为拼接
“5” + 1 // 返回 “51”,1 转换为 “1”
④字符串-数字,字符串转换为数字,-为运算符
“5” - 1 // 返回 4,”5” 转换为 5
(7)自动转换为字符串
当你尝试输出一个对象或一个变量时,javaScript会自动调用变量的toString()方法
document.getElementById("demo").innerHTML = myVar; // if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]" // if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4" // if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"1
2
3
4
5
[/code]
十三、javaScript正则表达式
1、正则表达式
(1)正则表达式是由一个字符序列形成的搜索模式。
(2)搜索模式可用于文本搜索和文本替换。
(3)正则表达式可用于所有文本搜索和文本替换的操作。
2、var patt = /runoob/i
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
3、在javaScript中,正则表达式通常用于两个字符串方法:search()和replace()。
(1)search()方法:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
①正则表达式搜索Runoob,且不区分大小写。
var str='I love Runoob Runoob'; var n = str.search(/Runoob/i); console.log(n);//得到的n为7(第一个Runoob的R的下标)1
2
3
[/code]
②search()方法可使用字符串作为参数。字符串参数会转换为正则表达式。
var n = str.search("Runoob");1
[/code]
(2)replace()方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
①使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var txt = str.replace(/microsoft/i,"Runoob");1
[/code]
②replace() 方法将接收字符串作为参数。
var txt = str.replace("Microsoft","Runoob");1
[/code]
4、正则表达式修饰符
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) |
m | 执行多行匹配 |
(1)方括号用于查找某个范围内的字符。
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符 |
[0-9] | 查找任何从0至9的数字 |
(x|y) | 查找任何以|分割的选项 |
元字符 | 描述 |
---|---|
\d | 查找数字 |
\s | 查找空白字符 |
\b | 匹配单词边界 |
\uxxxx | 查找以十六进制数xxxx规定的Unicode字符 |
量词 | 描述 |
---|---|
m+ | 匹配任何包含至少一个m的字符串:1|n |
m* | 匹配任何包含零个或多个m的字符串:0|n |
m? | 匹配任何包含零个或一个m的字符串:0|1 |
在javaScript中,RegExp对象是一个预定义了属性和方法的正则表达式对象。
7、test()和exec()
(1)test()
test()方法是一个正则表达式方法。
test()方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false.
①
var patt = /e/; var str="The best things in life are free!"; patt.test(str);1
2
3
[/code]
返回true
②
var str = 'runoob'; var patt1 = new RegExp('\\w', 'g'); // 有转义作为正则表达式处理 var patt2 = new RegExp('\w', 'g'); // 无转义作为字符串处理 var patt3 =/\w+/g; // 与 patt1 效果相同 document.write(patt1.test(str)) //输出 true document.write("<br>") document.write(patt2.test(str)) //输出 false document.write("<br>") document.write(patt3.test(str)) //输出 true1
2
3
4
5
6
7
8
9
[/code]
(2)exec()
exec()方法是一个正则表达式方法。
exec()方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为null。
var patt=/e/; var str="The best things in life are free!" patt.exec(str);1
2
3
[/code]
返回e
十四、javaScipt错误
1、javaScript错误-throw、try和catch
(1)try语句测试代码块的错误。
(2)catch语句处理错误。
(3)throw语句创建自定义错误。
2、try和catch
(1)try语句允许我们定义在执行时进行错误测试的代码块。
(2)catch语句允许我们定义当try代码块发生错误时,所执行的代码快。
(3)javaScript语句try和catch是成对出现的。
try { //在这里运行代码 } catch(err) { //在这里处理错误 }1
2
3
4
5
[/code]
(4)catch块会捕捉到try块中的错误,并执行代码来处理它。
var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="本页有一个错误。\n\n"; txt+="错误描述:" + err.message + "\n\n"; txt+="点击确定继续。\n\n"; alert(txt); } }1
2
3
4
5
6
7
8
9
10
11
12
[/code]
3、throw语句
(1)throw语句创建或抛出异常(exception[ik’sepʃən]:异常)。
(2)throw与try和catch一起使用,能够控制程序流,并生成自定义的错误消息。
(3)语法
throw exception1
[/code]
异常可以是javaScript字符串、数字、逻辑值或对象。
function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值为空"; if(isNaN(x)) throw "不是数字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "错误: " + err; } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[/code]
十五、javaScript调试
1、console.log()
2、debugger
debugger关键字用于停止执行javaScript,并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。
十六、javaScript变量提升
1、javaScript中,函数及变量的声明都将被提升到函数的最顶部。
x = 5; // 变量 x 设置为 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中显示 x var x; // 声明 x1
2
3
4
[/code]
2、javaScipt只有声明的变量会提升,初始化的不会。
var x = 5; // 初始化 x elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y var y = 7; // 初始化 y1
2
3
4
[/code]
y输出了undefined,因为变量声明(var y)提升了,但是初始化(y=7)并不会提升,所以y变量是一个未定义的变量。
上述代码类似于下列代码
var x = 5; // 初始化 x var y; // 声明 y elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y y = 7; // 设置 y 为 71
2
3
4
5
[/code]
十七、javaScript严格模式(use strict)
1、严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。”use strict” 指令只运行出现在脚本或函数的开头。
2、为什么使用严格模式?
消除javascript语法的一些不合理,不严谨之处,减少一些怪异行为。
(1)消除代码运行的一些不安全之处,保证代码运行的安全。
(2)提高编译器效率,增加运行速度。
(3)为未来新版本的javascript做好铺垫。
3、同样的代码,在”严格模式”中,可能会有不一样的运行结果;一些在”正常模式”下可以运行的语句,在”严格模式”下将不能运行。
4、严格模式的限制:
(1)不运行使用未声明的变量。
对象也是一个变量。
(2)不允许删除变量或对象。
"use strict"; var x = 3.14; delete x; // 报错1
2
3
[/code]
(3)不允许删除函数。
(4)不允许变量重名。
(5)不允许使用八进制。
(6)不允许使用转义字符。
"use strict"; var x = \010; // 报错1
2
[/code]
(7)不允许对制度属性赋值。
"use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 报错1
2
3
4
[/code]
(8)不允许对一个使用getter方法读取的属性进行赋值。
"use strict"; var obj = {get x() {return 0} }; obj.x = 3.14; // 报错1
2
3
4
[/code]
(9)不允许删除一个不允许删除的属性。
"use strict"; delete Object.prototype; // 报错1
2
[/code]
(10)变量名不能使用“eval”字符串。
(11)变量名不能使用“arguments”字符串。
(12)不允许使用一下这种语句。
"use strict"; with (Math){x = cos(2)}; // 报错1
2
[/code]
(13)由于一些安全原因,在作用域eval()创建的变量不能被调用。
"use strict"; eval ("var x = 2"); alert (x); // 报错1
2
3
[/code]
(14)禁止this关键字指向全局对象。
function f(){ return !this; } // 返回false,因为"this"指向全局对象,"!this"就是false function f(){ "use strict"; return !this; } // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。1
2
3
4
5
6
7
8
9
10
[/code]
因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。
function f(){ "use strict"; this.a = 1; }; f();// 报错,this未定义1
2
3
4
5
[/code]
十八、javaScript使用误区:
1、赋值运算符应用错误。
在javaScript程序中,如果你在if条件语句中使用赋值运算符的等号(=)将会产生一个错误结果,正确的方法是使用比较运算符的两个等号(==)。
(1)
var x = 0; if (x == 10)//返回false(因为x不等于10)1
2
[/code]
(2)
var x = 0; if (x = 10)//返回true(因为条件语句执行为x赋值为10,10为true)1
2
[/code]
(3)
var x = 0; if (x = 0)//返回false(因为条件语句执行为x赋值0,0为false)1
2
[/code]
赋值语句返回变量的值。
2、比较运算符常见错误
这种错误经常会在switch语句中出现,switch语句会使用恒等计算符(===)进行比较。
3、加法与连接注意事项。
加法是两个数字相加。
连接是两个字符串连接。
javaScript的加法和连接都使用+运算符。
4、浮点型数据使用注意事项
javaScript中的所有数据都是以64位浮点型数据(float)来存储。
var x = 0.1; var y = 0.2; var z = x + y // z 的结果为 0.3 if (z == 0.3) // 返回 false 1fff71
2
3
4
[/code]
为解决以上问题,可以用整数的乘除法来解决:
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.31
[/code]
5、字符串分行
(1)javaScript允许我们在字符串中使用断行语句:
var x = "Hello World!";1
2
[/code]
(2)在字符串中直接使用回车换行是会报错的:
var x = "Hello World!";1
2
[/code]
(3)字符串断行需要使用反斜杠(\)
var x = "Hello \ World!";1
2
[/code]
6、return语句使用注意事项。
不用对 return 语句进行断行。
function myFunction(a) { var power = 10; return a * power; }1
2
3
4
5
6
[/code]
返回undefind;
①如果是一个不完整的语句,如:
var
②javaScript将尝试读取第二行的语句:
power=10;
③但是由于这样的语句是完整的:
return
④javaScript将自动关闭语句:
return;
由于 return 是一个完整的语句,所以 JavaScript 将关闭 return 语句。
7、数组中使用名字来索引
(1)许多程序语言都允许使用名字来作为数组的索引。
使用名字来作为索引的数组称为关联数组(或哈希)。
(2)javaScript不支持使用名字来索引数组,只允许使用数字索引。
var person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; var x = person.length; // person.length 返回 3 var y = person[0]; // person[0] 返回 "John"1
2
3
4
5
6
[/code]
(3)在javaScript中,对象使用名字作为索引。
如果你使用名字作为索引,当访问数组时,javaScript会把数组重新定义为标准对象。
执行这样的操作后,数组的方法和属性将不能再使用,否则会产生错误。
var person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; var x = person.length; // person.length 返回 0 var y = person[0]; // person[0] 返回 undefined1
2
3
4
5
6
[/code]
8、undefined不是null
(1)在javaScript中,null用于对象,undefined用于变量,属性和方法。
对象只有被定义才有可能为null,否则为undefined;
(2)如果我们想测试对象是否存在,在对象还没定义时会抛出一个错误。
错误的使用方式:
if (myObj !== null && typeof myObj !== "undefined")1
[/code]
正确的方式是我们需要先使用typeof来检测对象是否已定义:
if (typeof myObj !== "undefined" && myObj !== null)1
[/code]
十九、javaScript表单
1、数据验证
(1)服务端数据验证是在数据提交到服务器上后再验证。
(2)客户端数据验证side validation是在数据发送到服务器前,在浏览器上完成验证。
2、约束验证css伪类选择器
选择器 | 描述 |
---|---|
:disabled | 选取属性为“disabled”属性的input元素 |
:invalid | 选取无效的input元素 |
:optional | 选择没有“required”属性的input元素 |
:required | 选择有“required”属性的input元素 |
:valid | 选取有效值的input元素 |
1、约束验证DOM方法
property | description |
---|---|
checkValidity() | 如果input元素中的数据是合法的返回true,否则返回false |
setCustomValidity() | 设置input元素的validationMessage属性,用于自定义错误提示信息的方法。 |
<input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">验证</button> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } } </script>1
2
3
4
5
6
7
8
9
10
11
12
13
[/code]
2、约束验证DOM属性
属性 | 描述 |
---|---|
validity | 布尔属性值,返回input输入值是否合法 |
validationMessage | 浏览器错误提示信息 |
willValidate | 指定input是否需要验证 |
属性 | 描述 |
---|---|
customError | 设置为true,如果设置了自定义的validity信息。 |
patternMismatch | 设置为true,如果元素的值不匹配它的模式属性。 |
rangeOverflow | 设置为true,如果元素的值大于设置的最大值。 |
rangeUnderflow | 设置为true,如果元素的值小于它的最小值 |
stepMismatch | 设置为true,如果元素的值超过了maxLength属性设置的长度 |
typeMismatch | 设置为true,如果元素的值不是预期相匹配的类型 |
valueMissing | 设置为true,如果元素(required属性)没有值 |
valid | 设置为true,如果元素的值是合法的。 |
<input id="id1" type="number" min="100" required> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var txt = ""; var inpObj = document.getElementById("id1"); if(!isNumeric(inpObj.value)) { txt = "你输入的不是数字"; }else if(document.getElementById("id1").validity.rangeOverflow) { txt = "输入的值太大了"; }else if (inpObj.validity.rangeUnderflow) { txt = "输入的值太小了"; } else { txt = "输入正确"; } document.getElementById("demo").innerHTML = txt; } // 判断输入是否为数字 function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[/code]
二十一、javaScript保留关键字
地址:http://www.runoob.com/js/js-reserved.html
二十二、javaScript JSON
1、json语法规则:
(1)数据为键/值对。
(2)数据由逗号分隔。
(3)大括号保存对象
(4)方括号保存数组
2、json数据——一个名称对应一个值
键/值对包含字段名称(在双引号中),后面一个冒号,然后是值:
"name":"Runoob"1
[/code]
3、json字符串转换为javaScript对象
(1)创建javaScript字符串,字符串为json格式的数据。
var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';1
2
3
4
[/code]
(2)使用javaScript内置对象JSON.parse()将字符串转换为javaScript对象:
var obj = JSON.parse(text);1
[/code]
(3)在页面中使用新的javaScript对象:
var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';1
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
2
3
4
5
6
7
[/code]
4、相关函数
函数 | 描述 |
---|---|
JSON.parse() | 用于将一个JSON字符串转换为javaScript对象 |
JOSN.stringify() | 用于将javaScript值转换为JSON字符串 |
1、javascript:void(0)中最关键的是void关键字,void是javaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
2、语法格式如下:
<head> <script type="text/javascript"> <!-- void func() javascript:void func() 或者 void(func()) javascript:void(func()) //--> </script> </head>1
2
3
4
5
6
7
8
9
10
11
[/code]
void(0)计算为0,但javaScript上没有任何效果。
3、href=”#”与href=”javascript:void(0)”的区别
(1)#包含了一个位置信息,默认的锚是#top也就是网页的上端。
(2)javascript:void(0),仅仅表示一个死链接。
(3)在页面很长的时候会用#来定位页面的具体位置,格式为:#+id
二十四、javaScript代码规范
1、代码规范通常包括以下几个方面。
(1)变量和函数的命名规则。
(2)空格、缩进、注释的使用规则
(3)其他常用规范…
2、变量名。
变量名推荐使用驼峰法来命名(camelCase)。
3、空格与运算符。
通常运算符(=+-*/)前后需要添加空格。
var x = y + z;1
[/code]
4、代码缩进
(1)通常使用4个空格符号来缩进代码块。
(2)不推荐使用tab键来缩进,因为不同编辑器tab键的解析不一样。
5、语句规则。
(1)简单语句的通用规则:
①一条语句通常以分号作为结束符。
(2)复杂语句的通用规则。
①将花括号放在第一行的结尾。
②左花括号前添加一空格。
③将右花括号独立放在一行。
④不要以分号结束一个复杂的声明。
function toCelsius(fahrenheit) { return (5 / 9) * (fahrenheit - 32); }1
2
3
[/code]
6、对象规则
(1)将左花括号与类名放在同一行。
(2)冒号与属性值间有个空格。
(3)字符串使用双引号,数字不需要。
(4)最后一个属性-值对后面不要添加逗号。
(5)将右花括号独立放在一行,并以分号作为结束符号。
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };1
2
3
4
5
6
[/code]
(6)短的对象代码可以直接写成一行。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};1
[/code]
7、每行代码字符小于80
(1)为了便于阅读每行字符建议小于数80个。
(2)如果一个javaScript语句超过了80个字符,建议在运算符或者逗号后换行。
document.getElementById("demo").innerHTML = "Hello Runoob.";1
2
[/code]
8、命名规则
(1)一般很多代码语言的命名规则都是类似的。
①变量和函数为驼峰法。(camelCase)
②全局变量为大写(UPPERCASE)
③变量(如PI)为大写(UPPERCASE)
(2)html和css的横杠(-)字符
①css使用-来连接属性名(font-size)。
②-通常在javaScript被认为是减法,所以不允许使用。
(3)下划线。
①SQL数据库。
②php语言通常都使用下划线。
(4)帕斯卡拼写法(PascalCase)。
①单字之间不以空格断开或连接号(-),底线(_)连接,第一个单字首字母采用大写字母,后续单字的首字母亦用大写字母。
②帕斯卡命名法也称为“大驼峰式命名法”。
③帕斯卡拼写法(PascalCase)在C语言中运用较多。
js函数
二十五、javaScript函数定义
1、函数声明后不会立即执行,会在我们需要的时候调用到。
2、分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句,所以不以分号结束。
3、匿名函数:
var x = function (a, b) {return a * b}; var z = x(4, 3);1
2
[/code]
匿名函数,函数存储在变量中,不需要函数名称,通常通过变量名来调用。
4、函数定义的3种方式:
(1)函数声明:
function myFunction(a, b) { return a * b; }1
2
3
[/code]
(2)函数表达式:
var x = function (a, b) {return a * b};1
[/code]
(3)Function()构造函数
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc(4, 3);1
2
3
[/code]
也可以写成:
var myFunction = function (a, b) {return a * b} var x = myFunction(4, 3);1
2
3
[/code]
注意:在 JavaScript 中,很多时候,你需要避免使用 new 关键字。
5、(1)函数可以通过声明定义,也可以是一个表达式。
(2)函数可以作为一个值使用,也可以作为一个表达式使用。
①值:
function myFunction(a, b) { return a * b; }1
var x = myFunction(4, 3);
2
3
4
5
[/code]
②表达式:
function myFunction(a, b) { return a * b; }1
var x = myFunction(4, 3) * 2;
2
3
4
5
[/code]
6、提升(Hoisting)
(1)提升是 JavaScript 默认将当前作用域提升到前面去的的行为。
(2)提升(Hoisting)应用在变量的声明与函数的声明。
(3)表达式定义函数时无法提升。
7、自调用函数
(1)函数表达式可以 “自调用”。
(2)自调用表达式会自动调用。
(3)如果表达式后面紧跟 () ,则会自动调用。
(4)不能自调用声明的函数。
(5)通过添加括号,来说明它是一个函数表达式。
(6) 匿名自我调用的函数:
(function () { var x = "Hello!!"; // 我将调用自己 })();1
2
3
[/code]
8、函数是对象
(1)arguments.length 属性返回函数调用过程接收到的参数个数
function myFunction(a, b) { return arguments.length; }1
2
3
[/code]
(2)toString() 方法将函数作为一个字符串返回:
function myFunction(a, b) { return a * b; }1
var txt = myFunction.toString();
2
3
4
5
[/code]
9、函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。
二十六、javaScript函数参数
1、显式参数(Parameters)与隐式参数(Arguments)
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。
2、默认参数
如果函数在调用时未提供隐式参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值:
function myFunction(x, y) { y = y || 0;//如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。 }1
2
3
[/code]
3、arguments对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
4、传递参数的2种途径:
(1)通过值传递参数
①在函数中调用的参数是函数的隐式参数。
②JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。
③如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。
④隐式参数的改变在函数外是不可见的。
(2)通过对象传递参数
①在JavaScript中,可以引用对象的值。
②因此我们在函数内部修改对象的属性就会修改其初始的值。
③修改对象属性可作用于函数外部(全局变量)。
④修改对象属性在函数外是可见的。
二十七、javaScript函数调用
1、javaScript4种调用方式:作为函数调用、作为方法调用、使用构造函数调用函数、作为函数方法调用函数。
每种方式的不同方式在于 this 的初始化。
2、this
一般而言,在Javascript中,this指向函数执行时的当前对象。
3、
function myFunction(a, b) { return a * b; }1
window.myFunction(10, 2); //window.myFunction(10, 2) 返回 20
2
3
4
[/code]
这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。
4、全局对象
(1)当函数没有被自身的对象调用时, this 的值就会变成全局对象。
(2)在 web 浏览器中全局对象是浏览器窗口(window 对象)。
(3)函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。
5、函数作为方法调用
var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 返回 "John Doe"1
2
3
4
5
6
7
8
[/code]
函数作为对象方法调用,会使得 this 的值成为对象本身。
6、使用构造函数调用函数
(1)如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象。
(2)构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
(3)构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
7、作为函数方法调用函数
(1)在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
(2)call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
(3)
function myFunction(a, b) { return a * b; }1
myObject = myFunction.call(myObject, 10, 2); // 返回 20
2
3
4
[/code]
function myFunction(a, b) { return a * b; }1
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray); // 返回 20
2
3
4
5
[/code]
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
二十八、javaScript闭包
1、JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
2、变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。
3、全局和局部变量即便名称相同,它们也是两个不同的变量。修改其中一个,不会影响另一个的值。
4、(1)闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add(); // 计数器为 31
2
3
4
5
6
7
8
[/code]
①add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
②这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
③计数器受匿名函数的作用域保护,只能通过 add 方法修改。
(2)闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。
或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。
js html dom
二十九、dom简介
三十、dom html
1、改变html元素的属性:
document.getElementById(id).attribute=新属性值
document.getElementById("image").src="landscape.jpg";1
[/code]
三十一、dom css
document.getElementById(id).style.property=新样式
document.getElementById("p2").style.color="blue";1
[/code]
三十二、dom事件
1、onload 和 onunload 事件
onload 和 onunload 事件可用于处理 cookie。
2、onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
三十三、dom EventListener
1、addEventListener()
(
265fc
1)addEventListener() 方法用于向指定元素添加事件句柄。
(2)addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
(3)你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
(4)addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
(5)当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
(6)可以使用 removeEventListener() 方法来移除事件的监听。
2、语法
element.addEventListener(event, function, useCapture);1
[/code]
(1)第一个参数是事件的类型 (如 “click” 或 “mousedown”).
(2)第二个参数是事件触发后调用的函数。
(3)第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
3、当用户重置窗口大小时添加事件监听:
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext; });1
2
3
[/code]
4、事件冒泡或事件捕获
(1)事件传递有两种方式:冒泡与捕获。
(2)事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素中,用户点击
元素, 哪个元素的 “click” 事件先被触发呢?
(3)在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:
元素的点击事件先触发,然后会触发
元素的点击事件。
(4)在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:
元素的点击事件先触发 ,然后再触发
元素的点击事件。
(5)addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:
(6)addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
5、(1) IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function); element.detachEvent(event, function);1
2
[/code]
(2)跨浏览器解决办法:
var x = document.getElementById("myBtn"); if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本 x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早版本 x.attachEvent("onclick", myFunction); }1
2
3
4
5
6
[/code]
三十四、dom元素
1、
var para=document.createElement("p");
2、
var node=document.createTextNode("这是一个新段落。");
3、
para.appendChild(node);
4、
parent.removeChild(child);
5、
child.parentNode.removeChild(child);
js高级教程
三十五、javaScript对象
1、javaScript中的所有事物都是对象:字符串、数值、数组、函数…
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
2、对象的属性和方法:
(1)访问对象属性的语法是:
objectName.propertyName1
[/code]
(2)方法是能够在对象上执行的动作。
可以通过以下语法来调用方法:
objectName.methodName()1
[/code]
3、创建对象的2种方法:
(1)定义并创建对象的实例
person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue";1
2
3
4
5
[/code]
(2)使用函数来定义对象,然后创建新的对象实例
//使用对象构造器 function person(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } var myFather=new person("John","Doe",50,"blue"); var myMother=new person("Sally","Rally",48,"green");1
2
3
4
5
6
7
8
9
[/code]
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
4、JavaScript 是面向对象的语言,但 JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
JavaScript 基于 prototype,而不是基于类的。
5、JavaScript for…in 语句循环遍历对象的属性。
for (variable in object){ 执行的代码…… }1
2
3
[/code]
for…in 循环中的代码块将针对每个属性执行一次。
三十六、javaScript Number对象
1、JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。
2、javaScript中,所有的数字都是由 浮点型类型。
3、精度
(1)整数(不使用小数点或指数计数法)最多为 15 位。
var x = 999999999999999; // x 为 999999999999999 var y = 9999999999999999; // y 为 100000000000000001
2
[/code]
(2)小数的最大位数是 17,但是浮点运算并不总是 100% 准确:
var x = 0.2+0.1; // 输出结果为 0.300000000000000041
[/code]
4、八进制和十六进制
(1)如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 “x”,则解释为十六进制数。
var y = 0377; var z = 0xFF; document.write(y + "<br>");//255 document.write(z + "<br>");//2551
2
3
4
[/code]
绝不要在数字前面写零,除非您需要进行八进制转换。
(2)默认情况下,JavaScript 数字为十进制显示。
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
var myNumber=128; myNumber.toString(16); // 返回 80 myNumber.toString(8); // 返回 200 myNumber.toString(2); // 返回 100000001
2
3
4
[/code]
5、无穷大(infinity)
无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。
6、NaN
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
var x = 1000 / "Apple"; isNaN(x); // 返回 true var y = 100 / "1000"; isNaN(y); // 返回 false1
2
3
4
[/code]
7、数字属性
属性 | 备注 |
---|---|
MAX_VALUE | 最大值 |
MIN_VALUE | |
NEGATIVE_INFINITY | |
POSITIVE_INFINITY | |
NaN | |
prototype | |
constructor |
方法 | 备注 |
---|---|
toExponential() | |
toFixed() | |
toPrecision() | |
toString() | |
valueOf() |
三十八、javaScript日期
1、4种初始化日期方式:
new Date() // 当前日期和时间 new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数 new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds)1
2
3
4
[/code]
上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。
2、设置日期
将日期对象设置为 5 天后的日期:
var myDate=new Date(); myDate.setDate(myDate.getDate()+5);1
2
[/code]
注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
三十九、javaScript 数组
1、可以在一个数组中包含对象元素、函数、数组。
myArray[0]=Date.now; myArray[1]=myFunction; myArray[2]=myCars;1
2
3
[/code]
2、
var y=myCars.indexOf("Volvo");// "Volvo" 值的索引值
四十、javaScript Boolean
1、定义一个名为 myBoolean 的布尔对象:
var myBoolean=new Boolean();1
[/code]
2、如果布尔对象无初始值或者其值为:
0、-0、null、”“、false、undefined、NaN
那么对象的值为 false。
否则,其值为true。(即使是字符串“false”)
四十一、javaScript Match
1、JavaScript 提供 8 种可被 Math 对象访问的算数值:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
2、算术方法。
方法名 | 备注 |
---|---|
round() | 对一个数进行四舍五入。 |
random() | 返回一个介于 0 和 1 之间的随机数。(0<=x<1) |
floor() | |
ceil() |
1、正则表达式(regular expression)
2、语法:
(1)var patt=new RegExp(pattern, modifiers);//modifiers修饰符:是否全局,是否大小写。
(2)var patt=/pattern/modifiers;
JS浏览器BOM
四十三、javaScript window
1、浏览器对象模型BOM(Browser Object Model)
2、document也是window对象的属性之一。
3、window尺寸。
(1)对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
(2)对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者:
document.body.clientHeight
document.body.clientWidth
//所有浏览器窗口的宽度和高度(不包括工具栏/滚动条) var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;1
2
3
4
5
6
7
8
[/code]
4、其他window方法
(1)window.open()-打开新窗口
(2)window.close()-关闭当前窗口
(3)window.moveTo()-移动当前窗口
(4)window.resizeTo()-调整当前窗口的尺寸
四十四、javaScript window screen
1、window.screen对象包含有关用户屏幕的信息。
2、screen.availWidth - 可用的屏幕宽度。以像素计,减去界面特征,比如窗口任务栏。
screen.availHeight -可用的屏幕宽度
四十五、javascript window location
1、window.location对象用于获得当前页面的地址(url),并把浏览器重定向到新的页面。
方法名 | 作用 | example |
---|---|---|
location.hostname | 返回web主机的域名。 | |
location.pathname | 返回当前页面的路径和文件名。 | |
location.port | 返回web主机的端口(80或443)。 | |
location.protocol | 返回所使用的web协议(http://或https://)。 | |
location.href | 返回当前页面的url | http://www.runoob.com/js/js-window-location.html |
location.pathname | 返回url的路径名 | /js/js-window-location.html |
location.assign() | 加载新的文档 |
1、windwo.history对象包含浏览器的历史
方法名 | 备注 |
---|---|
history.back() | 加载历史列表的前一个url.与在浏览器点击后退按钮相同 |
history.forward() | 与在浏览器中点击按钮向前相同 |
1、
对象名 | 备注 |
---|---|
window.navigator | 包含有感访问者浏览器的信息 |
navigator.appCodeName | 浏览器代号 |
navigator.appName | 浏览器名称 |
navigator.appVersion | 浏览器版本 |
navigator.cookieEnabled | 启用Cookie |
navigator.platform | 硬件平台 |
navigator.userAgent | 用户代理 |
navigator.systemLanguage | 用户代理语言 |
(1)navigator数据可被浏览器使用者更改。
(2)一些浏览器对测试站点会识别错误。
(3)浏览器无法报告晚于浏览器发布的新操作系统。
3、只有opera属性支持window.opera,可以由此识别出opera
if (window.opera) {...some action...}1
[/code]
四十八、javascript弹窗
1、可以在javascript中创建三种消息框:警告框,确认框,提示框。
2、警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
3、确认框
确认框通常用于验证是否接受用户操作。
当确认框弹出时,用户可以点击“确认”或者“取消”来确定用户操作。
当你点击“确认”,确认框返回true,如果点击“取消”,确认框返回false。
4、提示框
提示框通常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为null。
5、换行。
弹窗使用反斜杠(\n)来设置换行。
四十九、 计时事件
1、setInterval()-间隔指定的毫秒数不停地执行指定的代码。
2、setTimeout()-暂停指定的毫秒数后执行指定的代码。
3、clearInterval()
要使用clearInterval()方法,在创建计时方法时你必须使用全局变量。
myVar=setInterval("javascript function",milliseconds); function myStopFunction(){ clearInterval(myVar); }1
2
3
4
[/code]
4、clearTimeout()
要使用clearTimeout()方法,你必须在创建超时方法中(setTimeout)使用全局变量。
如果函数还未执行,你可以使用clearTimeout()方法来停止执行函数代码。
var myVar; function myFunction(){ myVar=setTimeout(function(){alert("hello")},3000); } function myStopFunction(){ clearTimeout(myVar); }1
2
3
4
5
6
7
[/code]
五十、JavaScript cookie
1、cookie是一些数据,存储在你电脑上的文本文件中。
2、cookie的作用就是用于解决“如何记录客户端的用户信息”:
(1)当用户访问web页面时,他的名字可以记录在cookie中。
(2)在用户下一次访问该页面时,可以在cookie中读取用户访问记录。
3、cookie以名/值对形式存储,如下所示:
username=John Doe
4、1)创建cookie
(1)创建cookie
document.cookie="username=John Doe";1
[/code]
(2)可以为cookie添加一个过期时间(以UTC或GMT时间)。默认情况下,cookie在浏览器关闭时删除:
document.cookie="username=John Doe;expires=Thu, 18 Dec 2013 12:00:00 GMT";1
[/code]
(3)可以使用path参数告诉浏览器cookie的路径。默认情况下,cookie属于当前页面。
document.cookie="username=John Doe;expires=Thu,18 Dec 2013 12:00:00 GMT;path=/"1
[/code]
2)读取cookie
var x=document.cookie;1
[/code]
3)使用js修改cookie
在js中,修改cookie类似于创建cookie,如下:
document.cookie="usrname=John Smith;expires=Thu,18 Dec 2013 12:00:00 GMT;path=/"1
[/code]
旧的cookie将被覆盖。
4)js删除cookie
删除cookie非常简单。您值需要设置expires参数为以前的时间即可。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";1
[/code]
注意,当你删除时不必指定cookie的值。
5、cookie字符串
document.cookie属性看起来像一根普通的文本字符串,其实它不是。
6、(1)设置cookie值的函数:
function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }1
2
3
4
5
6
7
[/code]
(2)获取cookie值的函数
function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; }1
2
3
4
5
6
7
8
9
10
11
[/code]
(3)检测cookie值的函数:
function checkCookie() { var username=getCookie("username"); if (username!="") { alert("Welcome again " + username); } else { username = prompt("Please enter your name:",""); if (username!="" && username!=null) { setCookie("username",username,365); } } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[/code]
js库
五十一、javaScript测试jQuery
1、jQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
2、jQuery 对象拥有的属性和方法,与 DOM 对象的不同。
3、不能在 jQuery 对象上使用 HTML DOM 的属性和方法。
4、jQuery允许链接(链式语法)。
链接(chaining)是一种在同一对象上执行多个任务的便捷方法。
五十二、javaScript测试prototype
function myFunction(){ $("h01").insert("Hello Prototype!");} Event.observe(window,"load",myFunction);1
2
3
[/code]
1、event.observe()接受三个参数:
(1)您希望处理的html dom或bom对象。
(2)您希望处理的事件。
(3)您希望调用的函数。
js实例
五十三、javaScript实例
1、创建对象的实例
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"} document.write(person.firstname + " is " + person.age + " years old."1
2
[/code]
2、创建用于对象的模板
function person(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } myFather=new person("John","Doe",50,"blue"); document.write(myFather.firstname + " is " + myFather.age + " years old.");1
2
3
4
5
6
7
8
[/code]
五十四、javaScript对象实例
1、
相关文章推荐
- JavaScript菜鸟教程笔记
- JavaScript基础教程笔记
- JavaScript教程&笔记
- Javascript:Javascript教程,javascript入门,学习笔记
- 【JavaScript】我的第5个例子-菜鸟教程
- XML复习笔记(复习资料为菜鸟教程里的XML教程)
- DTD复习笔记(复习资料为菜鸟教程里的DTD教程)
- [Javascript]菜鸟的Dojo学习笔记1
- CentOS笔记-目录结构(转载了菜鸟教程里的)
- 学习笔记之C# 教程 | 菜鸟教程
- 菜鸟教程Python基础语法学习笔记
- Python入门----语句(菜鸟教程的学习笔记)
- <<Javascript基础教程学习(第8版)>>第4章 学习笔记 ---处理图像
- 菜鸟的javascript学习笔记
- AngularJs学习笔记——摘自菜鸟教程
- 【javascript】 array.reduce 菜鸟学习笔记
- JavaScript基础学习笔记(菜鸟必看篇)
- 菜鸟腾飞安全网之精通vmware虚拟机系列教程(12课全)听课笔记
- Javascript教程,javascript入门,学习笔记,Javascript Tutorials
- JavaScript菜鸟教程Object1