es3-es5(严格模式)
支持ES5的浏览器
Opera 11.60+
Internet Explorer 9+ (IE9不支持严格模式)
Firefox 4+
Safari 5.1+
Chrome 13+
页面加载事件
DOM文档加载的步骤为
-
解析HTML结构。
-
加载外部脚本和样式表文件。
-
解析并执行脚本代码。
-
DOM树构建完成。//DOMContentLoaded
-
加载图片等外部文件。
-
页面加载完毕。//window.onload
页面加载事件
* readystatechange事件(准备阶段状态改变,两个状态)
* interactive :DOM树完成执行
* complete :类似window.onload,但比window.onload先执行
* DOMContentLoaded事件
* DOM树完成执行
* 必须使用事件监听器绑定document事件
*
PS:以上事件用以取代window.onload事件(实际开发不常用)
演示:通过控制台打印查看执行顺序
document.onreadystatechange = function(){
if(document.readyState === 'interactive'){
console.log(iteration);
}
if(document.readyState === 'complete'){
console.log('complete');
}
}
document.addEventListener("DOMContentLoaded",function(){
console.log("DOMContentLoaded");
})
document.onload = function(){
console.log("onload);
}
ES5的严格模式
除了正常模式,ES5添加了第二种运行模式:“严格模式(strict mode)”。顾名思义,这种模式使得javascript在更严格的条件下运行(更可靠,更安全)。目前,除了IE6-9,其它浏览器均已支持ES5严格模式。
为什么要用严格模式
- 消除javascript语法的一些不合理,不严谨的地方,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的javascript做好铺垫;
举例子:
function sum(){
a = 10;
//在普通模式下,若在函数内不使用var声明变量,会默认变成全局变量
//为了改变现状,出现ES4版本,然而变动太大,未被使用
//出现ES5作为过渡阶段,存在两种模式
}
如何使用ES5
在头部写入 “use strict”
- 全局:针对整个js文件
将”use strict”放在js文件的第一行 - 局部:针对单个函数
将”use strict”放在函数体的第一行
function strict(){
"use strict";
return "这是严格模式";
}
执行限制
-
不使用var声明变量严格模式中将不通过
-
删除系统内置的属性会报错
-
不能删除var声明的全局变量(会自动成为window的属性)
-
对象有重名的属性将报错
- var obj={name:“小王”,name:‘王大锤’}
-
函数有重名的形参将报错
- function sum(a,a,b){}
-
arguments严格定义为参数(包含了实参的所有信息)
- 不允许对arguments赋值
- 禁止使用arguments.callee调用自己本身的函数
-
函数必须声明在顶层,不能写在条件判断语句或for循环语句中
var arr = [10,2,3,50];
if(arr.length>3){
function sum(){//报错}
}
获取元素节点
- querySelector(selector)
获取匹配选择器的第一个元素节点,返回DOM节点 - querySelectorAll(selector)
获取匹配选择器的所有元素,返回数组
对比用getElementsByClassName()等方法获取到的类数组,querySelectorAll()可以使用forEach()方法。
(学会查看控制台!!!)
Function方法
bind(指定对象)
用于将当前函数和指定对象绑定(改变函数内this指向为指定对象),返回一个新的函数
应用
var btns = document.querySelectorAll('.btn');
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
//方式1(1):var self = this;
setTimeout(function(){
//(2)console.log(self.innerHTML);
//方式2.bind()改变this的指向
console.log(this.innerHTML);
}.bind(this),1000);
};
}
操作class的属性
classList 类数组,包含了所有类名
- length : class类名的个数
- add() : 添加class方法
- remove() : 删除class方法
- toggle() : 切换class方法
- contains():是否含有某个类,返回布尔值
data自定义属性
dataset 对象
//1.符合W3C标准自定义属性:data-*
<div id="box" data-name="laoxie" data-age="18" data-first-name="xiexie"></div>
//2.dataset:存放所有data自定义属性的对象。
//(1)获取
dataset.age;//获取data-age的属性值
dataset.firstName;//获取data-first-name的属性值
//(2)设置
dataset.gender="girl";//设置data自定义属性,在html结构会多出[data-gender="girl"]
//回顾:操作任意自定义属性(可以是非标准的)
//setAttibutte()
//getAttibute()