标签:alt function min isp 利用 循环 elements 分布 点击
1、单选、复选以及反选实例
其实主要是利用for循环提取标签,然后更改checked属性值实现的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancleAll();"/> <input type="button" value="反选" onclick="Reverse();"> <!--//ondblclick表示双击--> </div> <table> <thead> <th>序号</th> <th>用户名</th> <th>年龄</th> </thead> <tbody id="tb"> <tr> <td><input class="c1" type="checkbox"/></td> <td>jay</td> <td>23</td> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>Bob</td> <td>23</td> </tr> <tr> <td><input class="c1" type="checkbox"/></td> <td>peter</td> <td>23</td> </tr> </tbody> <script type="text/javascript"> function CheckAll() { var tb = document.getElementById(‘tb‘); var checks = tb.getElementsByClassName(‘c1‘); for (var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = true; // 循环每一个标签 } } function CancleAll() { var tb = document.getElementById(‘tb‘); var checks = tb.getElementsByClassName(‘c1‘); for (var i=0;i<checks.length;i++){ var current_check = checks[i]; current_check.checked = false; // 循环每一个标签 } } function Reverse() { var tb = document.getElementById(‘tb‘); var checks = tb.getElementsByClassName(‘c1‘); for (var i = 0; i < checks.length; i++) { var current_check = checks[i]; if (current_check.checked) { current_check.checked = false; } else { current_check.checked = true; } } } </script> </table> </body> </html>
2、tab菜单实例
利用一种对应关系,实现一个tab菜单,主要思路是绑定每两个选项的关系,即当选中一个,则显示出与之对应的选项框,利用for循环实现显示与否
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜单</title> <style> ul{ list-style: none; margin: 0; padding: 0; } ul li{ float: left; background-color: blue; color: black; padding: 10px 12px; } .clearfix:after { display: block; content: ‘.‘; height: 0; visibility: hidden; clear: both; } .tab-menu .title{ background-color: bisque; } .tab-menu .content{ border: 1px solid black; min-height: 150px; } .hide{ display: none; } .tab-menu .title .active{ background-color: white; color:red ; } /*选中时候的状态*/ </style> </head> <body> <div style="width: 400px;margin: 0 auto"> <div class="tab-menu"> <div class="title clearfix"> <ul> <li target=‘h1‘ class="active" onclick="Show(this);">价格趋势</li> <li target=‘h3‘ onclick="Show(this);">市场分布</li> <li target=‘h2‘ onclick="Show(this);">其他</li> </ul> </div> <div id="jay" class="content"> <div con="h1">contnet1</div> <div con="h2" class="hide">contnet2</div> <div con="h3" class="hide">contnet3</div> </div> </div> </div> <script> function Show(ths) { //args表示当前标签 var target=ths.getAttribute(‘target‘); //给自己添加样式active,兄弟标签则去掉 ths.className=‘active‘; var brothers = ths.parentElement.children; for (var i=0;i<brothers.length;i++){ if(ths == brothers[i]){ }else{brothers[i].removeAttribute(‘class‘)} } var contents = document.getElementById(‘jay‘).children; for(var j=0;j<contents.length;j++){ var current_content =contents[j]; var con = current_content.getAttribute(‘con‘) if(con == target){ current_content.classList.remove(‘hide‘) }else{current_content.className=‘hide‘} } } </script> </body> </html>
执行结果如图所示,点击则会切换
3、往页面列表里面自动添加输入的文本内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div > <input type="text"> <input type="button" value="添加" onclick="foo(this)"> </div> <div> <ul id="commentList"> <li>jay</li> <li>BOb</li> </ul> </div> <script> function foo(ths) { var val = ths.previousElementSibling.value; console.log(val); var ret = document.getElementById(‘commentList‘); var str = "<li>" + val + "</li>"; ret.insertAdjacentHTML(‘beforeEnd‘, str);//该方法只能添加字符串 ths.previousElementSibling.value = ‘‘; // 第二种方法 var tag = document.createElement(‘li‘); tag.innerText = val; ret.appendChild(tag); } </script> </body> </html>
执行结果如
图
可以往下面随便添加内容
insertAdjacentHTML第一个参数有多种用法,如图
3、克隆移动标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2 id="h1">333</h2> <div id="container"> <div class="item">1</div> <div class="item">1</div> </div> <script> var h =document.getElementById(‘h1‘); var c=document.getElementById(‘container‘); var newH = h.cloneNode(true);//没有true参数的话,不会克隆标签里面的东西 c.appendChild(newH) </script> </body> </html>
执行结果如图
4、
标签:alt function min isp 利用 循环 elements 分布 点击
原文地址:http://www.cnblogs.com/xiaobeibei26/p/6623283.html