`
haiyupeter
  • 浏览: 427604 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jQuery中的traversing查找及遍历

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

学习重点:
正则表达式深化

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

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

同类方法的抽取
    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 Sizzle
	rmultiselector = /,/,
	// 以任何字符开始,并且后续字符是非# [ . ,的正则表达式
	isSimple = /^.[^:#\[\.,]*$/,
	slice = Array.prototype.slice,
	POS = jQuery.expr.match.globalPOS,
	// methods guaranteed to produce a unique set when starting from a unique set
	guaranteedUnique = {
		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  0 ) {
				// Make sure that the results are unique
				for ( n = length; n = 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  -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 parent
		if ( !elem ) {
			return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;
		}

		// index in selector
		if ( typeof elem === "string" ) {
			return jQuery.inArray( this[0], jQuery( elem ) );
		}

		// Locate the position of the desired element
		return jQuery.inArray(
			// If it receives a jQuery object, the first element is used
			elem.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 not
function winnow( elements, qualifier, keep ) {

	// Can't pass null or undefined to indexOf in Firefox 4
	// Set to 0 to skip string check
	qualifier = 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 );
分享到:
评论

相关推荐

    jQuery1.10.3_API中文手册

    jQuery 提供了丰富的遍历方法,如 `.children()`、`.parents()`、`.siblings()`、`.next()` 和 `.prev()`,这些方法使开发者能够轻松地在DOM树中移动,找到关联的元素。 **3. DOM操作(Manipulation)** jQuery ...

    jquery1.5 中文API

    在本文中,我们将深入探讨jQuery 1.5版本的中文API,帮助开发者更好地理解和运用这一经典版本。 一、选择器(Selectors) jQuery的选择器基于CSS,使得选取DOM元素变得异常简单。例如,`$("#id")`用于选取ID为"id...

    jQuery1.4.1及中文API

    8. **遍历和过滤(Traversing and Filtering)**: jQuery提供了方便的遍历和过滤方法,如`$(element).children()`获取子元素,`$(element).siblings()`获取同级元素,`$(element).filter(selector)`筛选匹配选择器的...

    jquery中文Api 共两个,一个带目录,可搜索,另一个按字母排序

    **jQuery**的核心特性包括选择器(Selectors)、遍历(Traversing)和操作DOM(DOM Manipulation)。选择器允许开发者高效地选取页面中的HTML元素,例如`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有具有...

    jQuery 1.6 中文API

    7. **遍历和过滤(Traversing and Filtering)**:`.children()`, `.parent()`, `.siblings()`等方法用于在DOM树中移动,`.filter()`, `.not()`, `.first()`, `.last()`等用于筛选元素集合。 8. **AJAX(Ajax)**:...

    jqueryAPI jquery中文api jquery1.4

    七、遍历和过滤(Traversing & Filtering) `children()` 和 `find()` 用于查找子元素,`parent()` 和 `parents()` 查找父元素。`next()` 和 `prev()` 获取相邻元素,`siblings()` 获取同级元素。`filter()` 和 `not...

    JQuery 1.5API中文参考手册CHM版

    8. **遍历(Traversing)**:`children()`, `parent()`, `siblings()`, `next()`, `prev()`等方法帮助开发者在DOM树中移动,查找相关元素。 9. **属性操作(Attribute Handling)**:`attr()`用于获取或设置元素...

    JQuery1.8中文API文档(附带js)

    2. **DOM操作(Traversing)**:包括元素的查找、过滤、遍历,如`.children()`、`.parent()`、`.siblings()`等。 3. **事件处理(Events)**:如`.on()`用于绑定事件,`.trigger()`触发事件,`.off()`移除事件绑定...

    Jquery中文API.zip

    2. **DOM操作(Traversing)**:包括元素的查找、过滤和遍历,如`.children()`查找子元素,`.parent()`获取父元素,`.siblings()`获取同级元素。 3. **属性操作(Attributes)**:用于读取和修改HTML元素的属性,如...

    Jquery1.2中文API,jquery-1[1].2.6.Mini,十五天学会Jquery

    2. **DOM操作(Traversing)**:包括元素的查找、过滤、添加和删除。例如`find()`, `children()`, `parent()`, `append()`, `remove()`等方法,使DOM操作变得简单。 3. **属性操作(Attributes)**:`attr()`, `...

    jQueryAPI CHM格式 中文

    `.children()`, `.parent()`, `.siblings()`, `.next()`, `.prev()`等方法用于遍历和查找元素关系,而`.filter()`, `.not()`, `.is()`等则用于元素的过滤和检查。 八、AJAX(Ajax) jQuery的AJAX功能包括`$.ajax()`...

    JQuery API中文版CHM

    如`$.each()`, `$.trim()`, `$.inArray()`, `$.extend()`等工具方法,分别用于迭代数组或对象、去除字符串两端空格、查找数组中的元素位置以及合并对象。 ### 10. **版本更新与兼容性(Version Updates & ...

    jquery实战中文版+英文版+jquery1.7.2中文API+jquery-1.7.2.min.js.rar

    jQuery的核心概念包括选择器(Selectors)、遍历(Traversing)、DOM操作(DOM Manipulation)、事件处理(Events)、动画(Effects)和Ajax(Ajax)。选择器允许开发者高效地找到HTML元素,遍历则是对元素集合进行...

    jquery源码

    1. **家族遍历(Traversing)**:`parent()`, `children()`, `siblings()`, `next()`, `prev()`等方法帮助我们遍历元素的关系,更好地控制DOM结构。 2. **过滤与查找(Filtering & Searching)**:通过`filter...

    锋利的jQuery源代码

    2. **遍历(Traversing)**:jQuery提供了多种方法用于遍历DOM树,如`.parent()`, `.children()`, `.siblings()`等。这些方法的实现涉及到DOM节点的查找和操作,是理解jQuery工作原理的关键部分。 3. **DOM操作...

    jquery api网页版(离线)

    2. **DOM操作(Traversing)**:jQuery提供了丰富的DOM遍历方法,如`children()`,`parent()`,`siblings()`等,用于查找、添加或删除DOM元素。 3. **属性操作(Attributes)**:可以使用`attr()`和`removeAttr()`...

    jQuery最新中文API(html格式)

    jQuery的核心特性包括选择器(Selectors)、遍历(Traversing)和操作DOM(Manipulation)。选择器类似于CSS,允许开发者根据元素的ID、类名、属性等快速选取DOM元素。遍历方法则帮助开发者在选取的元素集合中移动,...

    jquery1.8.3中文手册

    7. **遍历(Traversing)**:`.children()`, `.parent()`, `.siblings()`, `.next()`, `.prev()`等方法用于遍历DOM树,帮助开发者快速定位相关元素。 8. **插件系统(Plugins)**:jQuery的插件机制让开发者能扩展...

    Jquery 1.3 API(对jquery1.3版本中的接口有详细的说明)

    5. **遍历与过滤(Traversing & Filtering)**:`children()`、`parents()`、`siblings()`用于遍历和查找元素的子元素、父元素和同级元素。`next()`、`prev()`查找相邻元素。`filter()`和`:first`、`:last`、`:even`...

    jquery chm 离线文档 附代码

    总之,jQuery离线文档是每个JavaScript开发者不可或缺的工具,无论是在项目开发中查找API,还是学习jQuery的基础知识,都能发挥重要作用。配合附带的代码,可以更直观地了解jQuery的实际应用,进一步提高编程效率。

Global site tag (gtag.js) - Google Analytics