zoukankan      html  css  js  c++  java
  • $.each 与$().each()

    在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。

    $().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

    $(“input[name=’ch’]”).each(function(i){
    if($(this).attr(‘checked’)==true)
    {
    //一些操作代码

    }

    回调函数是可以传递参数,i就为遍历的索引。

    对于遍历一个数组,用$.each()来处理,简直爽到了极点。例如:

    $.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
    {
    alert(“索引:”+i,”对应值为:”+n.name);
    });

    参数i为遍历索引值,n为当前的遍历对象.

    var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
    $.each(arr1, function(){
    alert(this);
    });
    输出:one   two  three  four   five
    var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
    $.each(arr2, function(i, item){
    alert(item[0]);
    });
    输出:1   4   7
    var obj = { one:1, two:2, three:3, four:4, five:5 };
    $.each(obj, function(key, val) {
    alert(obj[key]);
    });
    输出:1   2  3  4  5

    在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。

    其实jQuery里的each方法是通过js里的call方法来实现的。

    下面简单介绍一下call方法。
    call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
    call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

    参数
    thisObj
    可选项。将被用作当前对象的对象。
    arg1, arg2,  , argN
    可选项。将被传递方法参数序列。

    说明
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

    引用网上有一个很经典的例子

    Js代码
    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 对象的引用。

    具体call更深入的就不在这里提了。

    下面提一下jQuery的each方法的几种常用的用法

    Js代码
    var arr = [ “one”, “two”, “three”, “four”];
    $.each(arr, function(){
    alert(this);
    });
    //上面这个each输出的结果分别为:one,two,three,four

    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
    $.each(arr1, function(i, item){
    alert(item[0]);
    });
    //其实arr1为一个二维数组,item相当于取每一个一维数组,
    //item[0]相对于取每一个一维数组里的第一个值
    //所以上面这个each输出分别为:1   4   7

    var obj = { one:1, two:2, three:3, four:4};
    $.each(obj, function(key, val) {
    alert(obj[key]);
    });
    //这个each就有更厉害了,能循环每一个属性
    //输出结果为:1   2  3  4

    通过它,你可以遍历对象、数组的属性值并进行处理。

    使用说明

    each函数根据参数的类型实现的效果不完全一致:

    1、遍历对象(有附加参数)

    $.each(Object, function(p1, p2) {

         this;       //这里的this指向每次遍历中Object的当前属性值

         p1; p2;     //访问附加参数

    }, ['参数1', '参数2']);

     

    2、遍历数组(有附件参数)

    $.each(Array, function(p1, p2){

         this;       //这里的this指向每次遍历中Array的当前元素

         p1; p2;     //访问附加参数

    }, ['参数1', '参数2']);

     

    3、遍历对象(没有附加参数)

    $.each(Object, function(name, value) {

         this;      //this指向当前属性的值

         name;      //name表示Object当前属性的名称

         value;     //value表示Object当前属性的值

    });

     

    4、遍历数组(没有附加参数)

    $.each(Array, function(i, value) {

         this;      //this指向当前元素

         i;         //i表示Array当前下标

         value;     //value表示Array当前元素

    });

    下面提一下jQuery的each方法的几种常用的用法

    Js代码
     var arr = [ "one", "two", "three", "four"];     
     $.each(arr, function(){     
        alert(this);     
     });     
    //上面这个each输出的结果分别为:one,two,three,four    
        
    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
    $.each(arr1, function(i, item){     
       alert(item[0]);     
    });     
    //其实arr1为一个二维数组,item相当于取每一个一维数组,   
    //item[0]相对于取每一个一维数组里的第一个值   
    //所以上面这个each输出分别为:1   4   7     
      
      
    var obj = { one:1, two:2, three:3, four:4};     
    $.each(obj, function(key, val) {     
        alert(obj[key]);           
    });   
    //这个each就有更厉害了,能循环每一个属性     
    //输出结果为:1   2  3  4

  • 相关阅读:
    mysql索引
    springboot mybatis 后台框架平台 shiro 权限 集成代码生成器
    java 企业网站源码模版 有前后台 springmvc SSM 生成静态化
    java springMVC SSM 操作日志 4级别联动 文件管理 头像编辑 shiro redis
    activiti工作流的web流程设计器整合视频教程 SSM和独立部署
    .Net Core中的ObjectPool
    文件操作、流相关类梳理
    .Net Core中的配置文件源码解析
    .Net Core中依赖注入服务使用总结
    消息中间件RabbitMQ(一)
  • 原文地址:https://www.cnblogs.com/clphp/p/5303351.html
Copyright © 2011-2022 走看看