首頁 > 開發者 > JavaScript
標籤：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、
JavaScript之實現單選複選、菜單以及返回頂部執行個體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
