jQuery add() 函数和 jQuery 对象的上下文

Question

鉴于以下 HTML 示例...

<div id='div1'>div one</div>
<div id='div2'>div two</div>

...我发现下面的jQuery代码...

$('#div1').click(function() {

    var $d = $(this);    // Using 'this' instead of '#div1'

    $d.add('#div2').remove();
});

...不会将#div2 添加到$d 引用的集合中，但是这段代码...

$('#div1').click(function() {

    var $d = $('#div1');    // Using '#div1' instead of 'this'

    $d.add('#div2').remove();
});

...成功添加#div2。

在咨询 firebug 时，我发现使用 $(this) 给 jQuery 对象一个上下文 #div1，但是使用 $('#div1') 给对象一个上下文 document。

鉴于我尝试过的这些信息...

var $d = $(this, document);

...add() 函数按预期工作。

所以问题来了。有人可以向我解释为什么在使用 $(this) 和 $('#div1') 时分配不同的上下文吗？

Answer 1

编辑以更好地解决您的问题：
First, look at the relevant code here，这就是 jQuery 处理 $() 调用的方式。当你传递一个 DOM 元素（this 是 div 本身）时，上下文是 DOM 元素本身，这更好地允许处理文档片段等。当你传递一个字符串时，默认上下文是 @987654327 @ （因为它是搜索的最高祖先）。请记住，$(selector, context) 实际上是在暗中调用context.find(selector)，因此如果没有指定任何内容，则从文档开始是有意义的。

注意：你可以随时检查上下文，它是一个可用的属性，像这样：$(this).context

对于.add() 行为：
.add() 使用与您要添加到的 jQuery 元素相同的上下文进行选择，因此您看到的是预期的行为。为了更好的描述，see how .add() is written:

add: function( selector, context ) {
    var set = typeof selector === "string" ?
                jQuery( selector, context || this.context ) :
                jQuery.makeArray( selector ),
                all = jQuery.merge( this.get(), set );

    return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
            all :
            jQuery.unique( all ) );
    }

如果没有传递，请注意它如何使用当前上下文。但是，要覆盖它，它接受一个上下文，您可以将document 传递给它并获得您想要的结果，如下所示：

$('#div1').click(function() {
   $(this).add('#div2', document).remove();
});