Javascript表单特效之十大常用原理性样例代码大总结

2019-11-20 09:30:13

字体：大中小

来源：转载

供稿：网友

案例一：全选等
运用知识点：ondblclick=（）| onclick | 寻找标签属性及判断和函数的应用

<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20</head>%20%20<body>%20%20%20%20<div>%20%20%20%20%20%20<input%20type="button"%20value="全选"%20ondblclick="checkAll()"%20/>%20%20%20%20%20%20<input%20type="button"%20value="取消"%20ondblclick="cancleAll()"%20/>%20%20%20%20%20%20<input%20type="button"%20value="反选"%20ondblclick="reverseAll()"%20/>%20%20%20%20</div>%20%20%20%20<table>%20%20%20%20%20%20<thead>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<th>序列号</th>%20%20%20%20%20%20%20%20%20%20<th>用户名</th>%20%20%20%20%20%20%20%20%20%20<th>年龄</th>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20</thead>%20%20%20%20%20%20<tbody%20id="tb">%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20%20%20<tr>%20%20%20%20%20%20%20%20%20%20<td><input%20class="c1"%20type="checkbox"/></td>%20%20%20%20%20%20%20%20%20%20<td>alex</td>%20%20%20%20%20%20%20%20%20%20<td>19</td>%20%20%20%20%20%20%20%20</tr>%20%20%20%20%20%20</tbody>%20%20%20%20</table>%20%20%20%20<script>%20%20%20%20%20%20//全选的话先获取所有的input标签属性，然后全部为true%20%20%20%20%20%20function%20checkAll(){%20%20%20%20%20%20%20%20var%20tb%20=%20document.getElementById('tb');//获取tb，也就是身体%20%20%20%20%20%20%20%20var%20checks%20=%20tb.getElementsByClassName('c1');%20%20%20%20%20%20%20%20//[第一个，2，3，4，5]checked%20=%20true%20%20%20%20%20%20%20%20for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20var%20current_check%20=%20checks[i];//得到每个input的值并赋一个变量名%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20true;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%20%20function%20cancleAll(){%20%20%20%20%20%20%20%20var%20tb%20=%20document.getElementById('tb');//获取tb，也就是身体%20%20%20%20%20%20%20%20var%20checks%20=%20tb.getElementsByClassName('c1');%20%20%20%20%20%20%20%20//[第一个，2，3，4，5]checked%20=%20true%20%20%20%20%20%20%20%20for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20var%20current_check%20=%20checks[i];//得到每个input的值并赋一个变量名%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20false;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20function%20reverseAll(){%20%20%20%20%20%20%20%20var%20tb%20=%20document.getElementById('tb');//获取tb，也就是身体%20%20%20%20%20%20%20%20var%20checks%20=%20tb.getElementsByClassName('c1');%20%20%20%20%20%20%20%20//[第一个，2，3，4，5]checked%20=%20true%20%20%20%20%20%20%20%20for%20(var%20i=0;i<checks.length;%20i++){%20%20%20%20%20%20%20%20%20%20var%20current_check%20=%20checks[i];//得到每个input的值并赋一个变量名%20%20%20%20%20%20%20%20%20%20%20if(current_check.checked%20){%20%20%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20false;%20%20%20%20%20%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20current_check.checked%20=%20true;%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20</script>%20%20%20%20%20%20%20%20%20%20</body></html>

案例二：单选要求只能选一个，并且用js可以改变其选项

运用知识点：getElementsByTagName%20|%20checked%20|%20互斥

<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20</head>%20%20<body>%20%20%20%20<ul>%20%20%20%20%20%20<li><input%20type="radio"%20name="g"%20value="11"%20/>男</li>%20%20%20%20%20%20<li><input%20type="radio"%20name="g"%20value="22"%20/>女</li>%20%20%20%20%20%20<li><input%20type="radio"%20name="g"%20value="33"%20/>女司机</li>%20%20%20%20</ul>%20%20%20%20%20%20</body></html>

案例三：克隆

<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20</head>%20%20<body>%20%20%20%20<h2%20id="h1">333%20%20%20%20%20%20<span>123</span>%20%20%20%20%20%20<a>123</a>%20%20%20%20</h2>%20%20%20%20<div%20id="container">%20%20%20%20%20%20<div%20class="item">1%20%20</div>%20%20%20%20%20%20<div%20class="item">2</div>%20%20%20%20%20%20%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20%20%20%20%20%20%20%20%20var%20h%20=%20document.getElementById('h1');%20%20%20%20%20%20var%20c%20=%20document.getElementById('container')%20%20%20%20%20%20//c.appendChild(h);//直接添加到2下面了//%20%20%20%20%20%20var%20newH%20=%20h.cloneNode(true);//不加true,只克隆格式//%20%20%20%20%20%20c.appendChild(newH);加true后完整克隆到2下面了%20%20%20%20</script>%20%20</body></html>

案例四：自定义属性，获取自定义属性并改变标签内容

<!DOCTYPE%20html><html>%20%20<head>%20%20%20%20<meta%20charset="UTF-8">%20%20%20%20<title></title>%20%20</head>%20%20<body>%20%20%20%20%20%20%20%20%20%20%20%20//可以构造出一种选择器%20%20%20%20%20%20%20%20<input%20type="button"%20onclick="Func()"%20value="点我啊"%20/>%20%20%20%20<div%20id='i1'>%20%20%20%20%20%20%20%20%20%20%20%20<div%20class="c1">123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1">123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1">123</div>%20%20%20%20%20%20<div%20class="c1"%20alex='sb'>123</div>%20%20%20%20%20%20<div%20class="c1">123</div>%20%20%20%20</div>%20%20%20%20<script>%20%20%20%20function%20Func(){%20%20%20%20%20%20//i1所有孩子，循环每一个孩子，判断如果alex='sb'%20%20%20%20%20%20var%20i1%20=%20document.getElementById('i1')%20%20%20%20%20%20var%20divs%20=%20i1.children%20%20%20%20%20%20for%20(%20var%20i%20=0;%20i<divs.length;i++){%20%20%20%20%20%20%20%20var%20current_div%20=%20divs[i];%20%20%20%20%20%20%20%20var%20result%20=%20current_div.getAttribute('alex')//得到属性%20%20%20%20%20%20%20%20//console.log(result);%20%20%20%20%20%20%20%20if%20(result%20==%20'sb'){%20%20%20%20%20%20%20%20%20%20current_div.innerText%20=%20'456';%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20}%20%20%20%20</script>%20%20</body></html>

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="height: 20px;background-color: green;"></div> <div style="border: 5px solid pink;padding: 10px;"> <div> <div id="xo" style="height: 200px;overflow: auto;width: 400px;margin: 0 auto;border: 15px solid red;padding: 3px;" > <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div><div>sdf</div> </div> </div> </div> <script> var ii = document.getElementById('xo') console.log(ii.scrollTop) console.log(ii.scrollHeight) console.log(ii.clientTop) console.log(ii.clientHeight) console.log(ii.offsetTop) console.log(ii.offsetHeight) //scroll 滚动；卷轴的意思// scrollTop: 滚动条距离顶部高度// scrollHeight: 文档高度:自身+padding// clientTop: 边框高度// clientHeight: 可见范围的高度:自身 + padding //offset 印刷的意思// offsetTop: 当前标签距离"顶部"的高度(body)// 如果他的上一级没有postion,如果有则按照position的标签为主// offsettHeight: 可见范围的高度:自身+padding+border </script> </body></html>