JS中的排他思想以及自定义属性
今天我们学习JS中一个很重要的思想.
排他思想
实现排他思想的步骤是
-
先找到所有的元素
-
把所有的元素样式都改回初始的样式
-
最后留下自己,设置特定样式
注意:步骤的顺序不能颠倒,一定要先把所有改回去最后再单独改自己
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 实现表格通讯录(表格版本，包括姓名，电话，邮箱三项)，可以全选，删除，添加，修改数据 -->
<style>
#form {
width: 480px;
margin: 30px auto;
border: 1px solid #eee;
border-radius: 5px;
padding: 10px;
line-height: 30px;
position: relative;
}
button {
position: absolute;
right: 10px;
bottom: 10px;
}
#tab {
width: 500px;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
padding: 5px;
}
tbody tr td:first-child {
text-align: center;
}
input[type="checkbox"] {
width: 15px;
height: 15px;
}
#div1 {
position: relative;
width: 480px;
padding: 10px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function () {
var inpS = document.querySelectorAll('#form input');
var btnS = document.getElementsByTagName('button');
var tab = document.getElementById('tab');
var all = document.getElementById('all');
btnS[0].onclick = function () {
var tr = document.createElement('tr');
for (var i = 0; i < 4; i++) {
tr.appendChild(document.createElement('td'));
}
var tdS = tr.children;
tdS[0].innerHTML = '<input type="checkbox">';
tdS[1].innerText = inpS[0].value;
tdS[2].innerText = inpS[1].checked == true ? '男' : '女';
tdS[3].innerText = inpS[3].value;
//tr追加表格
tab.tBodies[0].appendChild(tr);
}
//全选按钮 和全选按钮的状态相同
all.onclick = function () {
//获取所有tbody中的复选框
var ck = tab.tBodies[0].getElementsByTagName('input');
for (var i = 0; i < ck.length; i++) {
ck[i].checked = all.checked;
}
}
//删除 选中的tr
btnS[1].onclick = function () {
//获得tbody中的复选框
var ck = tab.tBodies[0].getElementsByTagName('input');
//判断复选框状态
for (var i = 0; i < ck.length; i++) {
if (ck[i].checked == true) {
//取得父级的父级 删除该行
ck[i].parentNode.parentNode.remove();
i--;
}
}
}
}
</script>
</head>
<body>
<div id="form">
请输入姓名: <input type="text" id="name"> <br>
请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex">女<br>
请输入年龄: <input type="text" id="age">
<button>添加到表格</button>
</div>
<table id="tab">
<thead>
<tr>
<th width="20%"><label><input type="checkbox" id="all">全选</label></th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>女</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>女</td>
<td>1</td>
</tr>
</tbody>
</table>
<div id="div1">
<button>删除所选行</button>
</div>
</body>
</html>
自定义属性
我们在使用DOM操作元素的时候,可以给元素添加一些其原本没有的属性用来记录一些我们需要的数据
获取属性值的两种方式
- 元素对象.属性名
- 元素对象.getAttribute(属性名)
两者之间的区别：
-
通过
对象名.属性名获取到的是元素的属性值，并且对css属性以css形式返回。不能获取到自定义属性的值 -
通过
元素对象.getAttribute(属性名)获取属性值，返回的结果是以字符串体现，可以获取到自定义属性的值
设置属性值的两种方式
- 元素对象.属性名=属性值
- 元素对象.setAttribute(属性名,属性值);(属性名必须完全按照元素原本的属性名进行设置，否则将是自定义属性)
两者之间的区别：
-
通过
元素对象.属性名=属性值只能设置元素对象原有的一些属性，无法设置自定义属性 -
通过
元素对象.setAttribute(属性名,属性值)可以设置任何属性
自定义属性的用处
- 使用自定义属性来让标签本身记录一些不保密的但是又要跟随元素的变化而变化的数据
移除元素的属性
元素对象.removeAttribute(属性名)
扫描二维码关注公众号，回复：
12292042 查看本文章
H5自定义属性
创建自定义属性目的:
- 自定义属性是为了保存一些数据,有些数据可以保存到页面里而这些数据不需要保存到服务器数据库中.
自定义属性获取和创建基本上都是通过和Attribute有关的两个函数实现
自定义属性有可能会产生很多的歧义，并且不是很好区分到底是标签原有属性还是自定义属性,所以我们H5新增了自定义属性.
规则
- H5里面规定自定义属性必须以
data-开头作为属性名称并且赋值 - 获取H5自定义属性和设置自定义属性依然使用
Attribute函数 - 在H5里面新增了元素名称.dataset.属性名称或者元素名称.dataset[属性名称]，在IE11里面才能被支持，这里使用的属性名称不包含data-，dataset属性会将这个元素的所有自定义属性全部以键值对的方式保存起来