jQuery：'$（this）'和'this'有什么区别？

问题描述：

对于下面的两个例子：第一个例子

$("#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()功能，而在第二个例子reset()可以直接在表单上被称为jQuery对象。

基本上我们需要$()为特殊的jQuery功能。

这是正确的吗？

@Reigel，为什么这个保护？ OP询问并猜测了正确的答案。 – vol7ron 2013-07-24 04:45:43

+21

@Reigel：我想我应该在meta中提出这个问题，但如果这就是保护所需要的所有问题，那么不应该将所有问题都保护起来* – vol7ron 2013-07-24 15:06:36

答

是的，你只需要$（）当你使用jQuery。如果你想让jQuery帮忙做DOM，只要记住这一点。

$(this)[0] === this

基本上每个你得到一组元素的时候备份的jQuery把它变成一个jQuery object。如果你知道你只有一个结果，它将在第一个元素。

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

等等......

是否有理由在此处使用`$（this）[0]` “如果他们总是一样的？ – Jay 2016-07-30 05:53:34

@Jay如果你喜欢长时间输入而不是简单地使用'this'，那么是的。 $（）是jQuery的构造函数。 “'this'是对调用的DOM元素的引用，因此基本上，在$（this）中，您只需将它作为参数传递给$（），以便可以调用jQuery方法和函数。 – 2016-07-31 19:29:08

@jay - 没有很好的理由使用`$（this）[0]`我只是用它来说明这个概念。 :)虽然我确实在`document.getElementById（“myDiv”）`上使用`$（“＃myDiv”）[0]``。 – 2017-09-29 16:47:35

答

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

答

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

答

$()是jQuery的构造函数。

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

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

答

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

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

比

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

答

此参考javascript对象和$用于与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')

答

this是重要元素，$(this)是与该元件

$(".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); 
});

更深的外表构造jQuery对象

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的回调函数，将回调的this绑定到当前元素。这个调用可以在上面的代码片段中看到，其中obj是类似于数组的结构，而i是用于当前元素数组中位置的迭代器。

jQuery：'$（this）'和'this'有什么区别？

相关推荐