Sự khác biệt giữa '$ (này)' và 'này' là gì?

Tôi hiện đang làm việc thông qua hướng dẫn này: Bắt đầu với jQuery

Đối với hai ví dụ dưới đây:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

Lưu ý trong ví dụ đầu tiên, chúng tôi sử dụng $(this)để nối thêm một số văn bản bên trong mỗi liphần tử. Trong ví dụ thứ hai, chúng tôi sử dụng thistrực tiếp khi đặt lại biểu mẫu.

$(this)dường như được sử dụng thường xuyên hơn nhiều this.

Tôi đoán là trong ví dụ đầu tiên, $()là chuyển đổi từng liphần tử thành một đối tượng jQuery để hiểu append()hàm trong khi trong ví dụ thứ hai reset()có thể được gọi trực tiếp trên biểu mẫu.

Về cơ bản chúng ta cần $()cho các hàm chỉ có jQuery đặc biệt.

Điều này có đúng không?

Có, bạn chỉ cần $()khi bạn sử dụng jQuery. Nếu bạn muốn trợ giúp của jQuery để thực hiện DOM, hãy ghi nhớ điều này.

$(this)[0] === this

Về cơ bản mỗi khi bạn nhận được một tập hợp các phần tử trở lại, jQuery sẽ biến nó thành một đối tượng jQuery . Nếu bạn biết bạn chỉ có một kết quả, thì đó sẽ là yếu tố đầu tiên.

$("#myDiv")[0] === document.getElementById("myDiv");

Và như thế...

$() là hàm tạo của jQuery.

this là một tham chiếu đến phần tử DOM của lệnh gọi.

Về cơ bản, trong $(this), bạn chỉ truyền thisvào $()dưới dạng tham số để bạn có thể gọi các phương thức và hàm jQuery.

Có, bạn cần $(this)các hàm jQuery, nhưng khi bạn muốn truy cập các phương thức javascript cơ bản của phần tử không sử dụng jQuery, bạn chỉ có thể sử dụng this.

Khi sử dụng jQuery, nên sử dụng $(this)thường xuyên. Nhưng nếu bạn biết (bạn nên tìm hiểu và biết) sự khác biệt, đôi khi nó thuận tiện hơn và nhanh hơn để sử dụng chỉ this. Ví dụ:

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

dễ dàng và tinh khiết hơn

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

thislà phần tử, $(this)là đối tượng jQuery được xây dựng với phần tử đó

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

Nhìn sâu hơn

this^MDN được chứa trong ngữ cảnh thực thi

Phạm vi đề cập đến bối cảnh thực thi ^ECMA hiện tại . Để hiểu this, điều quan trọng là phải hiểu cách thức bối cảnh thực thi hoạt động trong JavaScript.

bối cảnh thực hiện ràng buộc điều này

Khi điều khiển đi vào bối cảnh thực thi (mã đang được thực thi trong phạm vi đó), môi trường cho các biến được thiết lập (Môi trường biến đổi và biến đổi - về cơ bản, điều này thiết lập một khu vực để các biến có thể truy cập được và một khu vực dành cho các biến cục bộ được lưu trữ), và các ràng buộc thisxảy ra.

jQuery liên kết này

Bối cảnh thực hiện tạo thành một ngăn xếp hợp lý. Kết quả là bối cảnh sâu hơn trong ngăn xếp có quyền truy cập vào các biến trước đó, nhưng các ràng buộc của chúng có thể đã bị thay đổi. Mỗi khi jQuery gọi một hàm gọi lại, nó sẽ thay đổi liên kết này bằng cách sử dụng apply^MDN .

callback.apply( obj[ i ] )//where obj[i] is the current element

Kết quả của việc gọi applylà bên trong các hàm gọi lại jQuery, thisđề cập đến phần tử hiện tại đang được sử dụng bởi hàm gọi lại.

Ví dụ, trong .each, chức năng gọi lại thường được sử dụng cho phép .each(function(index,element){/*scope*/}). Trong phạm vi đó, this == elementlà đúng.

Các cuộc gọi lại jQuery sử dụng hàm áp dụng để liên kết hàm được gọi với phần tử hiện tại. Phần tử này xuất phát từ mảng phần tử của đối tượng jQuery. Mỗi đối tượng jQuery được xây dựng chứa một mảng các phần tử khớp với ^{API jQuery} chọn được sử dụng để khởi tạo đối tượng jQuery.

$(selector)gọi hàm jQuery (hãy nhớ rằng đó $là một tham chiếu đến jQuery, mã window.jQuery = window.$ = jQuery;:). Trong nội bộ, hàm jQuery khởi tạo một đối tượng hàm. Vì vậy, trong khi nó có thể không rõ ràng ngay lập tức, sử dụng sử dụng $()nội bộ new jQuery(). Một phần của việc xây dựng đối tượng jQuery này là tìm tất cả các kết quả khớp của bộ chọn. Hàm tạo cũng sẽ chấp nhận các chuỗi và phần tử html . Khi bạn chuyển thisđến hàm tạo jQuery, bạn sẽ chuyển phần tử hiện tại cho một đối tượng jQuery được xây dựng . Đối tượng jQuery sau đó chứa cấu trúc giống như mảng của các phần tử DOM khớp với bộ chọn (hoặc chỉ phần tử đơn trong trường hợp this).

Khi đối tượng jQuery được xây dựng, API jQuery hiện được hiển thị. Khi một hàm api jQuery được gọi, nó sẽ lặp bên trong cấu trúc giống như mảng này. Đối với mỗi mục trong mảng, nó gọi hàm gọi lại cho api, ràng buộc hàm gọi lại thisvới phần tử hiện tại. Cuộc gọi này có thể được nhìn thấy trong đoạn mã ở trên, nơi objcó cấu trúc giống như mảng và ilà trình vòng lặp được sử dụng cho vị trí trong mảng của phần tử hiện tại.

Vâng, bằng cách sử dụng $(this), bạn đã kích hoạt chức năng jQuery cho đối tượng. Bởi chỉ cần sử dụng this, nó chỉ có chức năng Javascript chung.

thistham chiếu một đối tượng javascript và $(this)được sử dụng để đóng gói với jQuery.

Ví dụ =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')