js之DOM对象三
Posted 功不是凭梦想和希望，而是凭 努力和实践。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js之DOM对象三相关的知识，希望对你有一定的参考价值。
一、JS中for循环遍历测试
for循环遍历有两种
第一种：是有条件的那种，例如 for(var i = 0;i<ele.length;i++){}
第二种：for （var i in li ）{}
现在我们来说一下测试一下第二种（数组和obj的）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script> 9 var arr = [11,22,33,44,55]; 10 var obj = {\'username\':\'zzz\',\'agr\':20}; //js中的这个类似字典的不叫字典，而是一个对象 11 for (var i in obj){ 12 console.log(i); //拿到的是键 13 console.log(obj[i]) //值 14 } 15 for (var j in arr){ 16 console.log(j); //拿到索引 17 console.log(arr[j]) //拿到值 18 } 19 </script> 20 </body> 21 </html>
二、获取value属性值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获取value值</title> 6 </head> 7 <body> 8 <input type="text" id="c1"> 9 <select name="pro" id="s1"> 10 <option value="1">河北省</option> 11 <option value="2">河南省</option> 12 <option value="3">北京省</option> 13 </select> 14 <button>show</button> 15 <script> 16 var ele_button=document.getElementsByTagName("button")[0]; 17 18 ele_button.onclick=function () { 19 var ele_input=document.getElementById("c1"); 20 var ele_select=document.getElementById("s1"); 21 console.log(ele_select.value) 22 }; 23 </script> 24 </body> 25 </html>
三、表格示例（全选，反选，取消）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格示例</title> 6 </head> 7 <body> 8 <button class="select">全选</button> 9 <button class="reserve">反选</button> 10 <button class="cancel">取消</button> 11 <table border="1"> 12 <tr> 13 <td><input type="checkbox" class="check"></td> 14 <td>111</td> 15 <td>222</td> 16 <td>333</td> 17 </tr> 18 <tr> 19 <td><input type="checkbox" class="check"></td> 20 <td>111</td> 21 <td>222</td> 22 <td>333</td> 23 </tr> 24 <tr> 25 <td><input type="checkbox" class="check"></td> 26 <td>111</td> 27 <td>222</td> 28 <td>333</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox" class="check"></td> 32 <td>111</td> 33 <td>222</td> 34 <td>333</td> 35 </tr> 36 </table> 37 <script> 38 // 方式一：分别给每个button增加事件 39 var ele_select = document.getElementsByClassName(\'select\')[0]; 40 var ele_reserve = document.getElementsByClassName(\'reserve\')[0]; 41 var ele_cancel = document.getElementsByClassName(\'cancel\')[0]; 42 var ele_input = document.getElementsByClassName(\'check\'); 43 //全选 44 ele_select.onclick = function () { 45 for (var i = 0; i < ele_input.length; i++) { 46 //添加一个checked属性 47 ele_input[i].checked = \'checked\' 48 } 49 }; 50 //取消 51 ele_cancel.onclick = function () { 52 for (var i =0;i<ele_input.length;i++){ 53 //删除checked属性，直接设置为空就行了 54 ele_input[i].checked = \'\' 55 } 56 }; 57 //反选 58 ele_reserve.onclick = function () { 59 for (var i = 0; i < ele_input.length; i++) { 60 var ele = ele_input[i]; 61 if (ele.checked) {//如果选中了就设置checked为空 62 ele.checked = \'\'; 63 } 64 else {//如果没有就设置checked = checked 65 ele.checked = \'checked\'; 66 } 67 } 68 }; 69 70 71 72 73 //方式二：方式一的优化循环增加事件 74 // var ele_button = document.getElementsByTagName(\'button\'); 75 // var ele_input = document.getElementsByClassName(\'check\'); 76 // for(var i=0;i<ele_button.length;i++) { 77 // ele_button[i].onclick = function () { 78 // if (this.innerHTML == \'全选\') { 79 // for (var i = 0; i < ele_input.length; i++) { 80 // //添加一个checked属性 81 // ele_input[i].checked = \'checked\' 82 // } 83 // } 84 // else if (this.innerHTML == \'取消\') { 85 // for (var i = 0; i < ele_input.length; i++) { 86 // //删除checked属性，直接设置为空就行了 87 // ele_input[i].checked = \'\' 88 // } 89 // } 90 // else { 91 // for (var i = 0; i < ele_input.length; i++) { 92 // var ele = ele_input[i]; 93 // if (ele.checked) {//如果选中了就设置checked为空 94 // ele.checked = \'\'; 95 // } 96 // else {//如果没有就设置checked = checked 97 // ele.checked = \'checked\'; 98 // } 99 // } 100 // } 101 // } 102 // } 103 104 105 </script> 106 </body> 107 </html>
四、模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .back{ 8 background-color: white; 9 height: 2000px; 10 } 11 12 .shade{ 13 position: fixed; 14 top: 0; 15 bottom: 0; 16 left:0; 17 right: 0; 18 background-color: grey; 19 opacity: 0.4; 20 } 21 22 .hide{ 23 display: none; 24 } 25 26 .models{ 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 margin-left: -100px; 31 margin-top: -100px; 32 height: 200px; 33 width: 200px; 34 background-color: wheat; 35 36 } 37 </style> 38 </head> 39 <body> 40 <div class="back"> 41 <input class="c" type="button" value="click"> 42 </div> 43 44 <div class="shade hide handles"></div> 45 46 <div class="models hide handles"> 47 <input class="c" type="button" value="cancel"> 48 </div> 49 50 51 <script> 52 53 54 var eles=document.getElementsByClassName("c"); 55 var handles=document.getElementsByClassName("handles"); 56 for(var i=0;i<eles.length;i++){ 57 eles[i].onclick=function(){ 58 59 if(this.value=="click"){ 60 61 for(var j=0;j<handles.length;j++){ 62 63 handles[j].classList.remove("hide"); 64 65 } 66 67 } 68 else { 69 for(var j=0;j<handles.length;j++){ 70 71 handles[j].classList.add("hide"); 72 } 73 74 } 75 } 76 } 77 78 </script> 79 80 </body> 81 </html>
五、搜索框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟placeholder属性的功能</title> 6 </head> 7 <body> 8 <input type="text" placeholder="username" id="submit"> 9 <input type="text" value="username" id="submit1"> 10 <script> 11 // var ele = document.getElementById(\'submit1\'); 12 var ele = document.getElementById(\'submit1\'); 13 ele.onfocus = function () { 14 //先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空 15 this.value="" 16 }; 17 ele.onblur = function () { 18 // 当光标不点击那个输入框的时候就失去焦点了 19 //当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格 20 // 如果为空或者有空格，用trim()去掉空格。然后赋值为username 21 if (this.value.trim()==""){ 22 this.value=\'username\' 23 } 24 } 25 </script> 26 </body> 27 </html>
六、tab切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab</title> 6 <style> 7 *{margin:0; padding:0; list-style:none;} 8 body{ 9 font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\\9ED1\\4F53", Arial, sans-serif; 10 } 11 h3{ 12 text-align: center; 13 color:darkcyan; 14 margin-top: 30px; 15 letter-spacing: 5px; 16 } 17 .box{ 18 width: 1000px; 19 margin:50px auto 0px; 20 } 21 #title{ 22 line-height: 40px; 23 background-color: rgb(247,247,247); 24 font-size: 16px; 25 font-weight: bold; 26 color: rgb(102,102,102); 27 } 28 #title span{ 29 float: left; 30 width: 166px; 31 text-align: center; 32 } 33 #title span:hover{ 34 /*color: black;*/ 35 cursor: pointer; 36 } 37 #content{ 38 margin-top: 20px; 39 } 40 #content li{ 41 width: 1050px; 42 display: none; 43 background-color: rgb(247,247,247); 44 } 45 #content li div{ 46 width: 156px; 47 margin-right: 14px; 48 float: left; 49 text-align: center; 50 } 51 #content li div a{ 52 font-size: 14px; 53 color: black; 54 line-height: 14px; 55 /* float: left;*/ 56 display: inline-block; 57 margin-top: 10px; 58 } 59 #content li a:hover{ 60 color: #B70606; 61 } 62 #content li div span{ 63 font-size: 16px; 64 line-height: 16px; 65 /*float: left;*/ 66 display: block; 67 color: rgb(102,102,102); 68 margin-top: 10px; 69 } 70 #content img{ 71 float: left; 72 width: 155px; 73 height: 250px; 74 } 75 #title .select{ 76 background-color: #2459a2; 77 color: white; 78 border-radius: 10%; 79 } 80 #content .show{ 81 display: block; 82 } 83 84 .show span{ 85 color: red!important; 86 font-size: 30px; 87 } 88 </s以上是关于js之DOM对象三的主要内容，如果未能解决你的问题，请参考以下文章