`
lelong
  • 浏览: 554776 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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方法与for语句遍历数组示例

    本文主要讲解了在jQuery中如何使用each方法和for语句遍历数组,并通过实例演示了两种方法的使用技巧和效果。在深入探讨之前,我们首先需要了解数组和遍历的基本概念。数组是一种数据结构,用于存储一系列的值,而...

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

    在这个实例讲解中,我们将深入探讨如何使用`each()`方法跳出循环以及如何在循环内部设置返回值。 首先,`each()`方法的基本语法如下: ```javascript $(selector).each(function(index, element) { // 在这里编写...

    Jquery1.7使用以及讲解

    `.on()` 方法是jQuery 1.7中的核心事件处理函数。它允许我们动态地为元素添加事件监听器,不仅支持当前已存在的元素,还适用于未来可能出现的元素。基本语法如下: ```javascript $(selector).on(event, child...

    浅谈jquery中的each方法$.each、this.each、$.fn.each

    在jQuery库中,`each`方法是一个非常常用且强大的功能,它允许我们遍历集合中的每个元素,并对每个元素执行特定的操作。这篇文章将详细讲解`$.each`、`this.each`和`$.fn.each`这三种不同的`each`用法。 首先,我们...

    jQuery 核心讲解 帮忙文档

    **jQuery核心讲解** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个“jQuery核心讲解帮忙文档”是专为初学者设计的,旨在帮助他们快速掌握jQuery的基本概念...

    jQuery源码详细分析中文注释

    通过Sizzle,jQuery能够快速地在DOM树中找到匹配的元素,这是jQuery强大功能的基础。注释会详细解释Sizzle的工作流程,包括如何编译选择器表达式和执行查找操作。 其次,jQuery的链式调用机制是其API设计的一大特色...

    jquery获取表单值

    本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、单选按钮、复选框、下拉列表)的值。 #### 一、获取表单控件的值 ##### 1. 获取文本框(`&lt;input type="text"&gt;`)的值 文本框是最常见...

    JQuery讲解

    2. **遍历操作**:`.each()`函数可以对集合中的每个元素执行指定的操作。 3. **DOM操作**:`.append()`, `.prepend()`, `.before()`, `.after()`等方法用于修改DOM结构。 4. **事件处理**:`.on()`, `.off()`, `....

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jQuery操作checkbox并获取选中值

    在jQuery中,可以通过遍历所有checkbox并使用`.prop()`方法来实现这一功能: ```javascript $('input[type="checkbox"]').prop('checked', true); ``` 这里的`.prop('checked', true)`用于设置checkbox的选中状态...

    jQuery 1.5 遍历xml节点属性

    需要注意的是,`.attr.each()`并不是jQuery的核心方法,而是对`jQuery.fn.attr`的一个扩展,如在描述中提到的博客文章可能对此进行了定义。 结合"test.html"文件,我们可以创建一个简单的HTML页面来展示这个过程。...

    JQuery权威指南源代码

    《JQuery权威指南源代码》是一本深入解析jQuery库的参考书籍,其源代码提供了丰富的实例和示例,帮助读者更好地理解和应用jQuery。...学习过程中,结合书中的讲解和源代码,将能更好地掌握jQuery的核心技术和实践技巧。

    jQuery API 官方文档 最新版下载

    - **核心方法(Core Methods)**:这部分介绍了`$()`、`.data()`、`.each()`等基础方法。 - **选择器(Selectors)**:详述了所有可用的选择器和它们的用法。 - **遍历和过滤方法(Traversing Methods)**:包括`....

    50个Jquery经典实例 50个Jquery经典实例

    7. **遍历和筛选**:`$.each()`用于遍历对象或数组,`$(selector).find()`, `$(selector).children()`, `$(selector).siblings()`等方法用于在DOM树中筛选元素。 8. **插件扩展**:jQuery的可扩展性强大,许多...

    JQuery快速自学教程

    从部分内容来看,教程首先介绍了如何设置JQuery的学习环境,包括下载JQuery文件和在HTML中引入JQuery的方法。接着,讲解了如何使用document对象和ready事件在页面载入后执行代码。随后,教程进入了JQuery选择器的...

    jQuery源码

    《锋利的jQuery》是一本深入讲解jQuery库的著作,其配套源码是学习和理解jQuery核心概念的重要辅助材料。由于原始的下载地址已失效,这里我们将基于书中的实例源码来探讨jQuery的关键知识点。 首先,jQuery是一个轻...

    JQuery实战100列

    这个系列可能涵盖以上各个方面的实例和技巧,逐步讲解如何使用jQuery解决实际问题,提升开发效率。例如,第1列可能介绍基本选择器的使用,第2列可能是DOM操作,第50列可能是关于动画效果的应用,第75列可能涉及AJAX...

    jquery实战教程

    PPT部分可能包含课程大纲、关键知识点讲解和案例分析,而视频教程SRC可能是实际的讲解视频,通过实战演示来巩固理论知识,帮助学习者更好地理解和应用jQuery。 总的来说,《jQuery实战教程》是一套完整的教学资源,...

    jquery 插件开发 pdf

    以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这允许插件方法被作为jQuery选择器的一部分来调用。 - 插件的基本结构通常包括一个函数,该函数...

Global site tag (gtag.js) - Google Analytics