我目前正在学习本教程:jQuery入门

对于下面两个例子:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

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

$(this)似乎比this用得多。

我猜在第一个例子中,$()将每个li元素转换为一个jQuery对象,它可以理解append()函数,而在第二个例子中,reset()可以直接在表单上调用。

基本上,我们需要$()用于特殊的仅限jquery的函数。

这对吗?


是的,你只需要$()当你使用jQuery。如果你需要jQuery的帮助来做DOM的事情,请记住这一点。

$(this)[0] === this

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

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

等等……

是的,通过使用$(this),你为对象启用了jQuery功能。通过使用这个,它只有一般的Javascript功能。

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

$()是jQuery构造函数。

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

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

在使用jQuery时,建议通常使用$(this)。但如果你知道(你应该学习并知道)其中的区别,有时只使用这个会更方便、更快。例如:

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

更容易更纯粹吗

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

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')

这是元素,$(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);
});

更深层次的观察

这个mdn包含在一个执行上下文中

范围引用当前的执行上下文。为了理解这一点,理解JavaScript中执行上下文的操作方式是很重要的。

执行上下文将其绑定

当控制进入一个执行上下文(代码在该范围内执行)时,变量的环境就被设置好了(词法和变量环境——本质上,这为变量设置了一个已经可以访问的区域,以及一个用于存储局部变量的区域),然后就会发生绑定。

jQuery绑定了这个

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

callback.apply( obj[ i ] )//where obj[i] is the current element

调用apply的结果是在jQuery回调函数中,this指向回调函数使用的当前元素。

例如,在.each中,通常使用的回调函数允许使用.each(function(index,element){/*scope*/})。在这个范围内,this ==元素为真。

jQuery回调使用apply函数将被调用的函数绑定到当前元素。这个元素来自jQuery对象的元素数组。每个构造的jQuery对象都包含一个元素数组,这些元素与用于实例化jQuery对象的selectorjQuery API相匹配。

$(selector) calls the jQuery function (remember that $ is a reference to jQuery, code: window.jQuery = window.$ = jQuery;). Internally, the jQuery function instantiates a function object. So while it may not be immediately obvious, using $() internally uses new jQuery(). Part of the construction of this jQuery object is to find all matches of the selector. The constructor will also accept html strings and elements. When you pass this to the jQuery constructor, you are passing the current element for a jQuery object to be constructed with. The jQuery object then contains an array-like structure of the DOM elements matching the selector (or just the single element in the case of this).

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