关于javascript：’$（this）’和’this’之间有什么区别？


What's the difference between '$(this)' and 'this'?

我目前正在学习本教程：jquery入门

以下两个例子：

1
2
3
4
5
6
7
8
$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM!" + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

注意，在第一个示例中，我们使用$(this)在每个li元素内附加一些文本。在第二个示例中，我们在重置表单时直接使用this。

与this相比，$(this)的使用频率更高。

我的猜测是，在第一个示例中，$()将每个li元素转换为jquery对象，该对象了解append()函数，而在第二个示例中，reset()可以直接在表单上调用。

基本上，我们只需要$()用于特殊的jquery函数。

这是正确的吗？

相关讨论

是的，使用jquery时只需要$()。如果您想让jquery帮助您完成dom任务，请记住这一点。

1
$(this)[0] === this

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

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

等等…

相关讨论

$()是jquery构造函数函数。

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

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

是的，jquery函数需要$(this)，但如果要访问不使用jquery的元素的基本javascript方法，只需使用this。

使用jQuery时，一般建议使用$(this)。但是如果你知道(你应该学习并知道)区别，有时仅仅使用this会更方便、更快。例如：

1
2
3
4
$(".myCheckboxes").change(function(){
    if(this.checked)
       alert("checked");
});

比

1
2
3
4
$(".myCheckboxes").change(function(){
      if($(this).is(":checked"))
         alert("checked");
});
相关讨论

this是元素，$(this)是用该元素构造的jquery对象

1
2
3
4
5
6
7
8
9
$(".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包含在执行上下文中

作用域引用当前执行上下文。为了理解this，理解执行上下文在javascript中的操作方式是很重要的。

执行上下文绑定此

当控件进入执行上下文(代码在该范围内执行)时，将设置变量的环境(词汇和变量环境-本质上，这将为已可访问的变量设置一个区域，并为要存储的局部变量设置一个区域)，同时发生EDOCX1的绑定(0)。

jquery绑定此

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

1
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对象的selectorjquery 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是用于当前元素数组中位置的迭代器。

是的，通过使用$(this)为对象启用了jquery功能。通过使用this，它只具有通用的javascript功能。

这引用了一个javascript对象和用于用jquery封装的$(this)。

例＝>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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')