“$(this)”和“this”有什么区别？（涉及IT技术）

Question

我目前正在学习这个教程：jQuery入门教程

针对以下两个示例：

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

注意在第一个例子中，我们使用$(this)将一些文本附加到每个li元素内。在第二个示例中，我们直接使用this来重置表单。

$(this)似乎比this更经常使用。

我的猜测是，在第一个示例中，$()将每个li元素转换为一个理解append()函数的jQuery对象，而在第二个示例中，可以直接在表单上调用reset()。

基本上，对于特殊的仅适用于jQuery的函数，我们需要使用$()。

这个理解正确吗？

- Kevin Wu

---

@Reigel，为什么这个被保护了？原帖提出了问题并猜测了正确答案。 - vol7ron

@Reigel：我想我应该在元中问这个问题，但如果这是保护所需的全部内容，那么所有问题都应该被保护。 - vol7ron

Answer 1

如果你使用jQuery，那么只需要使用$()。如果你希望使用jQuery来处理DOM事务，请记住这一点。

$(this)[0] === this

基本上，每次你使用jQuery获取元素集合时，它都会将其转换为一个 jQuery 对象。如果你知道只有一个结果，那么它将位于第一个元素中。

基本上，每次你获取一组元素时，jQuery 都会将其转换成一个 jQuery 对象。如果你知道只有一个结果，那么它将在第一个元素中。

$("#myDiv")[0] === document.getElementById("myDiv");

等等，等等...

- Spencer Ruport

---

如果它们始终相同，那么使用 $(this)[0] 而不是 this 有什么理由吗？ - Jay

如果您喜欢长时间打字而不是简单地使用“this”，那么是的。$() 是 jQuery 构造函数。 "'this' 是调用的 DOM 元素的引用。所以基本上，在 $(this) 中，您只是将 this 作为参数传递给 $()，这样您就可以调用 jQuery 方法和函数。" - Juliver Galleto

@jay - 使用$(this)[0]没有什么好的理由，我只是用它来说明概念。 :) 不过，我确实使用$("#myDiv")[0]而不是document.getElementById("myDiv")。 - Spencer Ruport

window.$(window) = $(window) - Néstor Waldyd

Answer 2

$() 是 jQuery 构造函数。

this 是调用的 DOM 元素的引用。

因此，在 $(this) 中，你只是将 this 作为参数传递到 $() 中，以便可以调用 jQuery 的方法和函数。

- Reigel Gallarde

Answer 3

当你想要访问不使用jQuery的元素的基本JavaScript方法时，需要使用$(this)来调用jQuery函数，但可以直接使用this。

- Alex King

Answer 4

在使用jQuery时，通常建议使用$(this)。但是如果你知道（你应该学习并知道）区别，有时仅使用this会更方便和更快速。例如：

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

比起其他方式，它更简单纯粹。

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

- Fredrick Gauss

---

我喜欢这个例子。谢谢！ - Ammar

请注意，change() 方法已被弃用。请改用 .on("change", handler) 方法。 - undefined

Answer 5

this 是元素，$(this) 是使用该元素构建的 jQuery 对象

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

深入了解

this^MDN 包含在执行上下文中

范围指当前Execution Context^ECMA。为了理解 this，了解 JavaScript 中执行上下文的操作方式非常重要。

执行上下文绑定 this

当控制进入执行上下文（代码在该作用域中被执行）时，变量的环境被设置（词法和变量环境 - 本质上这设置了一个区域，使已经可访问的变量进入，以及存储局部变量的区域），并且发生了 this 的绑定。

jQuery 绑定 this

执行上下文形成了一个逻辑堆栈。结果是，堆栈中更深的上下文可以访问先前的变量，但它们的绑定可能已被更改。 每次jQuery调用回调函数时，它都使用apply^MDN来改变this绑定。

callback.apply( obj[ i ] )//where obj[i] is the current element

调用apply的结果是，在jQuery回调函数中，this指的是当前使用回调函数的元素。

例如，在.each中，通常使用的回调函数允许.each(function(index,element){/*scope*/})。在该范围内，this == element为真。

jQuery回调使用应用程序函数来将被调用的函数与当前元素绑定。该元素来自jQuery对象的元素数组。每个构造的jQuery对象都包含一个元素数组，其中的元素与用于实例化jQuery对象的selector^{jQuery API}相匹配。

$(selector) 调用 jQuery 函数（请记住，$ 是对 jQuery 的引用，代码：window.jQuery = window.$ = jQuery;）。在内部，jQuery 函数实例化一个函数对象。因此，虽然可能不是立即显而易见的，但使用 $() 内部使用的是 new jQuery()。构建这个 jQuery 对象的一部分是查找选择器的所有匹配项。构造函数还将接受 html 字符串和元素。当您将 this 传递给 jQuery 构造函数时，您正在传递当前元素以构建 jQuery 对象。然后，jQuery 对象包含与选择器匹配的 DOM 元素的类似数组的结构（或仅在 this 的情况下包含单个元素）。

一旦构造了 jQuery 对象，就会暴露出 jQuery API。当调用 jQuery api 函数时，它将在内部迭代这个类似数组的结构。对于数组中的每个项目，它都会调用 api 的回调函数，并将回调的 this 绑定到当前元素。在上面的代码片段中可以看到这个调用，其中 obj 是类似数组的结构，而 i 是用于当前元素在数组中的位置的迭代器。

- Travis J

Answer 6

是的，通过使用$(this)，您为对象启用了jQuery功能。仅使用this，它只具有通用的Javascript功能。

- Ray Lu

Answer 7

this 指向一个 JavaScript 对象，$(this) 用于使用 jQuery 进行封装。

示例 =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')

- Lalit Kumar Maurya