'$（this）'和'this'有什么區別？

Question

我目前正在研究本教程： jQuery入門

對於以下兩個示例：

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

注意在第一個示例中，我們使用$(this)在每個li元素內附加一些文本。 在第二個示例中，我們在重置表單時直接使用this 。

$(this)似乎比this經常使用。

我的猜測是在第一個示例中， $()將每個li元素轉換為一個能夠理解append()函數的jQuery對象，而在第二個示例中， reset()可以直接在表單上調用。

基本上，我們需要$()用於特殊的僅jQuery函數。

這個對嗎？

Answer 1

是的，使用jQuery時只需要$() 。 如果您想要jQuery的幫助來做DOM事情，請記住這一點。

$(this)[0] === this

基本上，每次您返回一組元素時，jQuery都會將其轉換為jQuery對象 。 如果您知道只有一個結果，它將在第一個元素中。

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

等等...

Answer 2

$()是jQuery構造函數。

this是對DOM調用元素的引用。

因此，基本上，在$(this) ，您只是將$()的this傳遞為參數，以便可以調用jQuery方法和函數。

Answer 3

是的，您需要$(this)用於jQuery函數，但是當您要訪問不使用jQuery的元素的基本javascript方法時，只需使用this 。

Answer 4

使用jQuery ，通常建議使用$(this) 。 但是，如果您知道（應該學習並知道）區別，那么有時使用this會更方便快捷。 例如：

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

比起更容易和更純凈

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

Answer 5

this是元素， $(this)是使用該元素構造的jQuery對象

$(".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);
});

更深入的了解

this ^MDN 包含在執行上下文中

范圍是指當前的執行上下文^ECMA 。 為了理解this ，重要的是要了解執行上下文在JavaScript中的運行方式。

執行上下文將其綁定

當控制進入的執行上下文（代碼是在該范圍內被執行）對於變量的環境被建立（詞匯和可變環境 - 基本上此設置了一個區域變量的輸入，其已經訪問，且為局部變量是一個區域存儲的），並且結合this發生。

jQuery將此綁定

執行上下文形成邏輯堆棧。 結果是，堆棧深處的上下文可以訪問以前的變量，但是它們的綁定可能已更改。 每次調用jQuery的一個回調函數，它改變了這個使用綁定 apply ^MDN 。

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

調用apply的結果是在jQuery回調函數內部， this是指回調函數正在使用的當前元素 。

例如，在.each ，常用的回調函數允許.each(function(index,element){/*scope*/}) 。 在此范圍內， this == element為true。

jQuery回調使用apply函數將正在調用的函數與當前元素綁定。 該元素來自jQuery對象的element數組。 構造的每個jQuery對象都包含一個元素數組，這些元素與用於實例化jQuery對象的選擇器^{jQuery API}匹配。

$(selector)調用jQuery函數（記住$是對jQuery的引用，代碼： window.jQuery = window.$ = jQuery; ）。 在內部，jQuery函數實例化一個函數對象。 因此，雖然可能不是立即顯而易見，但在內部使用$()使用new jQuery() 。 該jQuery對象的部分構造是查找選擇器的所有匹配項。 構造函數還將接受html字符串和元素 。 當您this傳遞給jQuery構造函數時，您正在傳遞要使用構建的jQuery對象的當前元素 。 然后，jQuery對象包含與選擇器匹配的DOM元素的類似數組的結構（對於this僅包含單個元素）。

構造jQuery對象后，便會公開jQuery API。 當一個jQuery API函數被調用時，它會在內部遍歷這個陣列狀結構。 對於數組中的每個項目，它都會調用api的回調函數，並將回調的this綁定到當前元素。 可以在上面的代碼段中看到此調用，其中obj是類似數組的結構，而i是用於當前元素數組中位置的迭代器。

Answer 6

是的，通過使用$(this) ，您為該對象啟用了jQuery功能。 僅通過使用this ，它僅具有通用Javascript功能。

Answer 7

this參考一個javascript對象和$(this)用於封裝用jQuery。

例子=>

// 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')