菜鳥工程師肉豬: JQuery中的this

2017/8/15

JQuery中的this

剛接觸JavaScript和jQuery時常碰到的問題就是，為什麼this無法呼叫jQuery的方法，然後在console看到類似以下錯誤訊息


test.html:16 Uncaught TypeError: this.val is not a function
    at HTMLInputElement.<anonymous> (test.html:16)
    at HTMLInputElement.dispatch (jquery-1.12.4.js:5226)
    at HTMLInputElement.elemData.handle (jquery-1.12.4.js:4878)

這是因為JavaScript的this和jQuery的this不同。JavaScript的this無法調用jQuery的方法。

例如下面是個html文件，裡面有三個按鈕。

<html>
  <head>
  </head>
  <body>
    <input type="button" value="A"/>
    <input type="button" value="B"/>
    <input type="button" value="C"/>
  </body>
</html>

通常我們需要取得按鈕按下去所對應的值時，會利用this，但如要用jQuery的val()來取值，則要使用jQuery()將javascript的this傳入，例如$(this).val()。

下面的例子中使用jQuery取得HTML的input標籤，然後設定click事件

$("input").click(function(){
  console.log($(this).val());
});

上面的this是JavaScript的this，其未被jQuery控制，所以無法使用jQuery提供的方法如this.val()來取值，需呼叫jQuery()並傳入this才是jQuery能控制的物件。

若要從jQuery物件取得原本的JavaScript DOM元素，則jQuery物件中的第一個元素即為原本的DOM元素

<html>
  <head>
  </head>
  <body>
    <input type="button" id="input_a" value="A"/>
  </body>
</html>
<script>
var $a = $("#input_a");
var a = $a[0];
</script>

例如上面使用$("#input_a")取得<input>然後放入變數$a，而$a[0]則為原本的<input>DOM元素