Tại sao tôi phải sử dụng $ (this)?

Question

thể trùng lặp:
jQuery $(this) vs this

Trong jquery đôi khi tôi thấy rằng trong vòng một chức năng tôi phải sử dụng $(this) vì this sẽ không làm việc:

var listItems = $('li'); 
listItems.each(function(index) { 
    $(this).css({ 

    }) 
}) 

Bất kỳ ý tưởng như là lý do tại sao?

Answer 1

• $() là jQuery constructor chức năng
• this là một tham chiếu đến DOM element of invocation

Vì vậy, về cơ bản, bạn đang biến một DOM reference thành một jQuery object

Trong ví dụ của bạn, bạn cũng có thể sử dụng

listItems.each(function(index, element){ 
    $(element).css({ 
    }); 
}); 

..số .each() sẽ chuyển cả phần tử, chỉ mục + trong phần gọi lại.

Answer 2

this là phần tử DOM gốc. $(this) là một đối tượng jQuery cho phép bạn gọi các chức năng như .css() trên đó.

Answer 3

this thường là đối tượng DOM theo mặc định, có nghĩa là nó chỉ có các phương thức trên đối tượng DOM bình thường.

Nếu bạn muốn gọi hàm thư viện cụ thể (như hàm .css của jQuery), trước tiên bạn phải chuyển đổi nó thành đối tượng jQuery đầy đủ, theo mặc định, $() sẽ chuyển sang đối tượng DOM.

(Bạn cũng có thể chuyển các thứ khác tới $(), chẳng hạn như chuỗi HTML (để tạo đối tượng DOM bọc jQuery mới) hoặc bộ chọn CSS (để nhận tập hợp đối tượng jQuery tương ứng với đối tượng DOM khớp với bộ chọn

Answer 4

Tôi biết tôi hơi muộn về chủ đề này nhưng tôi chỉ muốn đưa ra một thực tế rằng gói dự phòng của các đối tượng DOM là một trong những tội ác thường gặp nhất đối với jQuery. xây dựng có thể có hiệu ứng to lớn hiệu suất-khôn ngoan và nó dễ dàng như vậy để làm điều đó bạn không có lý do gì không.

Thông thường, khi mọi người có một đối tượng DOM (cho dù nó được tham chiếu là this hoặc element) họ sẽ cố gắng để quấn nó mỗi khi họ cần truy cập vào một phương pháp jQuery:

jQuery(this).css('a', 'b'); 

Vấn đề là khi bạn làm điều này nhiều lần:

jQuery(this).css('a', 'b'); 
jQuery(this).find('span').attr(...); 
jQuery(this).... 

Mỗi lần jQuery() được gọi, một cá thể jQuery mới được xây dựng. Đó là loại hoạt động là tốn kém và nên tránh nếu có thể - đặc biệt là trong vòng!

Để tránh điều này, đối với một, bạn có thể sử dụng chuỗi với tất cả các phương thức trả về một cá thể jQuery $(this).css(a,b).attr(a,b)...). Thời gian còn lại, bạn nên có một biến khai báo trong nước đề cập đến trường hợp jQuery và sau đó chỉ cần sử dụng:

var self = jQuery(this); 
self.css(...); 
self.attr(...); 

Nếu bạn đang làm điều này trong một hàm .each() gọi lại, vẫn còn là một đối tượng jQuery mới được xây dựng trên mỗi lần lặp đơn lẻ. Bạn có thể tránh điều này bằng cách có một đối tượng jQuery generic mà bạn liên tục đột biến và sau đó bạn có thể chạy các phương pháp jQuery tắt rằng trường hợp duy nhất:

Nhìn này:

jQuery.single = function(a){ 
    return function(b){ 
     a[0] = b; 
     return a 
    } 
}(jQuery([1])); 

Bây giờ xem xét điều này:

$('a').each(function(i){ 
    $.single(this).append('Anchor number ' + i); 
}); 

Chỉ một đối tượng jQuery đang được sử dụng. Bạn có thể làm cho nó thậm chí còn nhanh hơn bằng cách tránh các nghị quyết định:

$_ = $.single; 
$('a').each(function(i){ 
    $_(this).append('Anchor number ' + i); 
}); 

Thực phẩm cho các tư tưởng. Thông tin thêm tại đây: http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

Answer 5

Nếu bạn đang sử dụng Firefox, hãy thử console.log ($ (this)) và console.log (this) để xem sự khác biệt.