ECMAScript5(ES5)

ECMAScript5(ES5)

1支持ES5的浏览器

· Opera 11.60+；

· Internet Explorer 9+，IE9不支持严格模式；

· Firefox 4+；

· Safari 5.1+；

· Chrome 13。

2加载事件

2.1 DOM文档加载步骤

1.解析HTML结构。

2.加载外部脚本和样式表文件。

3.解析并执行脚本代码。

4.DOM树构建完成。//DOMContentLoaded

5.加载图片等外部文件。

6.页面加载完毕。//window.onload。

2.2 document事件

下面两个事件用来取代window.onload事件。

2.2.1 readystatechange事件

· Interactive 相当于DOM文档加载步骤中的第4步。

· complete 相当于window.onload，DOM文档加载步骤中的第6步 。

document.onreadystatechange = function(){

if(document.readyState === 'interactive'){

 }

}

2.2.2 DOMContentLoaded事件（推荐）

document.addEventListener('DOMContentLoaded',function(){

    //DOM树构建完成后执行

})

3 ES5的严格模式

除了正常模式，ES5添加了第二种运行模式：“严格模式(strict mode)”。顾名思义，这种模式使得javascript在更严格的条件下运行(更可靠，更安全)。目前，除了IE6-9，其它浏览器均已支持ES5严格模式。

3.1 为什么要用严格模式

· 消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；

· 消除代码运行的一些不安全之处，保证代码运行的安全；

· 提高编译器效率，增加运行速度；

· 为未来新版本的javascript做好铺垫....

3.2如何使用严格模式

在头部写入 “use strict”。

· 全局：针对整个js文件
将”use strict”放在脚本文件的第一行，则整个脚本都将以”严格模式”运行。

· 局部：针对单个函数
将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行。

function strict(){

"use strict";

return "这是严格模式";

}

3.3 ES5严格模式执行限制

· 不使用var声明变量严格模式中将不通过。

· 删除系统内置的属性会报错。

· delete不可删除属性的对象时报错，如：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(){//报错

}

}

4 JSON对象方法

4.1 JSON.parse(text)

将json字符串转换成对象/数组。

· text：json字符串。

· json字符串格式。

· json字符串的值可以为以下值：

数字（整数或浮点数）；

字符串（在双引号中）；

逻辑值（true 或 false）；

数组（在方括号中）；

对象（在花括号中）；

Null。

4.2 JSON.stringify(value)

将数组/对象转换成标准的json字符串。

5 ES5新增获取元素节点的方法

5.1 querySelector(css选择器)

获取匹配选择器的第一个元素节点，返回DOM节点。

5.2 querySelectorAll(css选择器)

获取匹配选择器的所有元素，返回数组。

案例：

Html结构

<div class="datalist">

<ul>

<li>

<img src="" alt="">

<h4>1</h4>

<p class="price"></p>

</li>

<li>

<img src="" alt="">

<h4>2</h4>

<p class="price"></p>

</li>

</ul>

</div>

<div class="datalist">2</div>

Js代码：

document.addEventListener('DOMContentLoaded',function(){

var datalist = document.querySelector('.datalist');

//与css中的选择器一样，通过类名选择，返回值为DOM节点

var lis = datalist.querySelectorAll('li');

//返回值为标签为li的节点的数组

// 第二个

var secLi = datalist.querySelectorAll('li:nth-child(2)');

//虽然只有匹配到一个节点，但返回值仍为数组，数组元素只有1个

var h4 = datalist.querySelectorAll('h4');

var p = document.querySelectorAll('.datalist p');

})

6 Function方法

6.1 bind()

用于将当前函数和指定对象绑定，返回一个新的函数。

案例：点击按钮事件，延迟1S执行相应函数。

var btns = document.querySelectorAll('.btn');

for(var i=0;i<btns.length;i++){

    btns[i].onclick = function(){

        //这里的this指向按钮

        setTimeout(function(){

            // 这里的this呢？

            console.log(this);

            output.innerHTML = '你点击了' + this.innerHTML;

        }.bind(this),1000);

    };

}

7 获取class列表属性和data自定义属性

7.1获取class列表属性

classList：js 的方法:

1.length : class类名的个数；

2.add() : 添加class方法；

3.remove() : 删除class方法；

4.toggle() : 切换class方法；

5.contains():是否含有某个类,返回布尔值。

案例：

var box = document.querySelector('.box');

var btn = document.querySelector('#btn');

// 鼠标移入添加一个active

box.onmouseover = function(){

this.classList.add('active');

}

//鼠标移出删除掉一个active

box.onmouseout = function(){

this.classList.remove('active');

}

//toggle意思为开关，如果有则移出类名active，没有则添加类名active

btn.onclick = function(){

box.classList.toggle('hide');

}

7.2data自定义属性

dataset

data-name :  dataset.name

data-name-first  :  dataset.nameFirst

案例：

Html结构：

<button id="btn" data-msg="实现显示隐藏的功能" data-name="超强按钮" data-src="img/xx.jpg" data-first-name="xie">显示隐藏</button>

Js代码：

console.log(btn.dataset.firstName) ; //xie