573

我目前正在学习本教程：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元素转换为理解函数的 jQuery 对象，append()而在第二个示例reset()中可以直接在表单上调用。

基本上我们需要$()特殊的 jQuery-only 函数。

它是否正确？

4

7 回答 7

523

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

$(this)[0] === this

基本上每次你得到一组元素时，jQuery 都会把它变成一个jQuery 对象。如果你知道你只有一个结果，它将在第一个元素中。

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

等等...

于 2009-06-27T00:23:26.113 回答
370

$()是 jQuery 构造函数。

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

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

于 2010-09-15T04:03:07.317 回答
92

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

于 2009-06-27T00:24:46.420 回答
76

使用时jQuery，建议$(this)平时使用。但是如果您知道（您应该学习并知道）其中的区别，有时使用 just 会更方便快捷this。例如：

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

比

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});
于 2013-05-21T14:57:50.157 回答
47

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 函数实例化了一个函数对象。因此，虽然它可能不会立即显而易见，但使用内部使用. 这个 jQuery 对象的部分构造是查找选择器的所有匹配项。构造函数还将接受 html 字符串和元素。当您传递给 jQuery 构造函数时，您传递的是要使用. 然后，jQuery 对象包含与选择器匹配的 DOM 元素的类似数组的结构（或者在 的情况下仅包含单个元素）。jQuerywindow.jQuery = window.$ = jQuery;$()new jQuery()thisthis

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

于 2015-02-10T23:32:18.327 回答
41

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

于 2009-06-27T00:23:54.397 回答
-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')
于 2013-11-28T12:49:39.827 回答