剛接觸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元素
2 則留言:
從第一個 js 文章開始看
哈,要小心喔,我JavaScript經驗很少。
張貼留言