<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性解决变量污染</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 80px;
height: 35px;
border-radius: 5px;
float: left;
margin-left: 3px;
}
</style>
</head>
<body>
<ul>
<li arg="10"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
// 学习目的:对象的(临时)属性可以帮助存储临时数据,因为临时数据的生命周期往往很短.需要提示临时数据的生命周期
// 临时数据会随属性的消亡而消亡 | 被主动移除(delete)
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// lis[i]依次代表五个li页面元素对象
// 给每一个li设置一个(临时)属性
lis[i].index = i; // 第一个li的index属性存储的就是索引0,以此类推,最后一个存储的是索引4
lis[i].onclick = function () {
// var temp = lis[i].index; // lis[i]中的i一样存在变量污染
var temp = this.index; // 当前被点击的li
alert(temp) // temp => this.index(lis[i].index) => i(索引)
}
}
// 属性的使用:****
</script>
<script type="text/javascript">
var lis = document.querySelectorAll('li');
console.log(lis); // 页面元素集合
console.log(lis[0]); // 页面元素
// 对象可以添加属性与方法 | 万物皆对象
lis.name = "元素集合";
console.log(lis.name); // lis => 是对象,页面元素集合对象
lis[0].fn = function () {
console.log('li fn');
}
lis[0].fn(); // 每一个页面元素都是对象
// 通过html方式给第一个li添加了一个全局属性arg
console.log(lis[0].arg); // js无法直接获取
// 总结:
// 1.js要使用页面元素属性,需要通过js手段给页面对象手动添加属性,添加的属性不会渲染到html标签中
// 2.通过html手动主动给标签添加的全局属性,js无法访问,但是可以参与css布局
</script>
<style type="text/css">
li[arg="10"] {
background-color: orange;
}
</style>
</html>
