【问题标题】:what does $(this) mean in jquery [duplicate]$(this) 在 jquery 中是什么意思 [重复]
【发布时间】:2013-06-15 10:44:52
【问题描述】:
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            var headings = $('h3');
            var paras = $('p');
            paras.hide().eq(0).show();
            headings.click(function() {
                var cur = $(this); //save the element that has been clicked for easy referal
                cur.siblings('p').hide(); //hide all the paragraphs
                cur.next('p').show(); //get the next paragraph after the clicked header and show it
            });
        </script>
        <style type="text/css">
            p,h3 {margin: 0; padding: 0;}
            p {height: 150px; width: 200px; border: 1px solid black;}
            h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}
        </style>
    </head>
    <body>
        <h3>Item 1 </h3>
        <p>Item 1 content</p>
        <h3>Item 2 </h3>
        <p>Item 2 content</p>
        <h3>Item 3 </h3>
        <p>Item 3 content</p>
        <h3>Item 4</h3>
        <p>Item 4 content</p>
    </body>    
</html>

以上代码取自这里:http://www.1stwebdesigner.com/tutorials/jquery-for-complete-beginners-part-3/

问题:

对于这一行:var cur = $(this);我知道this是指被点击的h3,但是为什么我们不能这样写:var cur = this;这里this$(this)有什么区别?

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:
    $(this)
    

    this返回的DOM元素转换成一个jQuery对象,你可以继续使用jQuery。

    【讨论】:

      【解决方案2】:

      this 是对调用当前函数的成员的引用

      例如

      $(document).ready(function(){
          $("#test").click(function(){
      
      var jQuerizedElement = $( this ); // instead of calling it by its selector you can use this
        });
      });
      

      现在你可以用它做更多的事情。

      【讨论】:

        【解决方案3】:

        this 返回 DOM 元素,而 $(this) 返回 jQuery 对象。

        this
        

        等价于

        $(this).get()
        

        【讨论】:

          【解决方案4】:

          $ 是 jQuery 函数的简写。你也可以写:

          var cur = jQuery(this);
          

          jQuery 将 DOM 元素和其他对象“包裹”起来,以便为它们提供更多功能。就像您将选择器字符串传递给 jQuery 构造函数一样,您可以传递一个原生 DOM 元素(this 是),它将成为一个 jQuery 对象。

          【讨论】:

            猜你喜欢
            • 2011-05-10
            • 2018-09-17
            • 2011-05-06
            • 2015-05-01
            • 2011-06-20
            • 1970-01-01
            • 2017-07-09
            • 1970-01-01
            • 2014-05-20
            相关资源
            最近更新 更多