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>