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>
测试for循环

二、获取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>
View Code

三、表格示例(全选,反选,取消)

  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>
seach示例

六、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以上是关于js之DOM对象三的主要内容,如果未能解决你的问题,请参考以下文章

js之DOM对象一

js之DOM对象

JS之DOM对象常用知识点整理

JS总结之二:DOM对象控制HTML

前端之JavaScript:JS之DOM对象三

js之DOM对象三