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

简介: $(this) 和 this 关键字在 jQuery 中有何不同?

       在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对象的方法和属性。


相关文章
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
68 0
|
6月前
|
JavaScript 前端开发
$(this) 和 this 关键字在 jQuery 的不同
$(this) 和 this 关键字在 jQuery 的不同
43 0
|
JavaScript 前端开发
|
JavaScript
JQuery this 和 $(this) 详解
this  this 在面向对象语言中,指代调用上下文对象,在js中,也是一模一样的概念,所以不管这个this出现在什么地方,只要追踪到当前调用对象是什么,那么this是什么也就一目了然了。 先看一个简单示例 (function(){ console.log("Normal function being invoked by: "+ this); })(); 输出:
1304 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
61 2