'$(this)'和'this'之间有什么区别？

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功能.

它是否正确？

Answer 1

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

$(this)[0] === this

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

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

等等...

Answer 2

$() 是jQuery构造函数.

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

所以基本上,$(this)你只是将thisin $()作为参数传递,以便你可以调用jQuery方法和函数.

Answer 3

是的,您需要$(this)jQuery函数,但是当您想要访问不使用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包含在执行上下文中

范围是指当前的执行上下文^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对象的选择器^{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是用于当前元素数组中位置的迭代器.

Answer 6

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