点击刷新
在上一篇DOM的基础上，继续案例的实践。
一：案例
1.禁用文本框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="禁用文本框" id="btn1"> 9 <input type="text" value="文本框" id="text"> 10 <script> 11 var btn1=document.getElementById("btn1"); 12 btn1.onclick=function () { 13 document.getElementById("text").disabled=true; 14 } 15 </script> 16 </body> 17 </html>
效果：
2.点击超链接，在下面出现一个大图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="image/00_1.png" id="ak"> 9 <img src="image/00_2.jpg" alt=""> 10 </a><br> 11 <img src="" alt="" id="big"> 12 <script> 13 document.getElementById("ak").onclick=function () { 14 document.getElementById("big").src=document.getElementById("ak").href; 15 return false; 16 } 17 </script> 18 </body> 19 </html>
效果：
3.相册
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 img { 8 width: 150px; 9 height: 100%; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="image/00_3.jpg" title="A"> 15 <img src="image/00_3.jpg" alt="111" title="A"> 16 </a> 17 <a href="image/00_5.jpg" title="B"> 18 <img src="image/00_5.jpg" alt="" title="B"> 19 </a> 20 <a href="image/00_6.jpg" title="C"> 21 <img src="image/00_6.jpg" alt="" title="C"> 22 </a> 23 <a href="image/00_7.jpg" title="D"> 24 <img src="image/00_7.jpg" alt="" title="D"> 25 </a> 26 27 <br> 28 <img src="" alt="" id="image" style="width: 600px;"> 29 <p id="des">选择一个图片</p> 30 31 32 <script> 33 var a = document.getElementsByTagName("a"); 34 for (var i=0;i<a.length;i++){ 35 a[i].onclick=function () { 36 document.getElementById("image").src=this.href; 37 document.getElementById("des").innerText=this.title; 38 return false; 39 } 40 } 41 </script> 42 </body> 43 </html>
效果：
4.隔行变色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 li { 8 list-style: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="button" value="隔行变色" id="btn"> 14 <ul id="ul"> 15 <li>色白板擦</li> 16 <li>无色的农维年费</li> 17 <li>列为可能粉扑舞IE牛排</li> 18 <li>明晚地玻尿酸单车呢</li> 19 <li>依然未必</li> 20 <li>美津浓你后悔</li> 21 <li>不能说地方居委会吃</li> 22 <li><问客服部农委非农></问客服部农委非农></li> 23 </ul> 24 <script> 25 document.getElementById("btn").onclick=function () { 26 var li = document.getElementById("ul").getElementsByTagName("li"); 27 for (var i=0;i<li.length;i++){ 28 if (i%2==0){ 29 li[i].style.backgroundColor="#ccc"; 30 } else{ 31 li[i].style.backgroundColor="#aaa"; 32 } 33 } 34 } 35 36 37 </script> 38 </body> 39 </html>
效果：
5.鼠标经过变色
这里这要是鼠标的事件。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 li { 8 list-style: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="button" value="鼠标经过变色" id="btn"> 14 <ul id="ul"> 15 <li>色白板擦</li> 16 <li>无色的农维年费</li> 17 <li>列为可能粉扑舞IE牛排</li> 18 <li>明晚地玻尿酸单车呢</li> 19 <li>依然未必</li> 20 <li>美津浓你后悔</li> 21 <li>不能说地方居委会吃</li> 22 <li><问客服部农委非农></问客服部农委非农></li> 23 </ul> 24 <script> 25 document.getElementById("btn").onclick=function () { 26 var li = document.getElementById("ul").getElementsByTagName("li"); 27 for (var i=0;i<li.length;i++){ 28 // 29 li[i].onmouseover=function () { 30 this.style.backgroundColor="yellow"; 31 } 32 // 33 li[i].onmouseout=function () { 34 //恢复事件 35 this.style.backgroundColor=""; 36 } 37 } 38 } 39 40 41 </script> 42 </body> 43 </html>
效果：
6.鼠标经过二维码的展示与离开
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .nodeSmall { 8 width: 50px; 9 height: 50px; 10 background: url(image/bgs.png) no-repeat -159px -51px; 11 position: fixed; 12 right: 10px; 13 top: 40%; 14 } 15 .erweima { 16 position: absolute; 17 top: 0; 18 left: -150px; 19 } 20 .nodeSmall a { 21 display: block; 22 width: 50px; 23 height: 50px; 24 } 25 .hide { 26 display: none; 27 } 28 .show { 29 display: block; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="nodeSmall" id="node_small"> 35 <a href="#"></a><!--锚定--> 36 <div class="erweima hide" id="er"> 37 <img src="image/456.png" alt=""/> 38 </div> 39 </div> 40 <script> 41 var a = document.getElementById("node_small").getElementsByTagName("a")[0]; 42 a.onmouseover=function () { 43 document.getElementById("er").className="erweima show"; 44 } 45 a.onmouseout=function () { 46 document.getElementById("er").className="erweima hide"; 47 } 48 </script> 49 </body> 50 </html>
效果：
7.根据表单标签的name值，获取value
有一个新的函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="获取" id="btn"><br> 9 <input type="text" name="AAA"><br> 10 <input type="text" name="BBB"><br> 11 <input type="text" name="CCC"><br> 12 <input type="text" name="AAA"><br> 13 <script> 14 document.getElementById("btn").onclick=function(){ 15 var names=document.getElementsByName("AAA"); 16 for (var i=0;i<names.length;i++){ 17 names[i].value=names[i].name; 18 } 19 } 20 21 </script> 22 </body> 23 </html>
效果：
8.根据类的样式来获取元素
有新函数，但是兼容性需要考虑，因为属于H5的
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .dv { 8 width: 200px; 9 height: 50px; 10 background-color: #ccc; 11 margin-top: 20px; 12 } 13 .dv2 { 14 width: 200px; 15 height: 50px; 16 background-color: red; 17 margin-top: 20px; 18 } 19 </style> 20 </head> 21 <body> 22 <p>额佛典欧恩</p> 23 <p>么破门委们</p> 24 <span class="dv">读课文你发我呢</span><br> 25 <span>拍农产品</span><br> 26 <div class="dv"> 27 23233223ljhfnpoweijfn 28 </div> 29 30 <script> 31 //根据样式class获取 32 var dv =document.getElementsByClassName("dv"); 33 for (var i=0;i<dv.length;i++){ 34 dv[i].onmouseover=function () { 35 this.className="dv2"; 36 } 37 dv[i].onmouseout=function () { 38 this.className="dv"; 39 } 40 } 41 </script> 42 </body> 43 </html>
效果：
9.根据选择器获取元素
这个是根据id来获取。
也属于H5的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="效果" id="btn"> 9 <script> 10 var btn = document.querySelector("#btn"); 11 btn.onclick=function () { 12 alert("njmnjnjolin"); 13 } 14 </script> 15 </body> 16 </html>
效果：
10.获取焦点与失去焦点
主要是失去焦点与获取焦点的事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <input type="text" value="输入内容" id="btn"> 10 <script> 11 var btn = document.querySelector("#btn"); 12 btn.onfocus=function () { 13 if(this.value=="输入内容"){ 14 this.value=""; 15 this.style.color="black"; 16 } 17 } 18 btn.onblur=function () { 19 if(this.value.length==0){ 20 this.value="输入内容"; 21 this.style.color="gray"; 22 } 23 } 24 </script> 25 </body> 26 </html>
11.innerText，textContext，与兼容代码
说明在代码中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 width: 300px; 9 height: 200px; 10 background-color: #ccc; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="输入内容" id="btn"> 16 <div id="dv"></div> 17 <script> 18 var btn = document.querySelector("#btn"); 19 btn.onclick=function () { 20 // IE8不支持textContent，其他浏览器都支持；然后innerText是IE8的标准，都支持，不过火狐版本低时不支持 21 // document.getElementById("dv").textContent="洗净忧伤的尘埃"; 22 // document.getElementById("dv").innerText="洗净忧伤的尘埃"; 23 24 //因此，写兼容代码，判断这个属性的类型，如果是undefined，则不支持 25 //设置任意的标签中间的任意文本内容 26 function setInnerText(ele,text) { 27 //判断浏览器是否支持这个属性 28 if(typeof ele.textContent=="undefined"){ 29 ele.innerText=text; 30 }else { 31 ele.textContent=text; 32 } 33 } 34 35 var text="洗净忧伤的尘埃"; 36 setInnerText(document.getElementById("dv"),text); 37 } 38 </script> 39 </body> 40 </html>
效果：
12.innerHtml
所有的浏览器都支持。
所以，推荐使用。
主要的功能是在标签中设置新的html标签内容，有显示效果。
二：自定义属性
1.获取li的自定义属性
获取自定义属性，使用getAttribute函数。直接点是不能获取的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 li { 8 cursor: pointer; 9 list-style: none; 10 } 11 </style> 12 </head> 13 <body> 14 <ul id="ul"> 15 <li score="20">数学</li> 16 <li score="30">英语</li> 17 <li score="40">语文</li> 18 <li score="50">体育</li> 19 </ul> 20 <script> 21 var li = document.getElementById("ul").getElementsByTagName("li"); 22 for (var i=0;i<li.length;i++){ 23 li[i].onclick=function () { 24 alert(this.getAttribute("score")); 25 } 26 } 27 </script> 28 </body> 29 </html>
效果：
2.给标签添加自定义属性
使用setAttribute函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 li { 8 cursor: pointer; 9 list-style: none; 10 } 11 </style> 12 </head> 13 <body> 14 <ul id="ul"> 15 <li>数学</li> 16 <li>英语</li> 17 <li>语文</li> 18 <li>体育</li> 19 </ul> 20 <script> 21 var li = document.getElementById("ul").getElementsByTagName("li"); 22 for (var i=0;i<li.length;i++){ 23 //先添加自定义属性 24 li[i].setAttribute("score",i+10); 25 li[i].onclick=function () { 26 alert(this.getAttribute("score")); 27 } 28 } 29 </script> 30 </body> 31 </html>
3.移除自定义属性
使用removeAttribute函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 width: 400px; 9 height: 200px; 10 background-color: #ccc; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="移除" id="btn"> 16 <div id="di" score="10"></div> 17 <script> 18 document.getElementById("btn").onclick=function () { 19 document.getElementById("di").removeAttribute("score"); 20 } 21 </script> 22 </body> 23 </html>
移除类样式：
这种方式，看效果后，知道是清除不干净的。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .cs { 8 width: 400px; 9 height: 200px; 10 background-color: #ccc; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="移除" id="btn"> 16 <div id="di" score="10" class="cs"></div> 17 <script> 18 document.getElementById("btn").onclick=function () { 19 document.getElementById("di").className=""; 20 } 21 </script> 22 </body> 23 </html>
效果：
4.删除自带的属性
可以继续使用removeAttribute函数。
这样清除属性更加干净。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .cs { 8 width: 400px; 9 height: 200px; 10 background-color: #ccc; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="移除" id="btn"> 16 <div id="di" score="10" class="cs"></div> 17 <script> 18 document.getElementById("btn").onclick=function () { 19 document.getElementById("di").removeAttribute("class"); 20 } 21 </script> 22 </body> 23 </html>
三：tab切换案例
1.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 ul { 13 list-style-type: none; 14 } 15 16 .box { 17 width: 400px; 18 height: 300px; 19 border: 1px solid #ccc; 20 margin: 100px auto; 21 overflow: hidden; 22 } 23 24 .hd { 25 height: 45px; 26 } 27 28 /*上面*/ 29 .hd span { 30 display: inline-block; 31 width: 96px; 32 background-color: pink; 33 line-height: 45px; 34 text-align: center; 35 cursor: pointer; 36 } 37 .hd span.current { 38 background-color: #ccc; 39 } 40 41 /*影藏与展示*/ 42 .bd li { 43 height: 255px; 44 background-color: #ccc; 45 display: none; 46 } 47 .bd li.current { 48 display: block; 49 } 50 </style> 51 </head> 52 <body> 53 <div class="box" id="box"> 54 <div class="hd"> 55 <span class="current">体育</span> 56 <span>娱乐</span> 57 <span>新闻</span> 58 <span>综合</span> 59 </div> 60 <div class="bd"> 61 <ul> 62 <li class="current">我是体育模块</li> 63 <li>我是娱乐模块</li> 64 <li>我是新闻模块</li> 65 <li>我是综合模块</li> 66 </ul> 67 </div> 68 </div> 69 <script> 70 var box = document.getElementById("box"); 71 var hd = box.getElementsByTagName("div")[0]; 72 var bd = box.getElementsByTagName("div")[1]; 73 var li = bd.getElementsByTagName("li"); 74 75 //所有的span 76 var span = hd.getElementsByTagName("span"); 77 for (var i=0;i<span.length;i++){ 78 // 保存索引 79 span[i].setAttribute("index",i); 80 //上面的功能实现 81 span[i].onclick=function () { 82 for (var j=0;j<span.length;j++){ 83 span[j].removeAttribute("class"); 84 } 85 this.className="current"; 86 87 //下面的功能 88 var index = this.getAttribute("index"); 89 for (var j=0;j<span.length;j++){ 90 li[j].removeAttribute("class"); 91 } 92 li[index].className="current"; 93 } 94 } 95 96 </script> 97 </body> 98 </html>
效果：
© 著作权归作者所有
举报
发表评论
0/200
