首先我们回顾一下原始JS(Document 对象)选择器，因为这是所有其他选择器之基础。
id选择器:document.getElementById("test");
name选择器:document.getElementsByName("test");
节点选择器:document.getElementsByTagName("p");
class选择器:document.getElementsByClassName("test");
jQuery.find()解析
首先来一个示例：
查找id为parent下的class为children的子元素
$('#parent').find('.children')find()函数用于选取每个匹配元素的符合指定表达式的后代元素，并以jQuery对象的形式返回。
上源码
find: function( selector ) {
var i, ret,
len = this.length,
self = this;
//第一种
if ( typeof selector !== "string" ) {
return this.pushStack( jQuery( selector ).filter( function() {
for ( i = 0; i < len; i++ ) {
if ( jQuery.contains( self[ i ], this ) ) {
return true;
}
}
} ) );
}
ret = this.pushStack( [] );
//第二种
for ( i = 0; i < len; i++ ) {
jQuery.find( selector, self[ i ], ret );
}
return len > 1 ? jQuery.uniqueSort( ret ) : ret;
},find接受一个参数表达式selector：选择器(字符串)、DOM元素(Element)、jQuery对象。分两种情况处理：
第一种，如果传入的参数是非字符串，则先通过jQuery选择器将selector查找出来，然后过滤出包含于当前jQuery对象所匹配的元素的节点。可以看出过滤条件中jQuery.contains( self[ i ], this )是关键，该函数使用的是Sizzle选择器中的函数，在Sizzle引擎中有分析
如果选择器是字符串，调用jQuery.find （= Sizzle）直接处理
关于find性能的比较解答
filter()过滤DOM元素包装集，是指操作当前元素集，删除不匹配的元素，得到一个新的集合
find()在当前选中元素的上下文中找到符合条件的后代，返回的是子元素
由上面可以看出，filter()是对选中的元素集合（比较臃肿）操作，得到这些元素中符合条件的元素，而find()是得到选中元素中符合条件（过滤后的精简）的后代子元素。
关于end()方法，用来返回破坏性修改之前的选择,可以减少元素的重复查找，更加有助于提高选择效率
$('div').filter('.div1').end();//返回的是使用filter()之前的选择元素，即$('div')
$('div').find('.div1').end();//返回的是使用find()之前的选择元素，即$('div')
网友评论文明上网理性发言 已有0人参与
发表评论: