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

小灰灰 2023-07-05 13:24 92阅读 0赞

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

$('a').mouseenter(
    function () { 
    alert(this.id);
    alert($(this).attr('id'));
    });

两句代码效果是一样的。

# 使用$(this)的好处 #

( t h i s ) 是 一 个 j Q u e r y 对 象 集 ， 所 以 可 以 使 用 j Q u e r y 函 数 。 j Q u e r y 对 象 集 调 用 e a c h 方 法 时 ， 当 j Q u e r y 对 象 集 表 示 对 d o m 元 素 的 引 用 时 ， 在 函 数 内 使 用 (this)是一个jQuery对象集，所以可以使用jQuery函数。 jQuery对象集调用each方法时，当jQuery对象集表示对dom元素的引用时，在函数内使用 (this)是一个jQuery对象集，所以可以使用jQuery函数。jQuery对象集调用each方法时，当jQuery对象集表示对dom元素的引用时，在函数内使用(this)代表每一个JQuery对象，其实也是对当前DOM元素的引用而已。

$('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】，第一时间获取最新文章。  
![欢迎关注同名公众号][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/1e8abcdc16fd4426bb4a9a2d27f75a1b.bmp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LCI6LCISVQ=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center