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


567

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

它是否正确?


2
@Reigel,为什么要保护它?警察质疑并猜测了正确答案。
vol7ron

21
@Reigel:我想我应该在meta中问这个问题,但是如果这是保护所需要的,那么是否所有问题也不应该得到保护
vol7ron 2013年

Answers:


516

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

$(this)[0] === this

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

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

等等...


3
如果它们始终相同$(this)[0]this是否有理由重复使用?
2016年

2
@Jay如果您喜欢长键入而不是简单地使用“ this”,那么可以。$()是jQuery构造函数。“'this'是对调用的DOM元素的引用。因此,基本上,在$(this)中,您只是在$()中将this传递为参数,以便可以调用jQuery方法和函数。“
Juliver Galleto

2
@jay-没有充分的理由使用$(this)[0]我只是在用它来说明这个概念。:)我确实用完$("#myDiv")[0]document.getElementById("myDiv")
Spencer Ruport

369

$() 是jQuery构造函数。

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

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


92

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


74

使用时jQuery,建议$(this)平时使用。但是,如果您知道(应该学习并知道)区别,有时使用just会更方便快捷this。例如:

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

比起更容易和更纯净

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

9
我喜欢这个例子。谢谢 !
阿玛(Ammar)

46

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

jQuery将此绑定

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

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对象的element数组。构造的每个jQuery对象都包含一个元素数组,这些元素与用于实例化jQuery对象的选择器jQuery API匹配。

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

构造jQuery对象后,便会公开jQuery API。调用jQuery api函数时,它将在内部遍历此类似数组的结构。对于数组中的每个项目,它都会调用api的回调函数,将回调函数绑定this到当前元素。可以在上面的代码段中看到此调用,其中obj是类似于数组的结构,并且i是用于当前元素数组中位置的迭代器。


39

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


-1

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')
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.