jQuery的each循环遍历 

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>jQuery中的循环遍历</title>
10   <script type="text/javascript" src="jQuery库/jquery-3.2.1.min.js"></script>
11  </head>
12  <body>
13     <script type="text/javascript">
14         $(function(){
15             
16             $.each($("div"),function(x,y){//也可以写成 $("div").each(function(x,y){})
17             //x是下标
18             //y是数组或集合中的元素，是dom对象
19             
20             //alert(this.innerHTML)//等同于alert(y.innerHTML);等同于alert($(this).html());
21 
22             //给每一个div元素添加格式
23                 if(x===0){
24                     $(this).css({"background":"red","color":"yellow"});//里面是一个JSON串，设置格式
25                     alert($(this).css("color"));//rgb(255, 255, 0)获取颜色
26                 }else if(x===1){
27                     $(this).css("background","blue");
28                 }else if(x===2){
29                     $(this).css("background","green");
30                 }else if(x===3){
31                     $(this).css("background","yellow");
32                 }else if(x===4){
33                     $(this).css("background","gray");
34                 }
35             })
36             
37             //获取所有text类型的input标签，并设置边框
38             $("input[type='text']").each(function(i,n){
39                 //alert(i)
40                 $(n).css({
41                     "border":"1px solid red"
42                     })
43             })
44         })
45         
46     </script>
47     <div>a</div>
48     <div>b</div>
49     <div>c</div>
50     <div>d</div>
51     <div>e</div>
52     <input type="text"/><br>
53     <input type="text"/><br>
54     <input type="button"/><br>
55     <input type="text"/><br>
56     <input type="checkbox"/><br>
57  </body>
58 </html>

 

posted @ 2018-03-20 13:54  不上进的小猫  阅读(600)  评论(0)    收藏  举报