zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    CDN 机制
    canvas绘制旋转图形
    前端资源网站
    css中的em用法
    响应式网页设计【转载】
    闭包与非闭包
    跨域文档之间的访问
    ajax跨域之---服务器端代理实现
    jsonp跨域实现
    freemarker 命名空间
  • 原文地址:https://www.cnblogs.com/shuen/p/8781322.html
Copyright © 2011-2022 走看看