这种差异

Question

可能重复：
jQuery $(this) vs this

这段代码在此video Tutorial

在一个非常有用的博客jquery for designers

$('.navigation').each(function() { 
    var $links = $('a',this); 
    $links.click(function () { 
     var $link = $(this), 
      link = this; 
      if ($link.is('.selected')) { 
       return; 
     } 
     $links.removeClass('selected'); 
     $link.addClass('selected') 
    }); 
}); 

$(this)和this有什么区别？

请解释简单的编码差异。

Answer 1

在被装入click的处理程序中，this将引用点击处理程序所连接的DOM元素。调用$()就可以了（$(this)）将它包装在一个jQuery实例中，为您提供各种jQuery函数。

在你的引述代码中，link = this行是不必要的，因为没有任何东西使用link。但是，$link = $(this)行会在链接周围创建一个jQuery包装器，因此您可以使用is和addClass之类的函数。

---

题外话

1. 你可能想改变if ($link.is('.selected'))到if ($link.hasClass('selected'))，这样的jQuery不必解析CSS选择器。
2. 您有一个错字，缺少removeClass中的“o”。

Answer 2

this是原生JavaScript，参考scope中的当前object。 $(this)是将jQuery包装（添加其他属性）到前面提到的对象。例子：

平原JS

var person = { 
    SayGoodbye: function(){ 
     this.wave(); 
     this.exit(); 
    }, 
    wave: function(){ 
     //code to wave 
    }, 
    exit: function(){ 
     //code to exit 
    } 
} 

person.SayGoodbye(); 

一些jQuery的

//a submit button 
$('#myBtn').click(function(){ 
    $(this).attr('disabled', true); 
    $(this).text("Submitting..."); 
}); 

Answer 3

// get everything with the class navigation 
$('.navigation').each(function() { 
    // get all anchor tags in that context 
    var $links = $('a',this); 
    // assign a listener for the click event. 
    $links.click(function () { 
     // set $link = jQuery wrapper around this 
     var $link = $(this), 
     // set link = this; 
     link = this; 
     // if the link has the selected class do nothing 
     if ($link.is('.selected')) { 
       return; 
     } 
     //otherwise remove it and then add it again??? 
     $links.remveClass('selected'); 
     $link.addClass('selected') 
    }); // exit anchor loop 
}); // exit nav. loop 

附：链接变量未在上面使用。

Answer 4

'this'是可以通过普通JavaScript访问的DOM元素，而当您将此元素变为$（this）时，您将创建一个JQuery对象，其中包含更多jQuery的JQuery对象将API添加到该DOM元素之外。