首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery中的traversing查寻及遍历

2012-11-16 
jQuery中的traversing查找及遍历jQuery提供了一整套非常好用的遍历Dom树节点的API,下面是看源码的过程,看

jQuery中的traversing查找及遍历

jQuery提供了一整套非常好用的遍历Dom树节点的API,下面是看源码的过程,看完了后对API进行分级别,将将要的级别移到插件,或者将其删除,保持jQuery的精简。

?

学习重点:

1. 正则表达式深化:

var rparentsprev = /^(?:parents|prevUntil|prevAll)/;

???? ?:在正则表达式中表示:非捕获子模式,即使满足parents|prevUntil|prevAll,也不捕获

?

2. 同类方法的抽取

??? parent,parents...,并将他们推入栈中(pushStack),回顾pushStack方法定义在core.js中,方法中通过链接的方式设置了一个preObject属性,为end()方法留下可能。

?

?

(function( jQuery ) { // ?:在正则表达式中表示:非捕获子模式,即使满足parents|prevUntil|prevAll,也不捕获 // /,/用于多个选择器分隔 //var runtil = /Until$/,rparentsprev = /^(?:parents|prevUntil|prevAll)/,// Note: This RegExp should be improved, or likely pulled from Sizzlermultiselector = /,/,// 以任何字符开始,并且后续字符是非# [ . ,的正则表达式isSimple = /^.[^:#\[\.,]*$/,slice = Array.prototype.slice,POS = jQuery.expr.match.globalPOS,// methods guaranteed to produce a unique set when starting from a unique setguaranteedUnique = {children: true,contents: true,next: true,prev: true};jQuery.fn.extend({find: function( selector ) {var self = this,i, l;//如果是简单的字符串,则交由filter函数,通过contains函数判断是否需要过滤掉集合同的数据(其中contains方法在sizzle中)if ( typeof selector !== "string" ) {return jQuery( selector ).filter(function() {for ( i = 0, l = self.length; i < l; i++ ) {if ( jQuery.contains( self[ i ], this ) ) {return true;}}});}//将当前对象的所有的selector压入栈中var ret = this.pushStack( "", "find", selector ),length, n, r;for ( i = 0, l = this.length; i < l; i++ ) {length = ret.length;// 调用Sizzle进行对象的查找,并将结果保存到ret中,其中Sizzle的定义为:var Sizzle = function( selector, context, results, seed )jQuery.find( selector, this[i], ret );// 将重复的搜索对象删除,保证唯一if ( i > 0 ) {// Make sure that the results are uniquefor ( n = length; n < ret.length; n++ ) {for ( r = 0; r < length; r++ ) {if ( ret[r] === ret[n] ) {ret.splice(n--, 1);break;}}}}}return ret;},// 只要包含target中的任何一个对象,即添加到返回列表,filter出来has: function( target ) {var targets = jQuery( target );return this.filter(function() {for ( var i = 0, l = targets.length; i < l; i++ ) {if ( jQuery.contains( this, targets[i] ) ) {return true;}}});},// 将列表推到stack中,方便end()回退not: function( selector ) {return this.pushStack( winnow(this, selector, false), "not", selector);},// 将列表推到stack中,方便end()回退filter: function( selector ) {return this.pushStack( winnow(this, selector, true), "filter", selector );},// 判断是否是选择器中选择结果的一员is: function( selector ) {return !!selector && (typeof selector === "string" ?// If this is a positional selector, check membership in the returned set// so $("p:first").is("p:last") won't return true for a doc with two "p".POS.test( selector ) ?jQuery( selector, this.context ).index( this[0] ) >= 0 :jQuery.filter( selector, this ).length > 0 :this.filter( selector ).length > 0 );},// TODO:这个API可以删除,最近的元素closest: function( selectors, context ) {var ret = [], i, l, cur = this[0];// Array (deprecated as of jQuery 1.7)if ( jQuery.isArray( selectors ) ) {var level = 1;while ( cur && cur.ownerDocument && cur !== context ) {for ( i = 0; i < selectors.length; i++ ) {if ( jQuery( cur ).is( selectors[ i ] ) ) {ret.push({ selector: selectors[ i ], elem: cur, level: level });}}cur = cur.parentNode;level++;}return ret;}// Stringvar pos = POS.test( selectors ) || typeof selectors !== "string" ?jQuery( selectors, context || this.context ) :0;for ( i = 0, l = this.length; i < l; i++ ) {cur = this[i];while ( cur ) {if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {ret.push( cur );break;} else {cur = cur.parentNode;if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {break;}}}}ret = ret.length > 1 ? jQuery.unique( ret ) : ret;return this.pushStack( ret, "closest", selectors );},// Determine the position of an element within// the matched set of elements// 获取元素的索引index: function( elem ) {// No argument, return index in parentif ( !elem ) {return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;}// index in selectorif ( typeof elem === "string" ) {return jQuery.inArray( this[0], jQuery( elem ) );}// Locate the position of the desired elementreturn jQuery.inArray(// If it receives a jQuery object, the first element is usedelem.jquery ? elem[0] : elem, this );},// 将元素添加进来add: function( selector, context ) {    // 对selector进行简单的判断var set = typeof selector === "string" ?jQuery( selector, context ) :jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),all = jQuery.merge( this.get(), set );return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?all :jQuery.unique( all ) );},andSelf: function() {return this.add( this.prevObject );}});// A painfully simple check to see if an element is disconnected// from a document (should be improved, where feasible).function isDisconnected( node ) {return !node || !node.parentNode || node.parentNode.nodeType === 11;}// 对同类结果组合改变的API进行统一的抽象jQuery.each({    // 获取单个父结点parent: function( elem ) {var parent = elem.parentNode;return parent && parent.nodeType !== 11 ? parent : null;},// 获取所有父结点parents: function( elem ) {return jQuery.dir( elem, "parentNode" );},parentsUntil: function( elem, i, until ) {return jQuery.dir( elem, "parentNode", until );},next: function( elem ) {return jQuery.nth( elem, 2, "nextSibling" );},prev: function( elem ) {return jQuery.nth( elem, 2, "previousSibling" );},nextAll: function( elem ) {return jQuery.dir( elem, "nextSibling" );},prevAll: function( elem ) {return jQuery.dir( elem, "previousSibling" );},nextUntil: function( elem, i, until ) {return jQuery.dir( elem, "nextSibling", until );},prevUntil: function( elem, i, until ) {return jQuery.dir( elem, "previousSibling", until );},siblings: function( elem ) {return jQuery.sibling( ( elem.parentNode || {} ).firstChild, elem );},children: function( elem ) {return jQuery.sibling( elem.firstChild );},contents: function( elem ) {return jQuery.nodeName( elem, "iframe" ) ?elem.contentDocument || elem.contentWindow.document :jQuery.makeArray( elem.childNodes );}}, function( name, fn ) {jQuery.fn[ name ] = function( until, selector ) {var ret = jQuery.map( this, fn, until );if ( !runtil.test( name ) ) {selector = until;}if ( selector && typeof selector === "string" ) {ret = jQuery.filter( selector, ret );}ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {ret = ret.reverse();}return this.pushStack( ret, name, slice.call( arguments ).join(",") );};});jQuery.extend({filter: function( expr, elems, not ) {if ( not ) {expr = ":not(" + expr + ")";}// 完全是通过调用sizzle进行过滤,支持not表示“包含内”或者是“包含外”return elems.length === 1 ?jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] :jQuery.find.matches(expr, elems);},// cur属于一个递归的调用过程,不断的将递归的结果放到cur里面,并添加到matched中,这个设计模式用得好dir: function( elem, dir, until ) {var matched = [],cur = elem[ dir ];while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {if ( cur.nodeType === 1 ) {matched.push( cur );}cur = cur[dir];}return matched;},// 获取第几个结点nth: function( cur, result, dir, elem ) {result = result || 1;var num = 0;for ( ; cur; cur = cur[dir] ) {if ( cur.nodeType === 1 && ++num === result ) {break;}}return cur;},// 递归获取兄弟结点,返回数组sibling: function( n, elem ) {var r = [];for ( ; n; n = n.nextSibling ) {if ( n.nodeType === 1 && n !== elem ) {r.push( n );}}return r;}});// Implement the identical functionality for filter and notfunction winnow( elements, qualifier, keep ) {// Can't pass null or undefined to indexOf in Firefox 4// Set to 0 to skip string checkqualifier = qualifier || 0;// grep函数在core.js中,若callback返回true,则elem保留// 如果qualifier为一个函数,则遍历elements,调用qualifier,若返回true,对象elem保留if ( jQuery.isFunction( qualifier ) ) {return jQuery.grep(elements, function( elem, i ) {var retVal = !!qualifier.call( elem, i, elem );return retVal === keep;});// 如果qualifier为一个dom结点,则直接比较elem比较} else if ( qualifier.nodeType ) {return jQuery.grep(elements, function( elem, i ) {return ( elem === qualifier ) === keep;});// 如果qualifier为string字符串,则} else if ( typeof qualifier === "string" ) {var filtered = jQuery.grep(elements, function( elem ) {return elem.nodeType === 1;});if ( isSimple.test( qualifier ) ) {    // 如果以任何字符开始,并且后续字符是非# [ . ,选择器,则直接返回使用sizzle过滤的结果,说明是单层级的return jQuery.filter(qualifier, filtered, !keep);} else {    // 其实这里的逻辑,加上下面的逻辑不就一样了吗?都是返回一个列表qualifier = jQuery.filter( qualifier, filtered );}}// 如果elem在qualifier中,则添加到结果中return jQuery.grep(elements, function( elem, i ) {return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;});}})( jQuery );

热点排行