支持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对象方法
text为json字符串
JSON.parse(text):将json字符串转换成对象/数组
JSON.stringify(value):将数组/对象转换成标准的json字符串
json字符串格式
属性名必须加双引号
字符串必须加双引号
不能有注释
最后不能有多余逗号
属性值可以为以下值:
1数字(整数或浮点数)
2字符串(在双引号中)
3布尔值(true 或 false)
4数组(在方括号中)
5对象(在花括号中)
6null
例如 '{"name": "katsuki", "age": "18"}'
获取元素节点
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自定义属性
1.符合W3C标准自定义属性:data-*
2.dataset:存放所有data自定义属性的对象。
//获取data-katsuki的属性值
ele.dataset.katsuki;
//设置data-katsuki的属性值
ele.dataset.katsuki = "katsuki"
<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>