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所采用的一种实现方式。

时间: 2024-10-26 11:54:14

jquery的each方法使用示例分享的相关文章

jquery的each方法使用示例分享_jquery

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

浅谈jQuery的offset()方法及示例分享_jquery

offset()方法的定义和用法: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="te

jQuery ajax serialize() 方法使用示例_jquery

.serialize() 方法创建以标准 URL 编码表示的文本字符串.它的操作对象是代表表单元素集合的 jQuery 对象. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

jquery清空表单数据示例分享

 这篇文章主要介绍了jquery清空表单数据的示例,需要的朋友可以参考下  代码如下: function clearForm(form) {   // iterate over all of the inputs for the form   // element that was passed in   $(':input', form).each(function() {     var type = this.type;     var tag = this.tagName.toLower

不使用jquery实现js打字效果示例分享

 js打字效果示例js打字效果示例,data-period设置从打字返回删字的时间,data-rotate可加减中英文词语,不用jquery支持       代码如下: <h1>Libraries give you  <span class="txt-rotate fw700" data-period=500" data-rotate='[ "knowledge", "community", "an outl

提取jquery的ready()方法单独使用示例

 有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了 大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行.   如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了.我们需要更快的方法.Firefox有DOMContentLoaded事件可以轻

jquery常用特效方法使用示例_jquery

1. jQuery fadeIn() 用于淡入已隐藏的元素. 语法: 复制代码 代码如下: $(selector).fadeIn(speed,callback); 实例: 复制代码 代码如下: $("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

jquery中offset()方法使用示例

jQuery 1.2 新增该函数. jQueryObject.offset( [ coordinates ] ) 注意: 1.如果省略了coordinates参数,则表示获取偏移位置:如果指定了该参数,则表示设置偏移位置.2.offset()函数的"设置"操作针对的是当前jQuery对象所匹配的每一个元素:"读取"操作只针对第一个匹配的元素. 1.获得元素相对于document的位置 获得位置是元素相对于document的位置信息,通常可以说是这个元素的坐标值. /

jquery实现网页查找功能示例分享

 当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息 本文以查找车站名为例,仿12306官网查找车站售票时间页面效果,当用户输入关键字点击查找按钮或按回车键时,jQuery通过正则匹配内容,准确匹配关键字,并迅速将页面定位滚动到第一个匹配的位置,并显示相关信息(本例中附加信息为车站开始售票时间).   HTML   页面需要放置一个输入框用来输入要查找的关键字,以及