`

jquery each

阅读更多

     each函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。

    jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。
   jQuery.prototype.each=function( fn, args ) {
      return jQuery.each( this, fn, args );
   }

   让我们看一下jQuery提供的each方法的具体实现,
    jQuery.each(obj,fn,arg)  
    该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。
    让我们根据ojb对象进行讨论:

1.obj对象是数组
each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身
2.obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。
jQuery.each=function( obj, fn, args ) {
    if ( args ) {
       if ( obj.length == undefined ){ 
           for ( var i in obj )
             fn.apply( obj, args ); 
       }else{
           for ( var i = 0, ol = obj.length; i < ol; i++ ) {
              if ( fn.apply( obj, args ) === false )
                  break; 

          }

       }
   } else {
       if ( obj.length == undefined ) {
            for ( var i in obj )
               fn.call( obj, i, obj );
       }else{
          for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} 

       }
  }
  return obj;
}  
 需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。

分享到:
评论

相关推荐

    jQuery each函数源码分析_.docx

    《jQuery each函数源码分析》 jQuery库中的`each`函数是其核心功能之一,它提供了遍历数组和对象的能力,使得开发者能够方便地对集合中的每个元素进行操作。在这个文档中,我们将深入探讨`each`函数的源码,了解其...

    JQuery each()嵌套使用小结

    JQuery中提供了一个非常实用的方法each(),该方法可用于遍历数组或对象的每一个元素,并且该方法支持嵌套使用,使得在操作DOM元素时变得更加灵活和方便。 JQuery each()方法主要有两种形式:遍历数组和遍历对象。当...

    Jquery each方法跳出循环,并获取返回值(实例讲解)

    在jQuery库中,`each()`方法是一个非常重要的迭代器,用于遍历JavaScript对象或jQuery选择集中的每个元素。它提供了一种优雅的方式来处理数组或对象集合,尤其在DOM操作和数据处理时。在这个实例讲解中,我们将深入...

    JQuery each打印JS对象的方法

    ### 知识点1: JQuery each方法概述 JQuery的each方法是JQuery库中的一个非常重要的函数,它提供了一种简洁的方式来遍历数组和对象。通过each方法,开发者可以对集合中的每一个元素执行一个回调函数。这个回调函数...

    JQuery each()函数如何优化循环DOM结构的性能

    代码如下: $.fn.beautifyTable = function(options) { //定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children(‘tbody’), tr = tbody.children(‘tr’),...

    jquery 城市选择控件

    jquery 城市选择控件 文本框获得焦点,在下方弹出悬浮层,分组选择城市。 解决了 http://bbs.csdn.net/topics/390339668#new_post 问题

    jQuery each()小议

    `jQuery each()`是一个非常重要的工具,它为JavaScript程序员提供了便捷的方式来遍历数组、对象或DOM元素集合。在jQuery库中,`each()`方法是用于循环处理集合中的每个元素,无论是数组还是对象,使得批量操作变得...

    JQuery跳出each循环的方法

    一、jquery each循环,要实现break和continue的功能: break—-用return false; continue –用return ture; 二、jquery怎么跳出当前的each循环 有些朋友可能会以为在jquery跳出循环可以直接使用continue和break了,...

    jquery $.each json 获取json 数据

    $.each函数是jQuery中一个重要的迭代器,它允许我们遍历数组或对象,包括JSON数据。本篇文章将深入探讨如何使用jQuery的$.each函数来获取并处理JSON数据。 首先,我们需要了解JSON(JavaScript Object Notation),...

    jQuery each和js forEach用法比较

    本文实例分析了jQuery each和js forEach用法。分享给大家供大家参考,具体如下: 对于遍历数组的元素,js和jquery都有类似的方法,js用的是forEach而jquery用的是each,简单举例; var arr = new Array(["b", 2, "a...

    jquery里的each使用方法详解

    `jQuery`中的`each()`函数是一个非常重要的工具方法,它允许开发者遍历对象或数组的成员,并对每个成员执行特定的操作。在`jQuery`中,`each()`有两种主要的使用场景,一种是针对数组或对象,另一种是针对`jQuery`...

    jQuery的$.each()遍历数组或对象的用法

    $.each()遍历数组或对象的具体用法

    jQuery each函数源码分析

    jQuery的`each`函数是其核心功能之一,用于遍历数组或对象,并对每个元素或属性执行指定的回调函数。这个函数在JavaScript开发中极为常见,因为它提供了方便的方式来迭代处理集合数据。 首先,我们来看看`jQuery....

    JQuery $.each遍历JavaScript数组对象实例

    在JavaScript和jQuery中,`$.each`函数是一个非常实用的工具,用于遍历数组或对象。这个函数允许我们对集合中的每个元素执行某些操作。在本例中,我们将深入探讨如何使用`$.each`处理JSON数据,特别是从JSON字符串...

    jQuery each()方法的使用方法

    `jQuery.each()`方法是jQuery库中的一个核心函数,它用于遍历对象(包括数组和对象)的每个元素或属性,并执行指定的回调函数。在jQuery中,`each()`方法有两种主要用途:遍历jQuery对象(集合)中的DOM元素,以及...

    jquery手冊--jquery.chm

    jQuery each(Function fn) 以每一个匹配的元素作为上下文来执行一个函数。 jQuery eq(Number pos) 将匹配的元素集合缩减为一个元素。 Array&lt;Element&gt; get() 取得所有匹配的元素 Element get(Number num) 取得其中...

Global site tag (gtag.js) - Google Analytics