[TOC] ### 使得所有的P標簽背景色在點擊按鈕后改變 ``` ~~~ <style> div{ width: 300px; height: 500px; border: 1px solid red; } </style> ~~~ ~~~ <input type="button" value="變色" id="btn"/> <div id="dv"> <span>這是span</span> <p>這是p</p> <span>這是span</span> <p>這是p</p> <span>這是span</span> <p>這是p</p> <span>這是span</span> <a href="http://www.baidu.com">百度</a> </div> ~~~ ~~~ var btn = my$("btn"); btn.onclick = function () { var inputs = my$("dv").childNodes;/!*獲取所有的子節點 返回值是個數組*!/ for(var i=0;i<inputs.length;i++){/!*循環遍歷獲得所有的子節點*!/ if(inputs[i].nodeType == 1 && inputs[i].nodeName == "P"){/!*判斷子節點是不是標簽節點同時節點名字是不是p標簽 （判斷的是結果 所以是大寫的P）*!/ inputs[i].style.backgroundColor = "pink";/!*滿足條件背景改變*!/ } } } ~~~ ``` ### 奇紅偶黃 ``` ~~~ <input type="button" value="變色" id="btn"/> <div> <ul id="uu"> <li>西施</li> <li>昭君</li> <li>貂蟬</li> <li>玉環</li> <li>芙蓉姐姐</li> </ul> </div> ~~~ ~~~ <script> var btn = my$("btn");/*獲取事件源*/ btn.onclick = function () {/*點擊事件*/ var nodes = my$("uu").childNodes;/*獲取里面的所有的子節點 返回值是個數組*/ var num = 0;/*記錄li的個數 從0開始 類似于索引下標*/ for(var i=0;i<nodes.length;i++){ // 遍歷循環，拿到所有的節點 if(nodes[i].nodeType == 1 && nodes[i].nodeName == "LI"){/*判斷節點是不是標簽節點 同時是不是li*/ nodes[i].style.backgroundColor = num%2 == 0? "red" : "yellow";/*判斷li的索引。從索引的值去判斷奇偶*//*滿足條件為紅，不然則是黃*/ num ++;/*li的索引+1*/ } } } ~~~ </script> ``` ### 點擊切換背景圖 ``` ~~~ <style> * { margin: 0px; padding: 0px; } body { background-image: url("images/1.jpg"); } #mask { background-color: rgba(255, 255, 255, 0.3); height: 200px; text-align: center; } #mask img { width: 200px; margin-top: 35px; cursor: pointer; } </style> ~~~ <div id="mask"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> </div> ~~~~~~ var nodes = my$("mask").children;/*獲取里面的子級元素 返回值是個數組 3個img*/ for(var i=0;i<nodes.length;i++){/*循環獲取所有的元素*/ nodes[i].onclick = function () {/*給每個img 做點擊事件*/ document.body.style.backgroundImage = "url(\""+this.src+"\")";/*body背景圖改變*/ } } ~~~ ``` ### 點擊按鈕創建列表 ``` ~~~ div { width: 300px; height: 400px; border: 1px solid #ccc; } ul{ list-style: none; } ~~~ <input type="button" value="創建列表" id="btn"/> <div id="dv"></div> var names = ["楊過", "郭靖", "張無忌", "張三豐", "喬峰", "段飛", "丁棚"]; my$("btn").onclick = function () { var str = "<ul>";/*str中加上<ul>*/ for(var i =0 ;i<names.length;i++){/*獲取names的值*/ str += "<li>"+names[i]+"</li>"/*取每個值拼接上li*/ } str += "</ul>";/*加上右面的</ul>*/ my$("dv").innerHTML = str;/*把內容加入到HTML中 吃標簽*/ var list = my$("dv").getElementsByTagName("li");/*獲取所有的li*/ for(var i= 0;i<list.length;i++){/*循環所有的li*/ list[i].onmouseover = function () {/*鼠標經過事件*/ this.style.backgroundColor = "red";/*背景色改變*/ }; list[i].onmouseout = function () {/*鼠標離開事件*/ this.style.backgroundColor = "";/*背景色結束*/ } } } ~~~ ``` ### 全選和反選 ``` ~~~ <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 00px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> ~~~ ~~~ <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>飯店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>紅燒肉</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西紅柿雞蛋</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>油炸榴蓮</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>清蒸助教</td> <td>田老師</td> </tr> </tbody> </table> </div> var cak = my$("j_cbAll");/!*獲取全選的元素 事件源*!/ var cks = my$("j_tb").getElementsByTagName("input");/!*獲取下面的選框 返回值是個集合*!/ cak.onclick = function () {/!*給事件源做點擊事件*!/ for(var i = 0;i<cks.length;i++){/!*循環遍歷*!/ cks[i].checked = this.checked;/!*小選框的狀態等于全選框的狀態*!/ } }; for(var i = 0;i<cks.length;i++){/!*循環獲取小的復選框*!/ cks[i].onclick = function () {/!*給所有的小復選框做點擊事件*!/ var flag = true;/!*假設選中*!/ for(var j =0;j<cks.length;j++){/!*循環所有的小復選框，查看狀態*!/ // 選中是true 在判斷條件中取反為false不會進入 在選中狀態為false時，取反后為true 進入判斷 if( !cks[j].checked){/!* *!/ flag = false;/!*改了flag的值*!/ break; } } cak .checked = flag;/!*全選的復選的轉態*!/ } } ~~~ ``` ### 動態創建表格 ``` <style> div{ width: 200px; height: 200px; border: 1px solid red; } </style> <input type="button" value="創建表格" id="btn"/> <div id="dv"></div> var arr=[ {name:"百度",href:"http://www.baidu.com"}, {name:"谷歌",href:"http://www.google.com"}, {name:"優酷",href:"http://www.youku.com"}, {name:"土豆",href:"http://www.tudou.com"}, {name:"快播",href:"http://www.kuaibo.com"}, {name:"愛奇藝",href:"http://www.aiqiyi.com"} ]; //點擊按鈕創建表格 my$("btn").onclick=function () { //創建table加入到div中 var tableObj=document.createElement("table"); tableObj.border="1"; tableObj.cellPadding="0"; tableObj.cellSpacing="0"; my$("dv").appendChild(tableObj); //創建行,把行加入到table中 for(var i=0;i<arr.length;i++){ var dt=arr[i];//每個對象 var trObj=document.createElement("tr"); tableObj.appendChild(trObj); //創建第一個列,然后加入到行中 var td1=document.createElement("td"); td1.innerText=dt.name; trObj.appendChild(td1); //創建第二個列 var td2=document.createElement("td"); td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>"; trObj.appendChild(td2); } }; ``` ```