jquery $(this) 和this的区别

首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($('#id'));时,会弹出一个[object Object ],这个object对象,也就是jquery对象了。
那么,我们再回过头来说$(this),这个this是什么呢?假设我们有如下的代码:

<input id="jq" type="text" value=1>
$("#jq").click(function(){
alert($(this)); // [object Object ]
alert(this); // [object HTMLInputElement]
console.log($(this)); // r.fn.init [input#jq]
console.log(this); // <input id="jq" type="text" value="1">
console.log(this.value); // 1
console.log($(this).value); // undefined
console.log($(this).children()); // r.fn.init [prevObject: r.fn.init(1)]
console.log(this.children()); // Uncaught TypeError: this.children is not a function
});

也就是说,this返回的是一个html对象,也就是节点,他可以获取到属性值,但是html对象不具有function方法,自然会报错,因此需要使用$(this)才能够调用方法。

相关推荐