JQuery日记 2014-04.29

JQuery原型对象(续)

(4).each(callback,args)

迭代JQuery对象上的元素并调用callback参数,如果某次迭代中callback返回false,停止迭代.args为callback的参数,args必须为数组.在callback中this引用的当前迭代的元素.

Test_HTML

<body>

<div id= "div1">div1</div ><div id= "div2">div2</div >

<span id= "span1">span1</span ><span id= "span2">span2</span ><span id="span3" >span3 </span>

</body>

Test_Script

$(function(){
    var $div = $(‘div‘ );
     var args = [":参数" ]

     $div.each( function(){
         alert( this.id + arguments[0]);
         return false ;
     },args); //只弹出一次   div1:参 数
});

.each(callback, args)调用了JQuery的静态函数JQuery.each(obj, callback, args)

JQuery.each(obj, callback, args)的源码也比较简单,见注释
   // args is for internal usage only
   each: function( obj, callback, args ) {
                     var value,
                     i = 0,
                     length = obj.length,
                     isArray = isArraylike( obj );
               //如果有参数
               if ( args ) {
                      //如果是类数组
                      //则用使用obj[下标]的方式访问迭代的元素
                      if ( isArray ) {
                            for ( ; i < length; i++ ) {
                                   //绑定回调函数的执行作用域,即回调函数使用this时,this指向当前迭代的元素,回调函数的参数为传入的args
                                  value = callback.apply( obj[ i ], args );
                                   //如果返回false,退出迭代
                                   if ( value === false ) {
                                          break;
                                  }
                           }
                      //如果不是是类数组
                      //则用for-in迭代
                     } else {
                            for ( i in obj ) {
                                  value = callback.apply( obj[ i ], args );
                                   if ( value === false ) {
                                          break;
                                  }
                           }
                     }
               // A special, fast, case for the most common use of each
               //和上个分支的处理一样这
               //只是没有传入args
               //大量的重复代码是为了更少的逻辑判断,匹配最长用的方式,使处理更快
              } else {
                      if ( isArray ) {
                            for ( ; i < length; i++ ) {
                                  value = callback.call( obj[ i ], i, obj[ i ] );
                                   if ( value === false ) {
                                          break;
                                  }
                           }
                     } else {
                            for ( i in obj ) {
                                  value = callback.call( obj[ i ], i, obj[ i ] );
                                   if ( value === false ) {
                                          break;
                                  }
                           }
                     }
              }
               //返回要迭代的obj,通常是jquery对象
               return obj;
       },

(5) .map(callback)

迭代JQuery对象中的元素,每次迭代执行callback方法,返回callback返回值数组组成的新的JQuery对象.

Test_Html

<body>

<div id= "div1" >div1 </div >< div id= "div2" >div2 </div >

<span id= "span1" >span1 </span >< span id= "span2" >span2 </span >< span id ="span3" >span3</span>

</body>

Test_Script

 var $div = $(‘div‘ );

     $div.map( function (){
         return this .parentNode;
     }).each( function (){
        alert( this .tagName); //弹出两次 BODY
     }); 

map源码:

map: function( callback ) {
         return this .pushStack( jQuery.map( this, function ( elem, i ) {
             return callback.call( elem, i, elem );
         }));
    },

.map(callback)调用$.map()根据其返回的元素数组返回一个新的JQuery对象.

$.map(elements, callback, arg)源码

map: function( elems, callback, arg ) {
               var value,
                     i = 0,
                     length = elems.length,
                     isArray = isArraylike( elems ),
                      //存放结果的数组
                      ret = [];
               // Go through the array, translating each of the items to their new values
               if ( isArray ) {
                      for ( ; i < length; i++ ) {
                            //嗲用callback绑定执行作用域为当前迭代元素
                           value = callback( elems[ i ], i, arg );
                            if ( value != null ) {
                                   //将返回值推入数组末尾
                                   ret.push( value );
                           }
                     }
               // Go through every key on the object,
              } else {
                      for ( i in elems ) {
                           value = callback( elems[ i ], i, arg );
                            if ( value != null ) {
                                   ret.push( value );
                           }
                     }
              }
               // Flatten any nested arrays
               return concat.apply( [], ret );
       },
