经典案例（使用获取节点和元素的方法） · 前端菜鸟成长记

[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); } }; ``` ```