1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 </style> 8 </head> 9 <body> 10 11 <ul id="list"> 12 <li>98</li> 13 <li>85</li> 14 <li>33</li> 15 <li>99</li> 16 <li>52</li> 17 <li>95</li> 18 </ul> 19 <ul id="sort"></ul> 20 <script src="js/jquery-1.11.3.js"></script> 21 <script> 22 //请给每个不足60分的成绩+10分,并将超过90分的成绩用绿色背景标识出来 23 var arr=[]; 24 /*$(.).each()的用法 25 $("#list>li").each(function(i,elem){ 26 //$(...).each()是只能用于jQuery的子对象中,定义于jQuery.fn原型对象中 27 console.log(i,elem) 28 var $elem=$(elem); 29 var num=parseInt($elem.html()); 30 arr[i]=num; 31 if(num<60){ 32 num+=10; 33 $elem.html(num); 34 }else if(num>=90) $elem.css("background","red"); 35 36 }) 37 */ 38 //$.each(,)的用法 39 var lis=document.querySelectorAll("#list>li"); 40 $.each(lis,function(i,elem){ 41 //$(...).each()是只能用于jQuery的子对象中 42 console.log(i,elem) 43 var $elem=$(elem); 44 var num=parseInt($elem.html()); 45 arr[i]=num; 46 if(num<60){ 47 num+=10; 48 $elem.html(num); 49 }else if(num>=90) $elem.css("background","red"); 50 51 }) 52 var barr=arr.sort(function(a,b){return b-a;}) 53 var html=""; 54 //$.each是可以用于非jQuery的对象,是定义在构造函数上的静态函数,static 55 $.each(barr,function(i,elem){ 56 html+=`<li>${elem}</li>`; 57 }); 58 $("#sort").html(html); 59 </script> 60 </body> 61 </html>
总结:
$(...).each()是只能用于jQuery的子对象中,定义于jQuery.fn原型对象中
$.each()是可以用于非jQuery的对象,是定义在构造函数上的静态函数,static