Question

对于以下两个例子：

$("#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函数。

这是对的吗？

Answer 1

是的，当你使用jQuery时，你只需要$()。如果你想让jQuery帮助做DOM事情，请记住这一点。

$(this)[0] === this

基本上每当你得到一组元素时，jQuery就会把它变成jQuery object。如果你知道你只有一个结果，它就会出现在第一个元素中。

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

等等......

Answer 2

$()是jQuery构造函数。

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

基本上，在$(this)中，您只是将this中的$()作为参数传递，以便您可以调用jQuery方法和函数。

Answer 3

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

Answer 4

使用jQuery时，建议通常使用$(this)。但是如果你知道（你应该学习并知道）差异，有时只使用this会更方便，更快捷。例如：

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

比

更简单，更纯粹

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

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的绑定发生。

jQuery绑定此

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

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

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

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

jQuery回调使用apply函数将正在调用的函数与当前元素绑定。该元素来自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的回调函数，将回调＆＃39; s this绑定到当前元素。可以在上面的代码片段中看到此调用，其中obj是类似于数组的结构，i是用于当前元素数组中位置的迭代器。

Answer 6

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

Answer 7

这个引用了一个javascript对象， $（this）用于封装jQuery。

示例=＆gt;

// 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')

'$（this）'和'this'之间有什么区别？

7 个答案: