jQuery 中的 $(this) 和 this 有什么区别？

Question

jQuery 中的 $(this) 和 this 之间有什么区别，为什么它们有时给出相同的结果，而有时却表现不同？

Answer 1

$(this) 用 jQuery 功能包装 this。

例如，此代码将失败：

$('.someDiv').onClick(function(){
    // this refers to the DOM element so the following line would fail
    this.fadeOut(100);
});

因此我们将 this 包装在 jQuery 中：

$('.someDiv').onClick(function(){
    // wrap this in jQuery so we can use jQuery fadeOut
    $(this).fadeOut(100);
});

Answer 2

$(this) 用 jQuery 函数修饰 this 指向的任何对象。典型的用例是 this 引用 DOM 元素（例如

）。然后，编写 $(this) 允许您使用该

上的所有 jQuery API 函数。

如果 this 已经引用了一个 jQuery 对象（通常是一个 jQuery 修饰的 DOM 对象），那么调用 $(this) 将不起作用，因为它已经被修饰了。

Answer 3

如果在当前上下文中 this 不是 jQuery 对象，则可以通过将其包裹在 $() 周围使其成为 jQuery 元素。当您的元素已经是 jQuery 表达式的结果时，在这种情况下 this 已经是一个 jQuery 对象。所以在这种情况下它们的工作原理相似

Answer 4

为了让您更好地理解，请为自己准备一个调试器，例如 google chrome 并执行此操作..

$('a').click(function(){
    console.log(this); //DO
    console.log($(this)); //JO
});

这将向您展示其中的区别:)

Answer 5

this 是一个 JavaScript 变量，每当您处于附加到对象的函数内部时就会创建该变量。在这些情况下，this 引用该对象。

$(this) 返回一个 jQuery 对象，您可以在其上调用 jQuery 函数，但仅适用于 this。

例如，如果您为所有锚点设置一个单击处理程序：

$('a').click(function() {
    console.log(this.href) ;
}) ;

则 this 指的是单击事件（函数）附加到的锚点。

Answer 6

$（这个）==这个？有趣的。

这不能通过 DOM 事件传递。

Answer 7

在 JavaScript 中，this 始终指正在执行的函数的“所有者”。使用 $(this) 只会包装所有者，以便所有 jQuery 操作都将被扩展并可供其使用。

考虑一下：

$links = $('#content a');

$links.click(function() {
    link  = this;
    $link = $(this); //jQuery wrapped object.

    alert(link.getAttribute('href'));        
    alert($link.attr('href')); //we can use the attr() function from jQuery
});

它们通常会给出相同的结果，因为所有者是相同的，只是当被 jQuery 包装时，它可以使用 jQuery 函数进行操作。