js简介(ES5方法)

发表于 | 分类于

ES5

支持ES5的浏览器

Opera 11.60+

Internet Explorer 9+ (IE9不支持严格模式)

Firefox 4+

Safari 5.1+

Chrome 13+

页面加载事件

DOM文档加载的步骤为

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。

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

    页面加载事件

1
2
3
4
5
6
7
8
* 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做好铺垫；
举例子：
1
2
3
4
5
6
function sum(){
    a = 10;
  	//在普通模式下，若在函数内不使用var声明变量，会默认变成全局变量
  	//为了改变现状，出现ES4版本，然而变动太大，未被使用
  	//出现ES5作为过渡阶段，存在两种模式
}

如何使用ES5

在头部写入 “use strict”

  • 全局：针对整个js文件
    将”use strict”放在js文件的第一行
  • 局部：针对单个函数
    将”use strict”放在函数体的第一行
1
2
3
4
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指向)，返回一个新的函数

应用

1
2
3
4
5
6
7
8
9
10
11
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（）