jQuery thêm() chức năng và bối cảnh của jQuery đối tượng

Question

Do theo gương HTML ...

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

... Tôi thấy rằng mã jQuery sau ...

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

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

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

. ..would không thêm #div2 vào tập tham chiếu bởi $d, nhưng mã này ...

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

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

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

.. .successfully đã thêm #div2.

Khi tư vấn firebug, tôi thấy rằng việc sử dụng $(this) đã cho đối tượng jQuery ngữ cảnh #div1, nhưng làm $('#div1') cho đối tượng ngữ cảnh document.

Với thông tin này tôi đã cố gắng ...

var $d = $(this, document); 

... và add() chức năng làm việc như mong đợi.

Vì vậy, đây là câu hỏi. Ai đó có thể giải thích cho tôi lý do tại sao một ngữ cảnh khác được chỉ định khi sử dụng $(this) và $('#div1')?

Answer 1

Chỉnh sửa để giải quyết tốt hơn câu hỏi của bạn:
First, look at the relevant code here, đây là cách jQuery xử lý cuộc gọi $(). Khi bạn chuyển một phần tử DOM (mà là this, chính bản thân nó là div), điều này tốt hơn cho phép xử lý các đoạn tài liệu, v.v. Khi bạn truyền một chuỗi, ngữ cảnh mặc định là document (vì nó tổ tiên hàng đầu để tìm kiếm từ). Hãy nhớ rằng $(selector, context) thực sự đang gọi context.find(selector) dưới trang bìa, do đó, bạn nên bắt đầu tại tài liệu nếu không có gì được chỉ định.

Lưu ý: bạn luôn có thể kiểm tra điều kiện, nó là một tài sản có sẵn, như thế này: $(this).context

Đối với hành vi .add():
.add() sử dụng bối cảnh tương tự để lựa chọn như các yếu tố jQuery bạn đang thêm để, những gì bạn đang thấy là hành vi mong đợi. Để có mô tả tốt hơn, 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)); 
    } 

Lưu ý cách sử dụng ngữ cảnh hiện tại nếu không có thông báo nào. Tuy nhiên, để ghi đè điều này, nó chấp nhận ngữ cảnh để bạn có thể vượt qua document và nhận được kết quả mong muốn, như sau:

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