<!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>
(写错一个字母查找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>
<!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>
<!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>
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>
如对本文有疑问, 点击进行留言回复!!
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
网友评论