时间: 2024-08-27 04:01:33

JQuery日记 2014-04.29的相关文章

&lt;2014 04 29&gt; c/c++常用库总结

C 标准库 ============================================================================================== C++ 标准库 STL 标准库中提供了C++程序的基本设施.虽然C++标准库随着C++标准折腾了许多年,直到标准的出台才正式定型,但是在标准库的实现上却很令人欣慰得看到多种实现,并且已被实践证明为有工业级别强度的佳作. 1. Dinkumware C++ Library 参考站点:http://w

2014.04.29

汇编语言是依赖于处理器的.不同的处理器上面的汇编语言是不一样的. 语言的发展有一个趋势,就是离硬件越来越远.从汇编,到C,C++,面向对象的Java等,能够发现,后面的语言越来越具有可移植性,不绝对依赖于底层硬件.比如跨平台的Java,其卖点之一就是其跨平台可移植性.还有一个点,就是越来越抽象,语言本身的思想点越来越明显.比如高级语言里面的面向对象思想,多线程,设计模式,通信模型等等,都是随着语言本身发展而来的.在低级语言中,如此抽象结构的东西是没有的. 计算机游戏. 计算机游戏只是计算机应用的

&lt;2014 04 29&gt; *nix环境编程常用库总结

-------------------------linux常用头文件如下:POSIX标准定义的头文件<dirent.h>        目录项<fcntl.h>         文件控制<fnmatch.h>    文件名匹配类型<glob.h>    路径名模式匹配类型<grp.h>        组文件<netdb.h>    网络数据库操作<pwd.h>        口令文件<regex.h>   

JQuery日记 6.3 JQuery遍历模块

jQuery.extend({ // 返回elem延DOM树某个方向访问的所有节点,直到遇到until条件 dir: function( elem, dir, until ) { var matched = [], truncate = until !== undefined; while ( (elem = elem[ dir ]) && elem.nodeType !== 9 ) { if ( elem.nodeType === 1 ) { if ( truncate &&am

JQuery日记 5.31 JQuery对象的生成

JQuery对象的生成 1 selector为任何可转换false的空值 返回空JQuery对象 2 selector为字符串 2.1 selector为html字符串或有id属性的标签 2.2.1 selector为html字符时 转换html字符为DOM元素并放入当前JQuery的数组 当context参数为js对象时,迭代器属性 (1)当前属性对应此JQuery对象的某个函数时,调用此JQuery对象的此函数,参数为当前属性的值. (2)其他设置HTML属性 2.2.2 selector有

JQuery日记 5.11 Sizzle选择器(五)

//设置当前document和document对应的变量和方法 setDocument = Sizzle.setDocument = function( node ) { var hasCompare, //node为Element时返回node所属document //node为Document时返回node //node为空时返回window.document doc = node ? node.ownerDocument || node : preferredDoc, //document

JQuery日记_5.14 Sizzle选择器(七)

上篇说道,tokenize方法会把selector分割成一个个selector逻辑单元(如div>a是三个逻辑单元 'div','>','a')并为之片段赋予对应类型的过滤函数. for ( type in Expr.filter ) { if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] || (match = preFilters[ type ]( match ))) ) { matc

2014.4.29 新入职第二天

很开心,入职的第二天,同事们都很友好和善.加油! 2014.4.29 新入职第二天,码迷,mamicode.com

JQuery日记6.5 Javascript异步模型(二)

mnesia在频繁操作数据的过程可能会报错:** WARNING ** Mnesia is overloaded: {dump_log, write_threshold},可以看出,mnesia应该是过载了.这个警告在mnesia dump操作会发生这个问题,表类型为disc_only_copies .disc_copies都可能会发生. 如何重现这个问题,例子的场景是多个进程同时在不断地mnesia:dirty_write/2 mnesia过载分析 1.抛出警告是在mnesia 增加dump

JQuery日记 2014-4.28

为方便起见将JQuery.fn.init称之为JQuery对象 JQuery原型对象方法: (1) toArray() 调用[].prototype.slice.call(jquery)将JQuery对象(类对象)转换为真正的数组 测试html <body> <div id= "div1">div1</div ><div id= "div2">div2</div > <span> span1&l