• 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
  • 相关阅读:
    当老板如何带团队?
    创业者第一法宝-了解自己
    交流才能交易,交易才能交心
    集合框架
    MySQL一些命令语法
    JS组成整理
    git中可以pull但是push提示Everything up-to-date的情况
    循环判断以及文件的使用--练习1
    Hello World !
    linux文件权限修改
  • 原文地址:https://www.cnblogs.com/shuen/p/8781322.html
Copyright © 2020-2023  润新知