Question

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

我在代码中使用了很多动画和css编辑，我知道我可以使用$（this）来简化它。

Answer 1

当您通过jQuery（例如$('class-name')）执行DOM查询时，它主动搜索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
});

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

更多信息：

Web Performance with jQuery selectors

引用一个不再存在的网络博客，但为了历史，我会把它留在这里：

在我看来，最好的jQuery性能提示之一是最小化你对jQuery的使用。也就是说，在使用jQuery和普通的'JavaScript'之间找到一个平衡点，一个好的起点就是'this'。许多开发人员将$（this）专门用作回调中的锤子而忘记了这一点，但差别很明显：

当在jQuery方法的匿名回调函数内部时，这是一个   引用当前的DOM元素。 $（this）把它变成了一个jQuery   对象并公开jQuery的方法。 jQuery对象仅此而已   而不是一个强化的DOM元素阵列。

Answer 2

$(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:=)

Answer 3

看一下这段代码：

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关键字，或者在本例中， element 面向系统会发生：{/ p>

Answer 4

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

Answer 5

我将向您展示一个示例，该示例将帮助您理解其重要性。

例如，您具有一些Box Widget，并且您希望在每个单个Widget中显示一些隐藏的内容。如果单个窗口小部件具有不同的CSS类，则可以轻松地做到这一点，但是当它具有相同的类时，如何实现呢？
实际上，这就是为什么我们使用 $（this）

**请检查代码并运行:) ** enter image description here

  (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-->

Answer 6

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

jQuery $（this）关键字

6 个答案: