ECMAScript5(ES5)

最新推荐文章于 2024-07-12 17:27:47 发布

katsukichan

最新推荐文章于 2024-07-12 17:27:47 发布

阅读量1.2k

点赞数 1

分类专栏： Js

本文链接：https://blog.csdn.net/nep_chan/article/details/84528215

版权

Js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

支持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>