javascript 的 this 与 jQuery 的 $(this) 的比较

字数345 大约花费1分钟

目录

  1. 1. 使用 $(this)的好处

javascript 的 this 关键字代表当前 DOM 元素,$(this)表示对 this 的引用,也就是对当前 DOM 元素的引用,其实是一回事。将 $(this)转为 DOM 元素后就是 this。也就是说 $(this)[0]===this。将 jQuery 对象转化为对应的 DOM 元素的内容可以参看本站的《将 jQuery 对象转为普通 DOM 元素》

1
2
3
<a id="link1">text1</a>
<a id="link2">text2</a>
<a id="link3">text3</a>

1
2
3
4
5
$('a').mouseenter(
function () {
alert(this.id);
alert($(this).attr('id'));
});

两句代码效果是一样的。

使用 $(this)的好处

$(this) 是一个 jQuery 对象集,所以可以使用 jQuery 函数。
jQuery 对象集调用 each 方法时,当 jQuery 对象集表示对 dom 元素的引用时,在函数内使用 $(this)代表每一个 JQuery 对象,其实也是对当前 DOM 元素的引用而已。

1
2
3
4
5
$('a').each(function(){
// Loop that alerts the id value for every <a> in the page.
alert($(this).html()); // "this" refers to the current element in the loop.
alert(this.innerHTML); // "this" refers to the current element in the loop.
});

会分别打印出每个 a 标签的文本两次,两句代码效果是一样的。
您可在 这里 查看和调试以上代码。

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/javascript-de-this-yu-jquery-de-this-de-bi-jiao/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章