下面两段代码在jQuery的官网见到的,何时用$(this)
,又何时用this
呢?
$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); # $(this) }); });
$(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); # this }); }); });
this是html元素对象吧~
$(this)成为jQuery对象
this 是 JavaScript 中的关键字。
$(this) 可以认为是用 jQuery 包装过 JavaScript 中的 this,包装后 $(this) 就会继承 jQuery 的方法。
本质就是JavaScript与jQuery对象的转换
$('a').click(function(){ // 这里的 this 指向当前点击的DOM节点,也就是a。可以调用DOM方法,比如this.getAttribute, this.tagName ... // 这里的 $(this) 表示包装过的一个 jQuery 对象,拥有 jQuery 的一些方法,比如 $(this).addClass(), $(this).hide() ... });
如果你要使用html元素本身的属性或方法就需要使用this,如果你要使用jQuery包装后的方法或属性就要$(this),一般则有如下的关系.
$(this)[0] == this;
上文的代码是要使用this的地方是要调用表单form的有reset方法,而这一方法jQuery没有包装支持,所以才有this.reset(),也可以使用$(this)[0].reset();
关于什么时候使用二者?可以看如下例子:
<a href="http://.com/q/1010000000125418" target="_blank" data-id="1010000000125418">jQuery</a>
$('a').click(function(){ this.innerHTM==$(this).html()=='jQuery';//三者是一样的. this.getAttribute('href')==this.href==$(this).attr('href')//三者是一样的; this.getAttribute('target')==this.target==$(this).attr('target')//三者是一样的; this.getAttribute('data-id')==$(this).attr('data-id')//二者是一样的; });
从以上代码可以看出二者的差异.
$(this)是jquery对象,能调用jquery的方法,例如click(), keyup()。
而this,则是html元素对象,能调用元素属性,例如this.id,this.value。
例如假设已经使得this和$(this)都指向了input对象了,若要获得input的值,可以this.value,但$(this)就得$(this).val()。