jquery里面的$(this)和this的區別

感謝原文作者：何少旭
原文鏈接：https://www.cnblogs.com/heshaoxu/p/7672736.html

前言

當你用的是jquery時，就用$(this)，如果是JS，就用this。

示例

/*JQuery*/
$(this).html( $(this).html() + " BAM! ");
/*JS*/
this.innerHTML();
this.reset(); 

這個里的html()是JQUERY方法，用$(this).html()，當然，JS里也有相似方法innerHTML，如果用innerHTML，就要這樣寫了，這里的reset是JS方法，所以同上得用this.reset()。

jquery對象$(this)[0]等同於JS里的元素this，這里的this是一樣的，相信你應該看出來了，JS里的元素只要包上$()就是jquery對象了，而jquery的對象只要加上[0]或者.get(0)，就是js元素了。

解釋

$(this)是jquery對象，this就是簡單指當前元素。jquery對象不能直接指定元素的屬性（ele.style），需要get（index）或者直接（index）取得對象中元素才行
JQuery中的 $() 這個符號，實際上這個符號在JQuery中相當於JQuery（），即$(this)=jquery(this);
也就是說，這樣可以返回一個jquery對象。那么，當你在網頁中alert($('#id'));時，會彈出一個[object Object ]，這個object對象，也就是jquery對象了。

那么，我們再回過頭來說$(this)，這個this是什么呢？假設我們有如下的代碼：

$("#desktop a img").each(function(index){

      alert($(this));

      alert(this);

}

那么，這時候可以看出來：

alert($(this)); //彈出的結果是[object Object ]

alert(this); //彈出來的是[object HTMLImageElement]

jQuery中this與$(this)的區別

$("#textbox").hover(
     function() {
              this.title = "Test";
     },
    fucntion() {
              this.title = "OK”;
    }
);

這里的this其實是一個Html 元素(textbox)，textbox有text屬性，所以這樣寫是完全沒有什么問題的。

但是如果將this換成$(this)就不是那回事了，Error–報了。this與$(this)的區別在此。

//Error Code：
$("#textbox").hover(
     function() {
          $(this).title ＝ "Test";
     },
     function() {
          $(this).title = "OK";
     }
);

這里的$(this)是一個JQuery對象，而jQuery對象沒有title 屬性，因此這樣寫是錯誤的。

JQuery擁有attr()方法可以get/set DOM對象的屬性，所以正確的寫法應該是這樣：

正確的代碼：

$("#textbox").hover(
     function() {
          $(this).attr(’title’, ‘Test’);
     },
     function() {
          $(this).attr(’title’, ‘OK’);
     }
);