• 区别和详解:jQuery中的 $().each()和$.each()/jQuery.each()


    1、认识
       $().each()遍历当前jQuery对象,并在每一个元素上执行回调函数。其方法内部是通过调用静态方法jQuery.each()来实现的。
       jQuery.each()是一个通用的遍历迭代的静态方法,用于无缝的遍历对象或者数组。如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。
    2、语法:
        2.1、$(selector).each(function(index,element)
       描述:
    function(index,element)

      必需。为每个匹配元素规定运行的函数。

    • index - 选择器的 index 位置
    • element - 当前的元素(也可使用 "this" 选择器)
    2.2、jQuery.each(collection,callback(indexInArray,valueofElement))
    3、$().each()和$.each()实例:
    3.1、.each()
    描述:输出每个 li 元素的文本:
    HTML代码
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Soda</li>
    </ul>

    JS代码:

    $(document).ready(function(){
        $("li").each(function(){
          alert($(this).text())
        });
    });

    结果为:Coffee Milk Soda

    3.2、 jQuery.each()
     3.2.1、each处理一维数组
     var arr1 = [ "aaa", "bbb", "ccc" ];      
      $.each(arr1, function(i,val){      
          alert(i);   
          alert(val);
      });   
    alert(i)将输出为:012
    alert(val)将输出为:aaa,bbb,ccc

    3.2.2、each处理二维数组  

    var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
    $.each(arr, function(i, item){      
          alert(i);   
          alert(item);      
    });  
    alert(i)将输出为:012
    alert(item)将输出为: ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

    3.2.3、对此二位数组的处理稍作变更之后

      var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
       $.each(arr, function(i, item){      
            $.each(item,function(j,val){
                alert(j);
                alert(val);
         }); 
    });    
     alert(j)输出为:012012012
     alert(val)输出为:a,aa,aaa,b,bb,bbb,c,cc,ccc
    3.2.4、each处理json数据,这个each就有更厉害了,能循环每一个属性  
     var obj = { one:1, two:2, three:3};      
     $.each(obj, function(key, val) {      
          alert(key);   
          alert(val);      
     });   
    alert(key)输出为:one two three
    alert(val)输出为:1 2 3
    3.2.5、如果不想输出第一项 (使用retrun true)进入 下一遍历
    var myArray=["skipThis", "dothis", "andThis"];
    $.each(myArray, function(index, value) {
         if (index == 0) {
         return true; // equivalent to ‘continue' with a normal for loop
    }
         // else do stuff…
         alert (index + “: “+ value);
    });
    结果为:1:dothis
    结果为:2:andThis
    3.2.6、回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历.
    HTML代码:
    <body>
       <div id=”one”></div>
       <div id=”two”></div>
       <div id=”three”></div>
       <div id=”four”></div>
       <div id=”five”></div>
    </body>
    JS代码:
     var arr = [ "one", "two", "three", "four", "five" ];//数组
     var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
     jQuery.each(arr, function() {  // this 指定值
           $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two
           return (this != “three”); // 如果this = three 则退出遍历
     });
     jQuery.each(obj, function(i, val) {  // i 指向键, val指定值
           $(“#” + i).append(document.createTextNode(” – ” + val));
     });

    结果为:

    Mine is one. 
    Mine is two.
    Mine is three.
    – 1
    - 2
    - 3
     - 4
     - 5
    4、扩展
    其实jQuery里的each方法是通过js里的call方法来实现的。
    下面简单介绍一下call方法。
    call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
    call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
    参数 :thisObj --->可选项。将被用作当前对象的对象。 
    参数:arg1, arg2, , argN --->可选项。将被传递方法参数序列。 
     
    说明 :
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
    如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
    function add(a,b) 
    { 
          alert(a+b); 
    } 
    function sub(a,b) 
    { 
         alert(a-b); 
    } 
    add.call(sub,3,1); 
    这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
     // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。 
     
     

     
     
     
     
  • 相关阅读:
    扩展方法使用
    mac学习笔记:brew 安装nginx
    Mac SVN 命令行
    mac终端命令大全
    mac学习笔记之:使用brew安装软件
    Linux学习笔记之更新yum安装最新Nginx+Php
    pyenv快速入门
    pycharm配置robotframework环境(mac版)
    macOS的zsh和bash切换
    robotframework windows环境和mac环境安装教程
  • 原文地址:https://www.cnblogs.com/wdlhao/p/5608776.html
Copyright © 2020-2023  润新知