- 带有Element和不带的区别
a) 带Element的获取的是元素节点
b) 不带可能获取文本节点和属性节点
- 获取所以子节点
a) . childNodes
b) . children
c) . parentNode . children [索引]
- . children:获取所有子节点
- opacity:0-1;透明度
- alpha(opacity:百分数);IE6/7/8透明度
- 先绑定事件再进行循环
- previousNode()上一个兄弟节点
- alert(变量名)可测试变量名是否可以使用
- 获取body,var body = document.body;
设置样式的两种方式
style
- 行内式可以获取打印出来
- 内嵌和外链的获取不了
- 样式少的时候使用
- 驼峰命名规则
- style属性是对象属性
- 值是字符串类型,没设置的时候是“空字符串”
- .style. cssText = “字符串形式的样式”
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #list li { 8 list-style-type: none; 9 width: 80px; 10 height: 30px; 11 line-height: 30px; 12 background-color:beige; 13 text-align: center; 14 float: left; 15 margin-left: 5px; 16 } 17 18 #list li.current { 19 background-color: burlywood; 20 } 21 22 #list li a {#list li { 23 list-style-type: none; 24 width: 80px; 25 height: 30px; 26 line-height: 30px; 27 background-color:beige; 28 text-align: center; 29 float: left; 30 margin-left: 5px; 31 } 32 33 #list li.current { 34 background-color: burlywood; 35 } 36 37 #list li a { 38 text-decoration: none; 39 }#list li { 40 list-style-type: none; 41 width: 80px; 42 height: 30px; 43 line-height: 30px; 44 background-color:beige; 45 text-align: center; 46 float: left; 47 margin-left: 5px; 48 } 49 50 #list li.current { 51 background-color: burlywood; 52 } 53 54 #list li a { 55 text-decoration: none; 56 }#list li { 57 list-style-type: none; 58 width: 80px; 59 height: 30px; 60 line-height: 30px; 61 background-color:beige; 62 text-align: center; 63 float: left; 64 margin-left: 5px; 65 } 66 67 #list li.current { 68 background-color: burlywood; 69 } 70 71 #list li a { 72 text-decoration: none; 73 }#list li { 74 list-style-type: none; 75 width: 80px; 76 height: 30px; 77 line-height: 30px; 78 background-color:beige; 79 text-align: center; 80 float: left; 81 margin-left: 5px; 82 } 83 84 #list li.current { 85 background-color: burlywood; 86 } 87 88 #list li a { 89 text-decoration: none; 90 } 91 text-decoration: none; 92 } 93 </style> 94 <script src="tools.js"></script> 95 <script> 96 window.onload = function () { 97 //需求:点击a链接,让a链接对应的li标签添加类。 98 //思路:点击a链接,让他的父亲添加类,其他的li标签类名清空。 99 //步骤: 100 //1.获取事件源 101 //2.绑定事件 102 //3.书写事件驱动程序 103 104 105 //1.获取事件源 106 var ul = getEle("list"); 107 var aArr = ul.getElementsByTagName("a"); 108 109 for(var i=0;i<aArr.length;i++){ 110 aArr[i].onclick = function () { 111 //点击哪个a链接,让他的父亲添加类 112 this.parentNode.className = "current"; 113 //设置他的父元素的其他所有兄弟节点类名为空 114 var otherArr = getAllSiblings(this.parentNode); 115 for(var j=0;j<otherArr.length;j++){ 116 otherArr[j].className = ""; 117 } 118 } 119 } 120 121 // //1.获取事件源 122 // var ul = getEle("list"); 123 // var liArr = ul.children; 124 // //2.绑定事件 125 // for(var i=0;i<liArr.length;i++){ 126 // var a = getFirstNode(liArr[i]); 127 // a.onclick = function () { 128 // //3.书写事件驱动程序 129 // //排他思想 130 // for(var j=0;j<liArr.length;j++){ 131 // liArr[j].className = ""; 132 // } 133 // this.parentNode.className = "current"; 134 // } 135 // } 136 } 137 </script> 138 </head> 139 <body> 140 141 <div id="menu"> 142 <ul id="list"> 143 <li class="current"><a href="#">首页</a></li> 144 <li><a href="javascript:void(0)">播客</a></li> 145 <li><a href="javascript:void(0)">博客</a></li> 146 <li><a href="javascript:void(0)">相册</a></li> 147 <li><a href="javascript:void(0)">关于</a></li> 148 <li><a href="javascript:void(0)">帮助</a></li> 149 </ul> 150 </div> 151 152 </body> 153 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #list li { 8 list-style-type: none; 9 width: 80px; 10 height: 30px; 11 line-height: 30px; 12 background-color:beige; 13 text-align: center; 14 float: left; 15 margin-left: 5px; 16 } 17 18 #list li.current { 19 background-color: burlywood; 20 } 21 22 #list li a {#list li { 23 list-style-type: none; 24 width: 80px; 25 height: 30px; 26 line-height: 30px; 27 background-color:beige; 28 text-align: center; 29 float: left; 30 margin-left: 5px; 31 } 32 33 #list li.current { 34 background-color: burlywood; 35 } 36 37 #list li a { 38 text-decoration: none; 39 }#list li { 40 list-style-type: none; 41 width: 80px; 42 height: 30px; 43 line-height: 30px; 44 background-color:beige; 45 text-align: center; 46 float: left; 47 margin-left: 5px; 48 } 49 50 #list li.current { 51 background-color: burlywood; 52 } 53 54 #list li a { 55 text-decoration: none; 56 }#list li { 57 list-style-type: none; 58 width: 80px; 59 height: 30px; 60 line-height: 30px; 61 background-color:beige; 62 text-align: center; 63 float: left; 64 margin-left: 5px; 65 } 66 67 #list li.current { 68 background-color: burlywood; 69 } 70 71 #list li a { 72 text-decoration: none; 73 }#list li { 74 list-style-type: none; 75 width: 80px; 76 height: 30px; 77 line-height: 30px; 78 background-color:beige; 79 text-align: center; 80 float: left; 81 margin-left: 5px; 82 } 83 84 #list li.current { 85 background-color: burlywood; 86 } 87 88 #list li a { 89 text-decoration: none; 90 } 91 text-decoration: none; 92 } 93 </style> 94 <script src="tools.js"></script> 95 <script> 96 window.onload = function () { 97 //需求:点击a链接,让a链接对应的li标签添加类。 98 //思路:点击a链接,让他的父亲添加类,其他的li标签类名清空。 99 //步骤: 100 //1.获取事件源 101 //2.绑定事件 102 //3.书写事件驱动程序 103 104 105 //1.获取事件源 106 var ul = getEle("list"); 107 var aArr = ul.getElementsByTagName("a"); 108 109 for(var i=0;i<aArr.length;i++){ 110 aArr[i].onclick = function () { 111 //点击哪个a链接,让他的父亲添加类 112 this.parentNode.className = "current"; 113 //设置他的父元素的其他所有兄弟节点类名为空 114 var otherArr = getAllSiblings(this.parentNode); 115 for(var j=0;j<otherArr.length;j++){ 116 otherArr[j].className = ""; 117 } 118 } 119 } 120 121 // //1.获取事件源 122 // var ul = getEle("list"); 123 // var liArr = ul.children; 124 // //2.绑定事件 125 // for(var i=0;i<liArr.length;i++){ 126 // var a = getFirstNode(liArr[i]); 127 // a.onclick = function () { 128 // //3.书写事件驱动程序 129 // //排他思想 130 // for(var j=0;j<liArr.length;j++){ 131 // liArr[j].className = ""; 132 // } 133 // this.parentNode.className = "current"; 134 // } 135 // } 136 } 137 </script> 138 </head> 139 <body> 140 141 <div id="menu"> 142 <ul id="list"> 143 <li class="current"><a href="#">首页</a></li> 144 <li><a href="javascript:void(0)">播客</a></li> 145 <li><a href="javascript:void(0)">博客</a></li> 146 <li><a href="javascript:void(0)">相册</a></li> 147 <li><a href="javascript:void(0)">关于</a></li> 148 <li><a href="javascript:void(0)">帮助</a></li> 149 </ul> 150 </div> 151 152 </body> 153 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <body> 2 <div style="width: 100px;height: 100px;background-color: pink;"></div> 3 <script> 4 5 var div = document.getElementsByTagName("div")[0]; 6 div.onmouseover = function () { 7 div.style.width = "200px"; 8 div.style.height = "200px"; 9 div.style.backgroundColor = "black"; 10 div.style.opacity = "0.2"; 11 div.style.filter = "alpha(opacity=20)"; 12 } 13 14 </script> 15 16 </body>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 input { 8 display: block; 9 } 10 </style> 11 </head> 12 <body> 13 <ul> 14 <input type="text"/> 15 <input type="text"/> 16 <input type="text"/> 17 <input type="text"/> 18 <input type="text"/> 19 <button>设置</button> 20 </ul> 21 <script> 22 //需求:点击设置按钮,让所有的input标签获取焦点后高亮显示 23 //步骤: 24 //1.获取事件源 25 //2.绑定事件 26 //3.书写事件驱动程序 27 28 //1.获取事件源 29 var inpArr = document.getElementsByTagName("input"); 30 var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ; 31 //2.绑定事件 32 button.onclick = function () { 33 //3.书写事件驱动程序 34 for(var i=0;i<inpArr.length;i++){ 35 //当button按钮被点击以后,所有的input标签被绑定事件,onfocus事件 36 inpArr[i].onfocus = function () { 37 this.style.border = "2px solid red"; 38 this.style.backgroundColor = "#ccc"; 39 } 40 //绑定onblur事件,取消样式 41 inpArr[i].onblur = function () { 42 this.style.border = ""; 43 this.style.backgroundColor = ""; 44 } 45 } 46 } 47 48 49 50 </script> 51 </body> 52 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; text-align: center; } .wrap { width: 500px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; } 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; cursor: pointer; } .current { background-color: red!important; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>课程</th> <th>成绩</th> </tr> </thead> <tbody id="target"> <tr> <td> 1 </td> <td>吕不韦</td> <td>语文</td> <td>100</td> </tr> <tr> <td> 2 </td> <td>吕布</td> <td>日语</td> <td>100</td> </tr> <tr> <td> 3 </td> <td>吕蒙</td> <td>营销学</td> <td>100</td> </tr> <tr> <td> 4 </td> <td>吕尚</td> <td>数学</td> <td>100</td> </tr> <tr> <td> 5 </td> <td>吕雉</td> <td>英语</td> <td>100</td> </tr> <tr> <td> 6 </td> <td>吕超</td> <td>体育</td> <td>100</td> </tr> </tbody> </table> </div> <script> //需求:让tr各行变色,鼠标放入tr中,高亮显示。 //1.隔行变色。 var tbody = document.getElementById("target"); var trArr = tbody.children; //循环判断并各行赋值属性(背景色) for(var i=0;i<trArr.length;i++){ if(i%2!==0){ trArr[i].style.backgroundColor = "#a3a3a3"; }else{ trArr[i].style.backgroundColor = "#ccc";ß } //鼠标进入高亮显示 //难点:鼠标移开的时候要回复原始颜色。 //计数器(进入tr之后,立刻记录颜色,然后移开的时候使用记录好的颜色) var color = ""; trArr[i].onmouseover = function () { //赋值颜色之前,先记录颜色 color = this.style.backgroundColor; this.style.backgroundColor = "#fff"; } trArr[i].onmouseout = function () { this.style.backgroundColor = color; } } </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } body { background: url(image/1.jpg) no-repeat; } .box { height: 165px; padding-top: 35px; text-align: center; background: rgba(255,255,255,0.3); } img { cursor: pointer; margin: 0 10px; } </style> </head> <body> <div class="box"> <img src="image/1.jpg" alt="" width="200px"/> <img src="image/2.jpg" alt="" width="200px"/> <img src="image/3.jpg" alt="" width="200px"/> <img src="image/4.jpg" alt="" width="200px"/> <img src="image/5.jpg" alt="" width="200px"/> </div> <script> //需求:点击图片,body的背景图修改。 //步骤: //1.获取事件源 //2.绑定事件 //3.书写事件驱动程序 //1.获取事件源 var box = document.getElementsByTagName("div")[0]; //body的获取js内部帮我们优化完毕 var body = document.body; var imgArr = box.children; //2.绑定事件 for(var i=0;i<imgArr.length;i++){ imgArr[i].index = i; imgArr[i].onclick = function () { //3.书写事件驱动程序 //改body的背景 // body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)"; body.style.backgroundImage = "url("+this.src+")"; } } </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 body { 12 background: url(image/1.jpg) no-repeat; 13 } 14 .box { 15 height: 165px; 16 padding-top: 35px; 17 text-align: center; 18 background: rgba(255,255,255,0.3); 19 } 20 img { 21 cursor: pointer; 22 margin: 0 10px; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="box"> 28 <img src="image/1.jpg" alt="" width="200px"/> 29 <img src="image/2.jpg" alt="" width="200px"/> 30 <img src="image/3.jpg" alt="" width="200px"/> 31 <img src="image/4.jpg" alt="" width="200px"/> 32 <img src="image/5.jpg" alt="" width="200px"/> 33 </div> 34 35 <script> 36 //需求:点击图片,body的背景图修改。 37 //步骤: 38 //1.获取事件源 39 //2.绑定事件 40 //3.书写事件驱动程序 41 42 //1.获取事件源 43 var box = document.getElementsByTagName("div")[0]; 44 //body的获取js内部帮我们优化完毕 45 var body = document.body; 46 var imgArr = box.children; 47 //2.绑定事件 48 for(var i=0;i<imgArr.length;i++){ 49 imgArr[i].index = i; 50 imgArr[i].onclick = function () { 51 //3.书写事件驱动程序 52 //改body的背景 53 // body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)"; 54 body.style.backgroundImage = "url("+this.src+")"; 55 } 56 } 57 </script> 58 59 </body> 60 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 margin-top: 20px; 9 width: 200px; 10 height: 200px; 11 background-color: red; 12 position: absolute; 13 top: 100px; 14 left: 10px; 15 z-index: 1; 16 } 17 img { 18 position: absolute; 19 top: 100px; 20 left: 10px; 21 } 22 </style> 23 </head> 24 <body> 25 <button>进化吧,皮卡丘!!!</button> 26 <div></div> 27 <img src="image/mm.png" alt="" width="200px"/> 28 29 <script> 30 //需求:点击按钮,让盒子和图片同事移开,并且,图片压住盒子. 31 var btn = document.getElementsByTagName("button")[0]; 32 var div = document.getElementsByTagName("div")[0]; 33 var img = document.getElementsByTagName("img")[0]; 34 35 //绑定事件 36 btn.onclick = function () { 37 div.style.top = "300px"; 38 div.style.left = "300px"; 39 40 img.style.top = "300px"; 41 img.style.left = "300px"; 42 img.style.zIndex = "2"; 43 } 44 </script> 45 46 </body> 47 </html>
dom元素的创建方法
1.documrnt.write(“<li></li>”)
A) script写在那就创建在那
B) 会被覆盖
2.parentNode.innerHTML += “<li></li>”
3.已有节点.appendChild(创建的节点);追加新节点到已有节点的最后面
var ul = document.getElementsByTagName('ul')[0]; //获取已有元素
var li = document.createElement('li'); //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
ul.appendChild(li); //把li标签追加到ul最后面
li.appendChild(liText); //把文本节点追加到li标签中
4.已有节点.insertBefore(创建的节点,已有节点的子节点节点);在已有节点的子节点之前创建一个新的节点
var ul = document.getElementsByTagName('ul')[0]; //获取已有元素
var li = document.createElement('li'); //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName('li')[2]; //获取ul的一个子节点
ul.insertBefore(li,list); //添加在list标签之前
5.删除 父节点.removeChild(要删除的子节点);
A) var ul = document.getElementsByTagName('ul')[0]; //获取已有元素
var li = document.createElement('li'); //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
var list = document.getElementsByTagName('li')[2]; //获取ul的一个子节点
ul.removeChild(list); //删除ul里的list节点
list.parentNode.removeChild(list); //现照到list的父元素,在进行删除,可以不定义父元素
6.替换 父节点.replaceChild(新节点,老节点);
A) var ul = document.getElementsByTagName('ul')[0]; //创建一个文本节点
var li = document.createElement('li'); //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName('li')[2]; //replaceChild 替换节点
ul.replaceChild(liText,list); //liText替换叼list
7.克隆 var 变量 = 被克隆的节点.cloneNode(true); (如果true改为false,那么将克隆一个空节点)
var newNode = li.cloneNode(true); //克隆一个li节点给变量newNode
ul.appendChild (newNode); //将克隆的节点添加到ul之后
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button>创建</button> 9 <ul> 10 aaaaa 11 </ul> 12 <script> 13 //第一种创建方式:document.write(); 14 document.write("<li>我是document.write创建的</li>"); 15 16 var btn = document.getElementsByTagName("button")[0]; 17 var ul = document.getElementsByTagName("ul")[0]; 18 // btn.onclick = function () { 19 // document.write("<li>我是document.write创建的</li>"); 20 // } 21 22 //第二种:直接利用元素的innerHTNL方法。(innerText方法不识别标签) 23 ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"; 24 25 26 //第三种:利用dom的api创建元素 27 var newLi = document.createElement("li"); 28 newLi.innerHTML = "我是createElement创建的"; 29 // console.log(newLi); 30 //在父元素的最后面添加元素。 31 // ul.appendChild(newLi); 32 //指定位置添加 33 var li1 = document.getElementById("li1"); 34 ul.insertBefore(newLi,li1); 35 36 37 </script> 38 39 40 </body> 41 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li id="li1">我是参照标签</li> 10 </ul> 11 12 <script> 13 //document.write();不常用,因为容易覆盖原来的页面。 14 //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点) 15 //document.createElement;也是比较多的,指定数量的时候一般用它。 16 17 var ul = document.getElementsByTagName("ul")[0]; 18 var li1 = document.getElementById("li1"); 19 20 //创建,添加,删除,替换 21 var li2 = document.createElement("li"); 22 li2.innerText = "我是createElement创建的标签,用的是appendChild的方法添加的"; 23 ul.appendChild(li2); 24 //用insertBefore添加 25 var li3 = document.createElement("li"); 26 li3.innerText = "我是createElement创建的标签,用的是insertBefore的方法添加的" 27 //父节点.insertBefore(新节点,参照节点); 28 ul.insertBefore(li3,li1); 29 30 31 //删除,替换 32 ul.removeChild(li3); 33 //父节点.replaceChild(newNode,oldNode); 34 ul.replaceChild(li3,li2); 35 36 //克隆node.cloneNode(true);深层复制。 37 for(var i=0;i<=3;i++){ 38 var newLi = li3.cloneNode(true); 39 ul.appendChild(newLi); 40 } 41 42 43 </script> 44 </body> 45 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { cursor: pointer; } </style> </head> <body> <button>创建列表</button> <ul></ul> <script> //需求:点击列表,添加四大名人,然后鼠标放到谁上面,谁高亮显示。 //思路:创建一个数组,添加内容。利用for循环穿件li标签在添加内容,高亮显示。 //步骤:(指定多少个元素的创建最好用for循环) //老三步 var btn = document.getElementsByTagName("button")[0]; //获取相关元素并定义内容 var arr = ["黑崎一护","乌尔奇奥拉","冰轮丸","名侦探柯南"]; var ul = document.getElementsByTagName("ul")[0]; btn.onclick = function () { // ul.innerHTML = ""; for(var i=0;i<arr.length;i++){ //创建li元素 var newLi = document.createElement("li"); newLi.innerHTML += "<li>"+arr[i]+"</li>"; //添加到ul中 ul.appendChild(newLi); } //获取所有的li标签然后,为他绑定事件,排他思想,高亮显示 var liArr = ul.children; //为所有的li绑定事件 for(var i=0;i<liArr.length;i++){ liArr[i].onmouseover = function () { //排他思想,高亮显示 for(var j=0;j<liArr.length;j++){ liArr[j].style.backgroundColor = ""; } this.style.backgroundColor = "red"; } } } </script> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 margin: 0 auto; 9 padding: 0px; 10 font-size: 12px; 11 background: url(image/bg.gif) repeat center 36px; 12 text-align: center; 13 background-color: #c30230; 14 } 15 #content { 16 margin: 0 auto; 17 width: 960px; 18 background: url(image/content_bg.jpg) no-repeat left top; 19 height: 627px; 20 position: relative; 21 } 22 23 #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 { 24 position: absolute; 25 width: 227px; 26 left: 200px; 27 top: 100px; 28 } 29 30 #content .tip1 .tip_h { 31 background: url(image/tip1_h.gif) no-repeat left top; 32 } 33 34 #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h { 35 width: 227px; 36 padding-top: 45px; 37 height: 23px; 38 text-align: left; 39 cursor: move; 40 } 41 #content .tip1 .tip_c { 42 background: url(image/tip1_c.gif) repeat-y; 43 } 44 45 #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c { 46 width: 200px; 47 padding-left: 12px; 48 padding-right: 15px; 49 min-height: 40px; 50 text-align: left; 51 line-height: 20px; 52 max-height: 160px; 53 word-wrap: break-word; 54 word-break: break-all; 55 overflow: hidden; 56 } 57 58 #content .tip1 .tip_f { 59 background: url(image/tip1_f.gif) no-repeat left top; 60 } 61 62 #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f { 63 width: 227px; 64 height: 53px; 65 padding-top: 20px; 66 } 67 #content .close, #content .close2 { 68 float: left; 69 font-size: 12px; 70 cursor: pointer; 71 color: #000000; 72 } 73 .clr { 74 clear: both; 75 overflow: auto; 76 display: block; 77 height: 0px; 78 } 79 #content .icon { 80 float: left; 81 width: 35px; 82 padding-left: 15px; 83 height: 35px; 84 text-align: center; 85 } 86 #content .name { 87 float: right; 88 padding-right: 15px; 89 text-align: right; 90 font-size: 14px; 91 line-height: 35px; 92 color: #C0F; 93 } 94 #content .num { 95 float: left; 96 padding-left: 7px; 97 width: 195px; 98 } 99 </style> 100 </head> 101 <body> 102 <!--纸条墙--> 103 <div id="content"> 104 <!--纸条--> 105 <div class="tip1" id="tip" > 106 <div class="tip_h" title="双击关闭纸条"> 107 <div class="num">第[49568]条 2016-07-7 22:51:52</div> 108 <div class="close" title="关闭纸条" >×</div> 109 <div class="clr"></div> 110 </div> 111 <div class="tip_c"> 112 普天同庆,天下大同! 113 </div> 114 <div class="tip_f"> 115 <div class="icon"> 116 <img src="image/bpic_1.gif" alt="" title=""> 117 </div> 118 <div class="name">不愿意透露姓名的吕先生</div> 119 <div class="clr"></div> 120 </div> 121 </div> 122 </div> 123 124 <script> 125 //需求:克隆盒子,然后随机位置,点击纸条的时候压住其他的纸条。 126 //思路:获取纸条,克隆,随机数值绑定到纸条上,添加到父盒子中,然后绑定事件层级最高。 127 //步骤: 128 //1.获取纸条,克隆 129 //2.随机数值绑定到纸条上 130 //3.添加到父盒子中 131 //4.然后绑定事件层级最高 132 133 //0.创建多张纸条 134 for(var i=1;i<=10;i++){ 135 //1.获取纸条,克隆 136 var tip = document.getElementById("tip"); 137 var content = document.getElementById("content"); 138 var newTip = tip.cloneNode(true); 139 //问题:id问题。 140 newTip.id = newTip.id+i; 141 //2.随机数值绑定到纸条上(top不要超过400,left不要超过700) 142 var topValue = parseInt(Math.random()*400);//(取值是0-1,那么乘以400,取值就是0-400) 143 var leftValue = parseInt(Math.random()*700);//小数取整 144 newTip.style.top = topValue+"px"; 145 newTip.style.left = leftValue+"px"; 146 //3.添加到父盒子中 147 content.appendChild(newTip); 148 149 //4.然后绑定事件层级最高 150 newTip.onclick = fn; 151 } 152 //tip本身有问题,没有绑定事件。(1.删除。 2.在绑定一次) 153 tip.onclick = fn; 154 // tip.parentNode.removeChild(tip); 155 //获取所有类名叫做的tip1标签,然后绑定事件。 156 var index = 1; 157 function fn() { 158 //计数器 159 this.style.zIndex = index; 160 index++; 161 } 162 163 164 // 点击关闭 隐藏盒子 165 166 var close = document.getElementsByClassName("close"); 167 for (i=0;i<close.length;i++) { 168 close[i].onclick = function () { 169 this.parentNode.parentNode.style.display = "none"; 170 } 171 } 172 173 </script> 174 175 176 177 </body> 178 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 select { 8 width: 180px; 9 height: 240px; 10 font-size: 16px; 11 background-color: #7dff51; 12 } 13 </style> 14 <script> 15 window.onload = function () { 16 //需求:点击>>>左边的所有选项全部进入右边, 17 //点击<<<右边的所有选项全部进入左边。 18 //思路:获取所有的子元素,然后直接添加到另一侧。 19 20 //获取相关元素 21 var sel1 = document.getElementById("sel1"); 22 var sel2 = document.getElementById("sel2"); 23 var btnArr = document.getElementsByTagName("button"); 24 25 //绑定事件 26 btnArr[0].onclick = function () { 27 //获取左侧的select标签的所有子元素 28 var arr = sel1.children; 29 //遍历添加到右侧(随着左侧标签内元素的减少,数组的长度也会减少,那么) 30 for(var i=arr.length-1;i>=0;i--){ 31 //push()是操作数组的。要往一个标签中添加元素,要用appendChild(); 32 //而往另外一个标签中添加元素原来的数组长度容易变化,为了防止跳出循环,我们使用反向遍历数组 33 sel2.appendChild(arr[arr.length-1-i]); 34 } 35 } 36 37 btnArr[1].onclick = function () { 38 //获取左侧的select标签的所有子元素 39 var arr = sel2.children; 40 //遍历添加到右侧(随着左侧标签内元素的减少,数组的长度也会减少,那么) 41 for(var i=arr.length-1;i>=0;i--){ 42 //push()是操作数组的。要往一个标签中添加元素,要用appendChild(); 43 //而往另外一个标签中添加元素原来的数组长度容易变化,为了防止跳出循环,我们使用反向遍历数组 44 sel1.appendChild(arr[arr.length-1-i]); 45 } 46 } 47 48 btnArr[2].onclick = function () { 49 var arr = sel1.children; 50 sel2.appendChild(arr[arr.length-1]); 51 }; 52 btnArr[3].onclick = function () { 53 var arr = sel2.children; 54 sel1.appendChild(arr[arr.length-1]); 55 } 56 57 58 } 59 </script> 60 </head> 61 <body> 62 <!-- multiple --> 63 <select name="" size="10" id="sel1" multiple> 64 <option value="">香蕉</option> 65 <option value="">苹果</option> 66 <option value="">鸭梨</option> 67 <option value="">葡萄</option> 68 </select> 69 <button>>>></button> 70 <button><<<</button> 71 <button>></button> 72 <button><</button> 73 <select name="" size="10" id="sel2" multiple> 74 75 </select> 76 </body> 77 </html>