jQuery事件函数中的this是什么？

最新推荐文章于 2022-11-01 14:16:24 发布

IT_10-

最新推荐文章于 2022-11-01 14:16:24 发布

阅读量4.4k

点赞数 7

分类专栏：前端文章标签： JQuery中的this

本文链接：https://blog.csdn.net/IT_10/article/details/81234517

版权

前端专栏收录该内容

45 篇文章 2 订阅

订阅专栏

当我们在使用jQuery的时候，给某个标签绑定事件，会发现事件函数里面有个“this”，比如如下代码：

$("#a").click(function(){
    $(this).hide();
});

这个this具体指什么了，我们不妨亲自动手检测一下，运行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../scripts/jquery.js" type="text/javascript"></script>
    <script>
        $(function(){
            $("#a").click(function () {
//                window.alert("click");
//                window.alert(this);
                console.log(this);
                var $a=$("#a");//jQuery对象
                var b=document.getElementById("a");//DOM对象
                console.log($a);
                console.log(b);
                console.log(this===$a);
                console.log(this===b);
                console.log($a===b);
            });
        });
    </script>
</head>
<body>
<div id="a">clickme</div>
</body>
</html>

结果：
这里写图片描述

由此可见，this指向的就是触发这个事件的DOM对象，而非jQuery对象，所以我们在事件内部使用this的时候，需要通过$(this)方法将DOM对象转化为jQuery对象，才能使用jQuery中的方法。

IT_10-

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery事件函数中的this是什么？

当我们在使用jQuery的时候，给某个标签绑定事件，会发现事件函数里面有个“this”，比如如下代码：$("#a").click(function(){ $(this).hide();});这个this具体指什么了，我们不妨亲自动手检测一下，运行如下代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;...
复制链接

扫一扫

专栏目录