jQuery$（this）关键字

为什么使用

$（this）

而不是重新选择类很重要

---

我在我的代码中使用了大量的动画和css编辑，我知道我可以通过使用

$（this）

来简化它，当您通过jQuery执行DOM查询时，比如

$（'class-name'）

它会主动搜索DOM中的该元素，并返回该元素以及附加的所有jQuery原型方法

当您在jQuery链或事件中时，不必重新运行DOM查询，您可以使用上下文

$（this）

。像这样：

$('.class-name').on('click', (evt) => {
    $(this).hide(); // does not run a DOM query
    $('.class-name').hide() // runs a DOM query
}); 

$（此）

将保存您最初请求的元素。它将再次附加所有jQuery原型方法，但不必再次搜索DOM

更多信息：

引用一个已经不存在的网络博客，但出于历史原因，我将把它留在这里：

在我看来，最好的jQuery性能技巧之一就是尽量减少jQuery的使用。也就是说，在使用jQuery和纯ol'JavaScript之间找到一个平衡点，最好从'this'开始。许多开发人员只将$（this）用作其内部回调的锤子，而忘记了这一点，但区别是明显的：

在jQuery方法的匿名回调函数中，这是一个 对当前DOM元素的引用$（this）将其转换为jQuery 对象并公开jQuery的方法。jQuery对象仅此而已 而不是一个增强的DOM元素数组

---

请查看以下代码：

HTML:

此

引用DOM引擎正在处理或引用的当前元素

另一个例子：

<a href="#" onclick="$(this).css('display', 'none')">Hide me!</a>

---

希望你现在明白了。

this

关键字出现在处理面向对象系统时，或者我们在本例中使用的面向元素的系统：）

使用$（this）可以提高性能，因为类/属性用于搜索，不需要在整个网页内容中多次搜索

$（此）

返回元素的

缓存版本，从而提高性能，因为jQuery不必再次在元素的DOM中执行完整的查找。
我将向您展示一个示例，它将帮助您理解它的重要性。

例如，您有一些Box小部件，并且希望在每个小部件中显示一些隐藏的内容。当您为单个小部件使用不同的CSS类时，您可以轻松做到这一点，但当它具有相同的类时，您如何做到这一点？

实际上，这就是为什么我们使用$（这个）

**请检查代码并运行它：）**


（函数（）{
jQuery（“.single content area”）.hover（函数（）{
jQuery（this.find（“.hidden content”）.slideDown（）；
})
jQuery（“.single content area”）.mouseleave（函数（）{
jQuery（this.find（“.hidden content”）.slideUp（）；
})
})();
.mycontent包装器{
显示器：flex；
宽度：800px；
保证金：自动；
}     
.单一内容区{
背景色：#34495e；
颜色：白色；
文本对齐：居中；
填充：20px；
利润率：15px；
显示：块；
宽度：33%；
}
.隐藏内容{
显示：无；
}

姓名：John Doe

年龄：33岁

地址：孟加拉国
这是隐藏的内容
姓名：John Doe

年龄：33岁

地址：孟加拉国
这是隐藏的内容
姓名：John Doe

年龄：33岁

地址：孟加拉国
这是隐藏的内容
你很可能会被否决，因为如果你在谷歌搜索，会有大量的信息。例如：jQuery 1.3.2的可能副本可能有点过时，即使在2012年您的答案中也是如此。我个人建议，这个“性能”的样本是一个盐粒，因为新版本在大多数点上更有效率，因为1.3.2链接现在已经死亡：（死链接，请考虑在大多数情况下修改你的答案，使用<代码> $（这个）< /代码>与性能无关。
<div class="multiple-elements" data-bgcol="red"></div>
<div class="multiple-elements" data-bgcol="blue"></div>

$('.multiple-elements').each(
    function(index, element) {
        $(this).css('background-color', $(this).data('bgcol')); // Get value of HTML attribute data-bgcol="" and set it as CSS color
    }
);

<a href="#" onclick="$(this).css('display', 'none')">Hide me!</a>