Js的编写
<script></script>
控制浏览器弹出一个警告框
alert(“”);
让计算机在页面输出一个内容
document.write()可以向body中输出一个内容
向控制台输出一个内容
console.log();
Js的基本语法
多行注释/**/
单行注释//
单行注释:CTRL+/ 多行注释:ALT+SHIFT+A
- js中严格区分大小写
- js中每一条语句以分号(;)结尾
- js中会忽略多个空格和换行,所以我们可以利用空格和换行进行格式化
字面量和变量
字面量,都是一些不可改变的值
如:1,2,3,4,5
变量 变量可以用来保存字面量,而且在开发中都是通过变量去保存一个字面量
声明变量
在js中使用var关键字来声明一个变量
标识符
在js中所有的可以由我们自主命名的都可以称为时标识符
例如:变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下规则:
- 标识符中可以含有字母、数字、-、¥
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或保留名
- 标识符一般都采用驼峰命名法
首字母小写,每个单词的开头字母大写,其余字母小写
Js底层保存标识符时实际上是采用的Unicode编码(UTF-8)
数据类型指的就是字面量的类型
在js中一共有六种数据类型
String 字符串 Number 数值 Boolean 布尔值
Null空值 Undefined 未定义 Object 对象
在字符串中我们可以使用\作为转义字符
当表示一些特殊符号时可以使用\进行转义
可以使用一共运算符Typeof来检查一共变量的类型
语法:typeof 变量
Js中可以表示的数字的最大值Number.MAX_VALUE
Infinity 表示正无穷
-Infinity表示负无穷
使用typeof检查Infinity也会返回Number
Null表示空值
Undefine表示未定义,表示声明了,但是并没有赋值
强制类型转换
-指将一个数据类型强制转换为其他的数据类型
-类型转换主要指,将其他的数据类型,转换为String Number Boolean
方法一:
-调用被转换数据类型的toString()方法
-该方法不会影响到原变量,它会将转换的结果返回
-但是注意:null和undefined这两个值没有toString方法
如果调用他们的方法,会报错
a.toString()
方法二:
-调用String()函数,并将被转换的数值作为参数传入
转换方式一:
将其他的数据类型转换为Number
- 如果时纯数字的字符串,则直接将其转换为数字
- 如果字符串中又非数字的内容,则转换为NaN
- 如果字符串时一个空串或者是一个全是空格的字符串,则转换为0
- True转成1 false转成0
- Null转成0
- Undefined转数字NaN
转换方式二:
这种方式专门用来对付字符串
调用parseInt()函数将a转换为Number
parseInt()可以将一个字符串中的有效的整数内容取出来,然后转换为Number
parseFloat()作用和pareInt()类似,不同的是它可以获得有效的小数
如果对非String使用parseInt()或pareFloat(),它会将其转换为String然后再操作
Number()强制类型转换成数字
parseInt()把一个字符串转换为一个整数
parseFloat()把一个字符串转换为浮点型
其他的进制的数字
可以再parseInt()中传递一个第二个参数,来指定数字的进制
在Js中,如果需要表示16进制的数字,则需要以0x开头
如果要表示8进制的数字,则需要以0开头
如果要表示2进制的数字,则需要以0b开头
但是不是所有的浏览器都支持
将其他的数据类型转换为Boolean
使用Boolean()函数(除了0、NaN、空串、null、undefined,其余的都是ture)
运算符也叫操作符
通过运算符可以对一个或者多个值进行运算
比如:typeof就是运算符,可以获得一个值的类型
它会将该值的类型以字符串的形式返回
算数运算符
+加法运算符-减法运算符*乘法运算符/除法运算符 %取模运算符
当对非Number类型的值进行运算,会将这些值转换为Number然后再运算
任何值和NaN做运算都为NaN
如果对两个字符串进行加法运算,则会做拼串
任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
任何值和字符串相加都会转换为字符串,并做拼串操作
我们可以利用这一特点,来将一个任意的数据类型转换为String
我们只需要为任意的数据类型下+一个“”即可将其转换为String
这是一种隐形的类型转换,由浏览器自动完成,实际上它也是调用String
任何值做-*/运算时都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
一元运算符,只需呀要一个操作数
+正号,正号不会对数字产生任何影响
-负号,负号可以对数字进行负号的取反
对于非Number类型的值
它会将先转换为Number,然后再运算
可以对一个其他的数据类型使用正号,将其转换为number
它的原理和Number()函数一样
自增++
通过自增可以使变量再自身的基础上增加1
对于一个变量自增以后,原变量的值会立即自增1
自增分成两种:后++(a++) 和去前++(++a)
无论是a++ 还是++a,都会立即使原变量的值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量的新值(自增后的值)
对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值
与运算:如果两个值都为true,则返回后面的
如果两个值中有false,则返回靠前的flase
或运算:如果两个值都为true,则返回前面的
如果两个值中有false,则返回第二个值
赋值运算符:
=可以将符合右侧的值赋值给符合左侧的变量
任何值和NaN作比较都是false
在字符串中使用转义字符输入Unicode编码 \u四位编码
在网页中使用Unicode编码 &#编码;这里的编码需要的是十进制
Promt()可以弹出一个提示框,该提示框中有一个文本框
用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数
该字符串将会作为提示框的提示文字
用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容
Switch(表达式{
Case表达式:
语句….
Break;
Case表达式:
语句….
Break;
Default:
语句
Break;
)
循环语句
通过循环语句可以反复的执行一段代码多次
While循环
-语法:
While(条件表达式){
语句…
}
-while语句在执行时,
先对条件表达式进行求值判断,
如果值为ture,则执行循环体,
循环体执行完毕后,继续对表达式进行判断
如果为true,则继续执行循环体,以此类推
如果值为false,则终止循环
Do…while循环
-语法:
Do{
语句…
}while()
先执行后判断
For循环
For(初始化表达式;条件表达式;更新表达式){
}
Console.time()
Console.timeend()
基本数据类型:string、number、boolean、Null、undefined
引用数据类型:object
Object值为指向的地址
Var obj2={name:” ”,
Age:” ”};
函数function
创建一个函数对象
Var fun=new Function()
封装到函数中的代码不会立即执行
函数中的代码会在函数调用的时候执行
调用函数 语法:函数对象()
Fun();
函数声明
Function 函数名([形参1,形参2….形参N])
Function fun(){
}
Function sum(a,b){ //形参
Console.log(a+b)
}
Sum(1,2)//实参
立即执行函数
(function(){
Alert(“我是一个匿名函数”)
})();
枚举对象中的属性
语法:
For(var n in obj){
console.log(n);
}
变量的声明提前
使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
但是如果声明变量时不适应var关键词,则变量不会被声明提前
函数的声明提前
函数声明会被提前,函数表达式不会被提前
函数作用域
在全局作用域中无法访问到函数作用的变量
在函数作用域中可以访问到全局作用域的变量
隐函的参数就是this,this指向的是一个对象
根据函数的调用方式的不同,this会指向不同的对象
以函数的形式调用时,this永远都是window
以方法的形式调用时,this就是调用方法的那个对象
工厂方法创建对象
Function createperson(name,age,gender){
Var obj = new object();
Obj.name=name;
Obj.age=age;
Obj.gender=gender;
Obj.sayName=function(){
Alert(this.name);
};
Return obj;
}
使用工厂方法创建的对象,使用的构造函数都是Objcet
所以创建的对象都是Object这个类型
就会导致我们无法区分出多种不同类型的对象
创建一个构造函数,专门用来创建Person对象
构造函数就是一个普通的函数,创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用,构造函数需要使用new关键字来调用
构造函数的执行流程:
1立刻创建一个新的对象
2将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3逐行执行函数中的代码
4将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象,称为是该类的实例
Function Person(){}
Var per=new Person();
使用instancof可以检查好一个对象是否是一个类的实例
语法:
对象instanceof 构造函数
This的情况:
- 当以函数的形式调用时,this是window
- 当以方法的形式调用时,谁调用方法this就是谁
- 当以构造函数的形式调用时,this就是新创建的那个对象
原型prototype
如果作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐函的属性
执行该构造函数的原型对象,我们可以通过_proto_来访问该属性
原型对象就相当于一个公共的区域,所以同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容,同意设置到原型对象中
当我们访问对象的一个属性和方法时,它会先在对象自身中寻找,如果有则直接使用,
如果没有则会去原型对象中寻找,如果找到则直接使用
使用in检查对象中是否有某个属性时,如果对象中没有原型中有,也会返回true
可以使用对象的hasOwnPrototype()来检查对象中是否含有该属性
原型对象也是对象,所以它也有原型
当我么使用一个对象的属性和方法时,会在自身中寻找
如果没有则去原型对象中寻找,如果原型对象中有,则使用
如果没有则去原型的原型中寻找
原型的原型
.__proto__.__proto__
当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
垃圾回收(GC)
垃圾积攒过多以后,会导致程序运行的速度过慢
当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象
此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢
所以这种垃圾必须进行清理
在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁
我们不需要也不能进行垃圾回收的操作
我们需要做的只是要将不再使用的对象设置null即可
数组(Array)
数组也是一个对象
它和我们普通对象功能类似,也是用来存储一些值
不同的是普通对象时使用字符串作为属性名的
而数组是使用数字来作为索引操作元素
索引:
从0开始的整数就是索引
数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
创建数组对象
Var arr= new Array();
向数组中添加元素
语法:数组[索引]=值
获取数组的长度
语法:数组.length
对于连续的数组,使用length可以获取到数组的长度(元素的个数)
对于非连续的数组,使用length会获取到数组的最大的索引+1
修改length
如果修改的length大于原长度,则多出部分会空出来
如果修改的length小于原长度,则多出部分会被删除
向数组最后一个位置添加元素
语法:数组[数组.length]=值
使用字面量来创建数组
语法:[]
使用字面量创建数组时,可以在创建时就指定数组中的元素
使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递
元素直接使用,隔开
数组中的元素可以是任意的数据类型,也可以是对象,也可以是一个函数,数组中也可以放数组
数组的方法
Push()该方法可以向数组的末尾添加一个或多个元素,并返回数组的新长度
Pop()该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
Unshift()向数组开头添加一个或多个元素,并返回新的数组长度
Shift()可以删除数组的第一个元素,并将被删除的元素作为返回值返回
一般我们都是使用for循环去遍历数组
JS中还为我们提供了一个方法,用来遍历数组
forEach()
这个方法只支持IE8以上的浏览器
forEach()方法需要一个函数作为参数
像这种函数,由我们创建但是不由我们调用,我们称为回调函数
数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,我们可以来定义形参,来读取这些内容
浏览器会在回调函数中传递三个参数:
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正再遍历的元素索引
第三个参数,就是正在遍历的数组
这个方法只支持IE8以上的浏览器
IE8以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach,还是使用For循环来遍历
arr.forEach(function(){})
slice()方法可以用来从数组提取指定元素
该方法不会改变元素数组,而是将截取到的元素封装到一个型数组中返回
参数:
- 截取开始的位置的索引,包含开启索引
- 截取结束的位置的索引,不包含结束索引
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个负值,如果传递一个负值,则从后往前计算
Splice()可以用于删除数组中的指定元素
使用splice()会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
参数:
第一个,表示开始位置的索引
第二个,表示删除的数量
第三个及以后,可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
Concat()可以连接两个或多个数组,并将新的数组返回
该方法不会对原数组产生影响
Join()该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
Reverse()该方法用来反转数组
该方法会直接修改原数组
Sort()可以用来对数组中的元素进行排序
也会影响原数组,默认会按照Unicode编码进行排序
即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序
所以对数字记性排序时,可能会得到错误的结果
我们可以自己来指定排序的规则
回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的位置
如果返回一个大于0的值,则元素会交换位置
如果返回一个小于0的值,则元素位置不变
果返回一个0,则认为两个元素相等,也不交换位置
如果需要升序排列,则返回a-b
如果需要降序排序,则返回b-a
Call()和apply()这两个方法都是函数对象的方法,需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
Call()方法可以将实参在对象之后一次传递
Apply()方法需要将实参封装到一个数组中统一传递
This的情况:
- 以函数形式调用时,this永远都是window
- 以方法的形式调用时,this是调用方法的对象
- 以构造函数的形式地调用时,this是新创建的那个对象
- 使用call和apply调用时,this是指定的那个对象
在调用函数时,浏览器每次都会传递两个隐含的参数:
- 函数的上下文对象this
- 封装实参的对象arguments
Arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
在调用函数时,我们所传递的实参都会在argements中保存
Arguments.length可以用来获取实参的长度
我们即使不定义形参,也可以通过arguments来使用实参,只不过比较麻烦
Arguments[0]表示第一个实参
它里面有一个属性叫做callee
这个属性对应一个函数对象,就是当前正在指向的函数的对象
Date对象在js中使用Date对象来表示一个时间
如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
创建一个指定的时间对象
需要构造函数中传递一个表示时间的字符串作为参数
日期的格式 月份/日/年 时:分:秒
getDate()获取当前对象是几日
getDay()获取当前对象是周几,会返回0-6的值
getMonth()获取当前时间对象的月份,会返回0-11的值,0表示1月
getFullYear()获取当前日期对象的年份
getTime()获取当前日期对象的时间戳,时间戳指的是格林威治标准时间的1970年1月1日,0时0分0秒
到当前日期所花费的毫秒数 1秒=1000毫秒,计算机底层在保存时间时都是时间戳
利用时间戳来测试代码的执行的性能,获取当前的时间戳
Math和其他的对象不同,他不是一个构造函数
它属于一个工具类不用创建对象,它里面封装了数学运算的属性和方法
比如:Math.PI表示的圆周率
Abs()可以用来计算一个数的绝对值
Ceil(x)可以对一个数进行向上取整
Floor(x)可以对一个数进行向下取整,小数部分会被舍掉
Round(x)可以对一个数四舍五入取整
Random()可以生成一个0-1之间的随机数
生成一个0-x之间的随机数
Math.round(Math.random*x)
生成一个x-y之间的随机数
Math.round(Math.random*(y-x)+x)
Max()可以获取多个数中的最大值
Min()可以获取多个数中的最小值
Pow(x,y)返回x的y次幂
Sqrt()用于对一个数进行开方运算
在JS中为我们提供了三个包装类,通过三个包装类可以将基本数据类型的数据转换为对象
String()可以将基本数据类型字符串转换为String对象
Number()可以将基本数据类型字符串转换为Number对象
Boolean()可以将基本数据类型字符串转换为Boolean对象
对象比较地址,基本数据类型比较数
但是注意:我们在实际应用中不会使用基本数据类型的对象
如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预计的结果
方法和属性能添加给对象,不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时,
浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法
调用完以后,在将其转换为基本数据类型
在底层字符串是以字符数组的形式保存的
charAt()可以返回字符串指定位置的字符
charCodeAt()获取指定位置字符的字符编码(Unicode编码)
formCharCode()可以根据字符编码去获取字符
concat()可以用来连接两个或多个字符串,作用和+一样
indexof()该方法可以检索一个字符串中是否含有指定内容
如果字符串中含有该内容,则会返回其第一次出现的索引
如果没有找到指定的内容,则返回-1
可以指定一个第二个参数,指定开始查找的位置
LastIndexOf()该方法的用法和indexof()一样,但是lastindexof是从后往前找
Slice()可以从字符串中截取指定的内容,不会影响源字符串,而是将截取的内容返回
参数:第一个,开始位置索引(包括开始位置)
第二个,结束位置索引(不包括结束位置)
如果省略第二个参数,则会截取带后边所有的
也可以传递一个负数作为参数,负数的话将会从后边计算
Substring()可以用来截取一个字符串,与slice()类似
不同的是这个方法不能接受负值作为参数,如果传递一个负值,则默认使用0
而且他会自动调整参数的位置,如果第二个参数小于第一个,则会自动交换
Substr()用来截取字符串
参数:1.截取开始位置 2.截取的长度
Split()可以将一个字符串拆分成一个数组
参数:需要一个字符串作为参数,将会根据该字符串去拆分数组
如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素
Touppercase()将一个字符串转换为大写并返回
ToLowerCase()将一个字符串转换为小写并返回
正则表达式
正则表达式可用于定义一些字符串的规则
计算机可以根据正则表达式,来检查一个字符串是否符合规则
获取将字符串中符合规则的内容提取出来
语法:
Var 变量 =new RegExp(“正则表达式”,“匹配规则”)
正则表达式的方法:
Test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true,否则返回false
在构造函数中可以传递一个匹配模式作为第二个参数
可以是:I 忽略大小写 g 匹配全局变量
使用字面量创建正则表达式
语法: var 变量 = /正则表达式/匹配模式
创建一个正则表达式,检查一个字符串中是否有a或b
Reg=/a|b/ 使用|表示或者的意思
创建一个正则表达式检查一个字符串中是否有字母
Reg=/[ab]/ []里的内容也是或的关系
Reg=/[a-z]/任意小写字母
Reg=/[A-Z]/任意大写字母
Reg=/[A-z]/或者reg=/[a-z]/I 任意字母
Reg=/a[bde]c/ 检查一个字符串中是否含有abc或adc或aec
[^]除了
Reg=/[^ab]/
Reg=[0-9]任意数字
字符串和正则相关的方法
Split()可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串,这个方法即使不指定全局匹配,也会全都拆分
Var result = str.split(/[A-z]/) 根据任意字符将字符串拆分
Search()可以搜索字符串中是否含有指定内容
如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串
Search()只会查找第一个,即使设置全局匹配也没用(无效)
Match()可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的要求,找到以后就停止检索
我们可以设置正则表达式为全局匹配模式,这样就会匹配到所以的内容
可以为一个正则表达式设置多个匹配模式,且顺序无所谓
Match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
Replace()可以将字符串中指定内容替换为新的内容
参数:1.被替换的内容,可以接受一个正则表达式作为参数 2.新的内容
默认只会替换第一个
Result = str.replay(/[a-z]/gi,”@-@”) “”->替换为空串
量词 通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用
{n}正好出现n次
{m,n}出现m-n次
{m,}m次以上
+至少一个,相当于{1,}
* 0个或多个,相当于{0,}
?0个或一个,相当于{0,1}
^表示开头/^a/
$表示结尾/a$/
如果在一个正则表达式中同时使用^$则要求字符串必须完全符合正则表达式
/^a|a$/以a开头或者以a结尾
.表示任意字符,在正则表达式中使用\作为转义字符 \.来表示. \\表示\
注意:使用构造函数时,由于它的参数是一个字符串,而\是一个自付出中转移字符
如果要使用\则需要使用\\来代替
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
去除开头空格str=str.replace(/^\s*/,””)
去除结尾空格str=str.replace(/\s*$/,””)
去除开头和结尾的空格str=str.replace(/^\s*|\s*$/g,””)
邮件的正则表达式
规则:任意字母数字下划线 .任意字母数字下划线@ 任意字母数字 .任意字母(2-5位).任意字母(2-5位)
Var emailReg =/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/
DOM Document Object Model文档对象模型
JS通过DOM来对HTML文档进行操作。只要理解DOM就可以随心所欲的操作WEB页面
文档 表示的就是整个HTML网页文档
对象 表示将网页中的每一个部分都转换为一个对象
模型 使用模型来表示对象之间的关系
节点Node 构成网页中最基本的部分,网页中的每一个部分都可以称为一个节点
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容
浏览器已经为我们提供文档节点对象,这个对象是window属性
可以在页面中直接使用,文档节点代表的是整个网页
Document.getElementById
事件,就是用户和浏览器直接交互行为
如:点击按钮,鼠标移动,关闭窗口……
我们可以在事件对应的属性中设置一些JS代码,这样当事件被触发时,这些代码将会执行
Document.querySelector()需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点
该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
Document.querySelectorAll()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
InssertBefore()可以在指定的子节点前插入新的子节点
语法:父节点.insertBefore(新节点,旧节点);
replaceChild()可以使用指定的子节点替换已有的子节点
语法:父节点.replaceChild(新节点,旧节点);
RemovChild() 可以删除一个子节点
语法:父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
通过js修改元素的样式
语法:元素.style.样式名=样式值
注意:如果CSS的样式名中含有-
这种名称在js中是不合法的
需要将这种样式名修改为驼峰命名法
去掉-,然后将-后的字母大写
currentStyle获取元素当前显示的样式
语法:元素.currentStyle.样式名
currentStyle只有IE浏览器支持
在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用
需要两个参数:
第一个:获取样式的的元素 第二个:可以传递一个伪元素,一般传null
Var obj=getComputedStyle(box1,null); alert(getComputedStyle(box1,null).width)
Onscroll当滚动条滚动到底时使表单项可用
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
参数:1事件的字符串 2回调函数 3是否在捕获阶段触发事件,需要一个布尔值,一般都传false
attachEvent()在IE8中可以使用
参数:1事件的字符串 2回调函数
事件的传播
关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的事件,然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分三个阶段
- 捕获阶段
- 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
- 目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
- 冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
BOM
浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
Window代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigator代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location代表当前浏览器的地址信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只能当次访问有效
Screen代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
Navigator代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器
一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容
不同的浏览器会有不同的userAgent
如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器中的信息 比如:ActiveXObject
定时器
setInterval()
定时调用
可以将一个函数,每隔一段时间执行一次
参数
- 回调函数,该函数会每隔一段时间被调用一次
- 每次调用间隔的时间,单位是毫秒
返回值:返回一个Number类型的的数据
这个数字用来作为定时器的唯一标识
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
延时调用
延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替,在开发中可以根据自己需要去选择
延时调用setTimeout( ,1000)//延时1000毫秒后调用一次
使用ClearTimeout()来关闭一个延时调用
JSON
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别
并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
JSON
JavaScript Object Notation JS对象表示法
JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
其他的和JS语法一致
JSON分类:
- 对象{}
- 数组[]
JSON中允许的值:
- 字符串
- 数值
- 布尔值
- Null
- 对象
- 数组
在JSON字符串转换为JS中的对象
在JS中,为我们提供了一个工具类,就叫JSON
这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
JSON——>JS对象
JSON.parse()
可以将一个JSON字符串转换为JS对象
需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
JS对象——>JSON
JSON.stringify()
可以将一个JS对象转换为JSON字符串
需要一个JS对象作为参数,会返回一个JSON字符串
JSON这个对象在IE7及以下的浏览器中不支持,所以这些浏览器中调用会报错