點擊操作 節點的方式 案例 案例1：點擊按鈕,設置p變色 節點的方式做 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; he ...
點擊操作---節點的方式---案例
案例1：點擊按鈕,設置p變色---節點的方式做
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid hotpink; } </style> </head> <body> <input type="button" value="變色" id="btn" /> <div id="dv"> <p>鋤禾日當午</p> <p>汗滴禾下土</p> <span>誰知盤中餐</span> <br /> <span>粒粒皆辛苦</span> <br /> <a href="#">唐詩宋詞</a> </div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //先獲取div var dvObj = my$("dv"); //獲取裡面所有的子節點 var nodes = dvObj.childNodes; //迴圈遍歷所有的子節點 for (var i = 0; i < nodes.length; i++) { //判斷這個子節點是不是p標簽, nodetype是1且nodename是大寫的P if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") { nodes[i].style.backgroundColor = "pink"; } } }; </script> </body> </html>
案例2：節點操作隔行變色
（寫錯一個字母查找bug花了好久時間，.nodes[i].nodeName 多了個s）
<body> <ul id="uu"> <li>爆炒</li> <li>油炸</li> <li>清蒸</li> <li>紅燒</li> <li>燒烤</li> <li>糖醋</li> <li>涼拌</li> <li>魚香</li> </ul> <input type="button" value="隔行變色" id="btn" /> <script src="common.js"></script> <script> my$("btn").onclick = function () { //獲取ul中所有的子節點 var count = 0; //記錄有多少li var nodes = my$("uu").childNodes; for (var i = 0; i < nodes.length; i++) { //判斷這個節點是不是li標簽 if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") { nodes[i].style.backgroundColor = count % 2 == 0 ? "pink" : "yellow"; count++; } } }; </script> </body>
案例3：封裝節點相容代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <ul id="uu"> <li>第一個</li> <li>第二個</li> <li>第三個</li> <li>第四個</li> <li>第五個</li> </ul> <script src="common.js"></script> <script> //獲取任意一個父級元素的第一個子級元素 function getFirstElementChild(element) { if(element.firstElementChild){//true--->支持 return element.firstElementChild; }else{ var node=element.firstChild;//第一個節點 while (node&&node.nodeType!=1){ node=node.nextSibling; } return node; } } //獲取任意一個父級元素的最後一個子級元素 function getLastElementChild(element) { if(element.lastElementChild){//true--->支持 return element.lastElementChild; }else{ var node=element.lastChild;//第一個節點 while (node&&node.nodeType!=1){ node=node.previousSibling; } return node; } } console.log(getFirstElementChild(my$("uu")).innerText); console.log(getLastElementChild(my$("uu")).innerText); //最後一個節點和最後一個元素的獲取的代碼在IE8中可能不支持 //前一個節點和前一個元素的獲取的代碼在IE8中可能不支持 //後一個節點和後一個元素的獲取的代碼在IE8中可能不支持 //學習節點操作還是為了操作元素 </script> </body> </html>
案例4：切換背景圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>哈哈,我又變帥了</title> <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> </head> <body id="bd"> <div id="mask"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> </div> <script src="common.js"></script> <script> //獲取的所有的子元素 var imgObjs = my$("mask").children; for (var i = 0; i < imgObjs.length; i++) { //迴圈遍歷所有img,註冊點擊事件 imgObjs[i].onclick = function () { document.body.style.backgroundImage = "url(" + this.src + ")"; }; } </script> </body> </html>
案例5：
1. 全選的時候，覆選框裡面狀態和全選一致
2. 覆選的時候，迴圈覆選框，有一個不選中全選就flase
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } 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> </head> <body> <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> <script src="common.js"></script> <script> //獲取全選的這個覆選框 var ckAll = my$("j_cbAll"); //獲取tbody中所有的小覆選框 var ckSmall = my$("j_tb").getElementsByTagName("input"); //點擊全選的這個覆選框, 獲取他當前的狀態, 然後設置tbody中所有覆選框的狀態 ckAll.onclick = function () { for (var i = 0; i < ckSmall.length; i++) { ckSmall[i].checked = this.checked; } }; //獲取tbody中所有的覆選框,分別註冊點擊事件 for (var i = 0; i < ckSmall.length; i++) { ckSmall[i].onclick = function () { var flag = true;//預設都被選中了 for (var j = 0; j < ckSmall.length; j++) { //判斷是否所有的覆選框都選中 if (!ckSmall[j].checked) { flag = false; break; } } //全選的這個覆選框的狀態就是flag這個變數的值 ckAll.checked = flag; }; } </script> </body> </html>
案例6：
