频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jquery选择器之find
2017-06-16 09:20:26      个评论    来源:Lockey23的博客  
收藏   我要投稿

jquery选择器之find

首先我们回顾一下原始JS(Document 对象)选择器,因为这是所有其他选择器之基础.

id选择器:document.getElementById(“test”);

name选择器:document.getElementsByName(“test”);

节点选择器:document.getElementsByTagName(“p”);

class选择器:document.getElementsByClassName(“test”);

jQuery.find()解析

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()方法,用来返回破坏性修改之前的选择,可以减少元素的重复查找,更加有助于提高选择效率

(′p′).filter(′.p1′).end();//返回的是使用filter()之前的选择元素,即(‘p’)

(′p′).find(′.p1′).end();//返回的是使用find()之前的选择元素,即(‘p’)

点击复制链接 与好友分享!回本站首页
上一篇:学习Mocha
下一篇:JSTL标签库
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站