支持ES5的浏览器
Opera 11.60+
Internet Explorer 9+
IE9不支持严格模式
Firefox 4+
Safari 5.1+
Chrome 13
加载事件
DOM文档加载的步骤为
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。DOMContentLoaded
加载图片等外部文件。
页面加载完毕。window.onload
document事件
readystatechange事件
interactive 等待dom树构建完成触发
complete 等待页面加载完毕触发
document.onreadystatechange = function(){
if(document.readyState === 'interactive'){
}
}
DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){
//DOM树构建完成后执行
})
PS:以上事件用以取代window.onload事件
document.onreadystatechange = function(){
if(document.readyState === 'interactive'){
console.log('interactive');
}
if (document.readyState === 'complete'){
console.log('complete');
}
}
document.addEventListener('DOMContentLoaded',function(){
console.log('DOMContentLoaded');
});
//输出顺序 interactive DOMContentLoaded complete
ES5的严格模式
除了正常模式，ES5添加了第二种运行模式：“严格模式(strict mode)”。顾名思义，这种模式使得javascript在更严格的条件下运行(更可靠，更安全)。目前，除了IE6-9，其它浏览器均已支持ES5严格模式。
为什么要用严格模式
消除javascript语法的一些不合理，不严谨的地方，减少一些怪异行为；
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的javascript做好铺垫；
如何使用
在头部写入 “use strict”
全局：针对整个js文件
将”use strict”放在脚本文件的第一行，则整个脚本都将以”严格模式”运行
局部：针对单个函数
将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行。
function strict(){
"use strict";
return "这是严格模式";
}
JSON对象方法
JSON.parse(text)：将json字符串转换成对象/数组
text：json字符串
json字符串格式
属性名必须加双引号
字符串必须加双引号
不能有注释
最后不能有多余逗号
属性值可以为以下值：
1数字（整数或浮点数）
2字符串（在双引号中）
3布尔值（true 或 false）
4数组（在方括号中）
5对象（在花括号中）
6null
JSON.stringify(value)：将数组/对象转换成标准的json字符串
获取元素节点
querySelector(selector)
获取匹配选择器的第一个元素节点，返回DOM节点
querySelectorAll(selector)
获取匹配选择器的所有元素，返回数组
<script>
document.addEventListener('DOMContentLoaded',function(){
//获取到id为katsuki的元素
var k1 = document.querySelector("#katsuki");
//获取到id为katsuki里class为katsuki的元素
var k2 = document.querySelector("#katsuki .katsuki");
//获取class为katsuki的元素
var k3 = document.querySelector(".katsuki");
//获取所有class为katsuki的元素
var k4 = document.querySelectorAll(".katsuki");
})
</script>
<body>
<div id="katsuki">
<div class="katsuki"></div>
</div>
<div class="katsuki"></div>
</body>
Function方法
bind()
用于将当前函数和指定对象绑定(改变this指向)，返回一个新的函数
this补充
1.普通函数的执行：this为window
2.对象执行自己本身的方法，this为当前对象
3.事件驱动函数执行，this为事件绑定的元素
var name = 'kasami';
obj = {
name: "katsuki"
}
function show(){
//普通函数,this指向window
console.log(this.name)
}
show();//直接调用，输出kasami
show.bind(obj)();//绑定obj,this指向obj,输出katsuki
bind应用
<script>
document.addEventListener('DOMContentLoaded',function(){
var btns = document.querySelectorAll('.btn');
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
//这里的this指向按钮
console.log(this);//输出点击的btn
setTimeout(function(){
//无bind时，这里的this指向window
console.log(this);
//加上bind后输出点击的btn
}.bind(this),1000);
};
})
}
</script>
<body>
<input type="button" value="按钮1" class="btn" />
<input type="button" value="按钮2" class="btn" />
<input type="button" value="按钮3" class="btn" />
</body>
面试题
点击不同的按钮，输出对应的索引
<script>
document.addEventListener('DOMContentLoaded',function(){
var btns = document.querySelectorAll('.btn');
//for循环遍历很快，而函数是点击时才触发，当触发时i已经遍历到最后一个值。
//for中定义var i = 0,等于在全局定义var i,for中i再赋值0
for(var i=0;i<btns.length;i++){
//给btn设置idx类名，当前循环值（和数字索引值相同），添加到html结构，对象中无idx
btn[i].setAttribute("idx", i);
btn[i].onclick = function(){
//这里直接输出i,i为跳出循环值,输出3
console.log(i);
//this指向当前点击btn,但对象中无idx,输出undefined
console.log(this.idx);
//对象中有getAttribute方法，调用，输出对应的数值
console.log(this.getAttribute('idx'));
}
}
})
</script>
<body>
<input type="button" value="按钮1" class="btn" />
<input type="button" value="按钮2" class="btn" />
<input type="button" value="按钮3" class="btn" />
</body>
获取class列表属性
classList：js 的方法
length : class类名的个数
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法
contains():是否含有某个类,返回布尔值
<script>
//点击按钮添加移除类名
document.addEventListener('DOMContentLoaded',function(){
var katsuki = document.querySelector('.katsuki');
var btn = document.querySelector('#btn');
//方法一
var flag = true;
btn.onclick = function(){
if(flag){
//假装上面写好类名样式
katsuki.classList.add('pink');
}else{
katsuki.classList.remove('pink');
}
flag = !flag;
}
//方法二
btn.onclick = function(){
katsuki.classList.toggle('pink');
}
})
</script>
<body>
<div class="katsuki">katsuki</div>
<input type="button" id="btn" value="字粉了">
</body>
data自定义属性
dataset
1.符合W3C标准自定义属性：data-*
2.dataset：存放所有data自定义属性的对象。
获取 ele.dataset.age; //获取data-age的属性值
设置 ele.dataset.age = “”//设置data-age的属性值
<script>
document.addEventListener('DOMContentLoaded',function(){
var katsuki = document.querySelector('#katsuki');
katsuki.dataset.age = 18;
//输出18
console.log(katsuki.dataset.age);
console.log(katsuki.getAttribute('data-age'));
})
</script>
<body>
<div id="katsuki"></div>
</body>