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>