jQuery的$().each()与$.each()的区别

 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

jQuery的$().each()与$.each()的区别

相关推荐