'$(this)' 和 'this' 有什么区别?

IT技术 javascript jquery this
2021-01-16 02:53:41

我目前正在学习本教程: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-only 函数。

这样对吗?

6个回答

是的,只有$()在使用 jQuery时才需要如果您希望 jQuery 帮助做 DOM 事情,请记住这一点。

$(this)[0] === this

基本上,每次您返回一组元素时,jQuery 都会将其转换为jQuery 对象如果您知道您只有一个结果,那么它将在第一个元素中。

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

等等...

@Jay 如果您更喜欢输入 long 而不是简单地使用“this”,那么是的。$() 是 jQuery 构造函数。“'this' 是对 DOM 调用元素的引用。所以基本上,在 $(this) 中,您只是将 $() 中的 this 作为参数传递,以便您可以调用 jQuery 方法和函数”。
2021-03-17 02:53:41
如果它们始终相同$(this)[0]this是否有理由使用over
2021-03-24 02:53:41
@jay - 没有充分的理由使用$(this)[0]我只是用它来说明这个概念。:) 不过我确实用过$("#myDiv")[0]document.getElementById("myDiv")
2021-04-08 02:53:41

$() 是 jQuery 构造函数。

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

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

是的,您需要$(this)jQuery 函数,但是当您想访问不使用 jQuery 的元素的基本 javascript 方法时,您只需使用this.

使用时jQuery,建议$(this)平时使用但是如果你知道(你应该学习和知道)其中的区别,有时使用 just 会更方便、更快捷this例如:

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

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});
我喜欢这个例子。谢谢 !
2021-03-15 02:53:41

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);
});

更深入的观察

thisMDN包含在执行上下文中

范围是指当前的执行上下文ECMA为了理解this,重要的是理解 JavaScript 中执行上下文的操作方式。

执行上下文绑定 this

当控制进入执行上下文(代码正在该范围内执行)时,变量的环境被设置(词法和变量环境 - 本质上这为变量设置了一个区域,这些区域已经可以访问,而局部变量则设置了一个区域存储),并且this发生绑定

jQuery 绑定了这个

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

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 构造函数时,您正在传递要使用 .js 构造的 jQuery 对象的当前元素然后,jQuery 对象包含与选择器匹配的 DOM 元素的类似数组的结构(或者在 的情况下仅包含单个元素this)。

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