“$(this)”和“这个”有什么区别？

StackOverflow https://stackoverflow.com/questions/1051782

  •  20-08-2019
  •  | 
  •  

题

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

它是否正确？

有帮助吗？

解决方案

是的，你只有当你使用jQuery需要$()。如果你想jQuery的帮助来实现DOM的事情只是牢记这一点。

$(this)[0] === this

基本上每次你得到一组元素的时候备份的jQuery把它变成一个 jQuery对象。如果你知道你只能有一个结果，这将是第一个元素。

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

等等...

其他提示

$()是jQuery的构造函数。

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

所以基本上，在$(this)，你只是路过的this在$()作为参数，这样你可以调用jQuery方法和功能。

是的，你需要$(this) jQuery的功能，但是当你要访问的元素的基本JavaScript方法不使用jQuery，您可以只使用this。

当使用jQuery，建议到通常用$(this)。但如果你知道（你应该学习和了解）的不同，有时是更方便，更快地只使用this。例如：

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

是更容易和更纯的比

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

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 包含在执行上下文中

范围是指当前 执行上下文欧洲制造商协会. 。为了理解 this, ，了解 JavaScript 中执行上下文的操作方式非常重要。

执行上下文绑定 this

当控制进入执行上下文时（代码正在该范围内执行），变量的环境被设置（词法和变量环境 - 本质上，这设置了一个用于变量输入的区域，该区域已经可以访问，以及一个用于局部变量的区域存储），以及绑定 this 发生。

jQuery 绑定了 this

执行上下文形成逻辑堆栈。结果是堆栈中较深处的上下文可以访问以前的变量，但它们的绑定可能已更改。 每次 jQuery 调用回调函数时，它都会更改 this 绑定 通过使用 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 对象的元素数组。构造的每个 jQuery 对象都包含一个与 选择器jQuery API 用于实例化 jQuery 对象。

$(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功能。

this参考使用与jQuery封装javascript对象和$(this)。

示例=> 

// 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')
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top