jQuery 中的 this 與 $(this)

在許多 jQuery 範例中常出現 this 與 $(this), 甚麼時候該用 this, 甚麼時候該用 $(this), 很多人時常會被搞混,  在 jQuery 語法中 this 是被選取器選取的 DOM 物件, 而 $(this) 才是此 DOM 物件經過包裹後的 jQuery 物件, 因此如果要存取 DOM 物件的屬性或方法時須用 this; 而要存取 jQuery 物件之屬性與方法時則須用 $(this), 參考 :

# 淺談jQuery this和$(this)的區別及獲取$(this)子元素物件的方法

在 jQuery 敘述中可以用 $(this) 來避免重複使用選擇器選取元素, 例如對於按鈕元素 button :

<button id="btn">OK</button>

用 jQuery 監聽 click 事件, 每按一次顯示已按次數 :

var cnt=0;
$("#btn").on("click", function(){
  $("#btn").html("你按了" + (++cnt) + "次");
  });

此例中的事件處理函式需要再一次存取按鈕之 jQuery 物件, 若用 $("#btn") 就重複使用選擇器兩次, 應該改為 :

var cnt=0;
$("#btn").on("click", function(){
  $(this).html("你按了" + (++cnt) + "次");
  });

完整程式碼參考 :

測試 1 : this 與 $(this) [看原始碼]

一般常犯的錯誤例如在存取表單時, this.val() 是錯誤的, 因為 DOM 物件沒有 val() 方法, 要 jQuery 物件才有, 即應該是 $(this).val() 才對.