$(this) 和 this 关键字在 jQuery 中有何不同？

Good luck—dys

于 2023-12-09 09:07:03 发布

阅读量488

点赞数 10

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_74359467/article/details/134890615

版权

在jQuery中，$(this)是一个特殊的语法，用于使用jQuery库中的函数和方法来操作当前选择的元素。这个语法将原生的JavaScript "this" 对象包装成一个jQuery对象，使开发者可以使用jQuery提供的丰富功能来处理当前元素。

而在一般的JavaScript中，this关键字表示当前执行代码的上下文对象。它指向当前执行的函数或方法所属的对象。this关键字的值在不同的上下文中会有不同的含义和取值。

总结起来，$(this)是将原生的JavaScript "this" 对象转换成jQuery对象，以便使用jQuery的功能；而this关键字则指向当前执行环境的上下文对象。

以下是一个简单的示例代码，演示$(this)和this在jQuery中的不同：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>$(this) 和 this 在jQuery中的不同</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box">点击我</div>
    <script>
        $(document).ready(function(){
            $(".box").click(function(){
                //使用 $(this) 获取当前点击的元素，并添加样式
                $(this).css("background-color", "red");
                
                //使用 this 获取当前点击的元素，但是不能使用 jQuery 的功能
                this.innerHTML = "已经被点击";
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们绑定了一个点击事件到class为"box"的div元素上。当点击这个元素时，我们使用$(this)来获取当前点击的元素，并添加了一个红色背景样式。同时，我们也使用了this来获取当前点击的元素，但是在此之后，我们不能再使用jQuery的功能了，只能使用原生的JavaScript方法和属性（例如innerHTML）。

因此，$(this)和this关键字在jQuery中的不同之处在于，前者将当前上下文对象转换为一个jQuery对象，可以使用jQuery提供的丰富功能，而后者则只能使用原生JavaScript对象的方法和属性。

Good luck—dys

关注

10
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
$(this) 和 this 关键字在 jQuery 中有何不同？

同时，我们也使用了this来获取当前点击的元素，但是在此之后，我们不能再使用jQuery的功能了，只能使用原生的JavaScript方法和属性（例如innerHTML）。在jQuery中，$(this)是一个特殊的语法，用于使用jQuery库中的函数和方法来操作当前选择的元素。因此，$(this)和this关键字在jQuery中的不同之处在于，前者将当前上下文对象转换为一个jQuery对象，可以使用jQuery提供的丰富功能，而后者则只能使用原生JavaScript对象的方法和属性。
复制链接

扫一扫