jquery - jQuery ('.foo' ).find ('.bar' ) 是否等同于 jQuery ('.bar' ，jQuery ('.foo' ))？

Question

使用:

var $a = $('.foo').find('.bar');

var $b = $('.bar', $('.foo'));

我知道 $b 会将其上下文设置为 $('.foo')，而 $a。除此之外，我相信这两个对象是相同的，对吗？

跟进问题:

1. 由于搜索有效地源自同一对象，性能也会相同吗？
2. 更严格的上下文是否可以提高核心 jquery 操作的性能？ (我知道它是供插件使用的。)

谢谢!

Answer 1

编辑:

是的，它们是等价的，这是来源

// HANDLE: $(expr, [context])
// (which is just equivalent to: $(content).find(expr)
} else
    return jQuery( context ).find( selector );

要有效地使用上下文，它需要是一个 HTMLElement，否则上下文就是 document

find()在 jQuery 1.3.2 中是这样实现的

find: function( selector ) {
    if ( this.length === 1 ) {
        var ret = this.pushStack( [], "find", selector );
        ret.length = 0;
        jQuery.find( selector, this[0], ret );
        return ret;
    } else {
        return this.pushStack( jQuery.unique(jQuery.map(this, function(elem){
            return jQuery.find( selector, elem );
        })), "find", selector );
    }
}

find() 使用 Sizzle 选择器引擎来执行实际的查找工作(查看 jQuery 源代码中的第 2364 行)。

和pushStack是

// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
    // Build a new jQuery matched element set
    var ret = jQuery( elems );

    // Add the old object onto the stack (as a reference)
    ret.prevObject = this;

    ret.context = this.context;

    if ( name === "find" )
        ret.selector = this.selector + (this.selector ? " " : "") + selector;
    else if ( name )
        ret.selector = this.selector + "." + name + "(" + selector + ")";

    // Return the newly-formed element set
    return ret;
}

布兰登·亚伦 (Brandon Aaron) 在 understanding the context in jQuery 上写了一篇很棒的文章