大华哒哒o(￣▽￣)d

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery的遍历方式 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
 7     </head>
 8     <body>
 9         <p id="p1">第1个段落</p>
10         <p>第2个段落</p>
11         <p>第3个段落</p>
12         <p>第4个段落</p>
13         <p>第5个段落</p>
14         <input type="button" value="each遍历" id="btn1"/>
15         
16         <input type="button" value="for遍历" id="btn2"/>
17         <input type="button" value="获取到jquery对象遍历" id="btn3"/>
18         <input type="button" value="each遍历的另一种方式" id="btn4"/>
19     </body>
20     <script type="text/javascript">
21         $(function(){
22 //            alert($("p"));
23 //            alert(document.getElementById("p1"));
24             $("#btn1").click(function(){
25                 //1 、each的遍历方式  i:表示的为索引     n表示的是每个元素的dom对象 [object HTMLParagraphElement]，不是jquery中的对象
26                 $("p").each(function(i,n){
27                     console.log(i+"---"+n);
28                 });
29             });
30             
31             $("#btn2").click(function(){
32                 for(var i=0;i<$("p").length;i++){
33                     //每个元素 o 仍然是js的dom对象,[object HTMLParagraphElement]
34                     var o = $("p")[i];
35                     console.log(i+"------"+o+"----"+o.innerHTML);
36                 }
37             });
38             //o 为jquery对象 [object Object]
39             $("#btn3").click(function(){
40                 for(var i = 0;i<$("p").length;i++){
41                     var o = $("p").eq(i);
42                     console.log(o+"-----"+o.html());
43                 }
44     
45             });
46             
47             $("#btn4").click(function(){
48 //                n为dom对象
49                 $.each($("p"), function(i,n) {
50                     console.log(i+"-------"+n.innerHTML);
51                 });                
52                 
53             });
54             
55         });
56         
57         
58     </script>
59 </html>

 

posted on 2018-09-19 22:02  大华哒哒o(￣▽￣)d  阅读(125)  评论(0)    收藏  举报