51

为什么使用$(this)而不是重新选择类很重要？

我在我的代码中使用了很多动画和 css 编辑，我知道我可以通过使用$(this).

4

6 回答 6

74

当您通过 jQuery 执行 DOM 查询时，$('class-name')它会主动在 DOM 中搜索该元素并返回该元素以及附加的所有 jQuery 原型方法。

当您在 jQuery 链或事件中时，您不必重新运行 DOM 查询，您可以使用 context $(this)。像这样：

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

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

更多信息：

使用 jQuery 选择器的 Web 性能

引自一个不再存在的网络博客，但出于历史原因，我将其保留在这里：

在我看来，最好的 jQuery 性能提示之一是尽量减少对 jQuery 的使用。也就是说，在使用 jQuery 和普通的 JavaScript 之间找到一个平衡点，一个好的起点是使用 'this'。许多开发人员在回调中专门使用 $(this) 作为他们的锤子而忘记了这一点，但区别是明显的：

在 jQuery 方法的匿名回调函数中，这是对当前 DOM 元素的引用。$(this) 将 this 转换为 jQuery 对象并公开 jQuery 的方法。jQuery 对象只不过是增强的 DOM 元素数组。

于 2012-09-18T16:53:32.817 回答
15 
$(document).ready(function(){
   $('.somediv').click(function(){
   $(this).addClass('newDiv'); // this means the div which is clicked
   });                         // so instead of using a selector again $('.somediv');
});                           // you use $(this) which much better and neater:=)
于 2012-09-18T16:58:16.010 回答
10

看看这段代码：

HTML：

<div class="multiple-elements" data-bgcol="red"></div>
<div class="multiple-elements" data-bgcol="blue"></div>

JS：

$('.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
    }
);

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

另一个例子：

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

希望你现在明白了。关键字出现this在处理面向对象的系统时，或者像我们在这种情况下，面向元素的系统:)

于 2012-09-18T17:00:23.597 回答
4

使用$(this)提高了性能，因为您用于搜索的类/任何属性都不需要在整个网页内容中搜索多次。

于 2012-09-18T17:02:52.647 回答
2

$(this)返回cached元素的一个版本，因此提高了性能，因为 jQuery 不必再次在元素的 DOM 中进行完整的查找。

于 2019-10-06T06:05:49.363 回答
2

我将向您展示一个示例，以帮助您理解为什么它很重要。

例如，您有一些 Box 小部件，并且您想在每个小部件中显示一些隐藏的内容。当单个小部件具有不同的 CSS 类时，您可以轻松地做到这一点，但是当它具有相同的类时，您怎么能做到呢？
实际上，这就是我们使用$(this)的原因

**请检查代码并运行它:) ** 在此处输入图像描述

  (function(){ 

            jQuery(".single-content-area").hover(function(){
                jQuery(this).find(".hidden-content").slideDown();
            })

            jQuery(".single-content-area").mouseleave(function(){
                jQuery(this).find(".hidden-content").slideUp();
            })
             
        })();
  .mycontent-wrapper {
      display: flex;
      width: 800px;
      margin: auto;
    }     
    .single-content-area  {
        background-color: #34495e;
        color: white;  
        text-align: center;
        padding: 20px;
        margin: 15px;
        display: block;
        width: 33%;
    }
    .hidden-content {
        display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontent-wrapper">
    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->

    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->


    <div class="single-content-area">
        <div class="content">
            Name: John Doe <br/>
            Age: 33  <br/>
            Addres: Bangladesh
        </div> <!--/.normal-content-->
        <div class="hidden-content">
            This is hidden content
        </div> <!--/.hidden-content-->
    </div><!--/.single-content-area-->

</div><!--/.mycontent-wrapper-->

于 2020-04-04T15:48:18.027 回答