#39;$（this）#39;和#39;this#39;有什么区别？

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

这个对吗？

#1楼

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

$(this)[0] === this

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

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

等等...

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

比起更容易和更纯净

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

#5楼

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.valueor this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')

#6楼

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);
});

更深入的了解

this ^MDN 包含在执行上下文中

范围是指当前的执行上下文^ECMA 。为了理解this ，重要的是要了解执行上下文在JavaScript中的运行方式。

执行上下文将其绑定

当控制进入的执行上下文（代码是在该范围内被执行）对于变量的环境被建立（词汇和可变环境 - 基本上此设置了一个区域变量的输入，其已经访问，且为局部变量是一个区域存储的），并且结合this发生。

jQuery将此绑定

执行上下文形成逻辑堆栈。结果是，堆栈深处的上下文可以访问以前的变量，但是它们的绑定可能已更改。 每次调用jQuery的一个回调函数，它改变了这个使用绑定 apply ^MDN 。

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

调用apply的结果是在jQuery回调函数内部， this是指回调函数正在使用的当前元素 。

例如，在.each ，常用的回调函数允许.each(function(index,element){/*scope*/}) 。在此范围内， this == element为true。

jQuery回调使用apply函数将正在调用的函数与当前元素绑定。该元素来自jQuery对象的element数组。构造的每个jQuery对象都包含一个元素数组，这些元素与用于实例化jQuery对象的选择器^{jQuery 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是用于当前元素数组中位置的迭代器。

#7楼

$()是jQuery构造函数。

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

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

#39;$（this）#39;和#39;this#39;有什么区别？相关推荐

bundle install 出现 #39;gem install mysql2 -v #39;0.3.15#39; succeeds before bunding #39;
bundle install 出现 'gem install mysql2 -v '0.3.15' succeeds before bunding ' 解决:sudo apt-get install ...
firefox 39 linux,Mozilla Firefox 39.0 Beta 4 发布下载
Mozilla Firefox 39.0 Beta 4 今日发布于Mozila的FTP,目前官方还没有发布相关的更新报告,但从面向开发者的信息看,SSLv3被彻底移除出Firefox的支持范围,并实现 ...
Property with #39;retain (or strong)#39; attribute must be of object type
AFNetworking 2.0 当Deployment Target 低于6.0时,AFURLConnectionOperation.h,AFURLSessionManager.h @propert ...
怎么发现RAC环境中#39;library cache pin#39;等待事件的堵塞者（Blocker）?
怎么发现RAC环境中的'library cache pin'等待事件的堵塞者(Blocker) 參考自 How to Find the Blocker of the 'library cache pi ...
2018-03-28 从人机交互角度看中文编程:#39；打开微信#39；
前文通用型的中文编程语言探讨之一: 高考是基于现有英文编程语言的一个技术思路. 在这个回答以及下面的讨论中, 又提到了编程其实是人机交互的一种形式. 不禁试着跳出程序员视角看这个问题. 几年前才发现M ...
如何像在SQL中一样使用#39；in#39；和#39；not in#39；过滤Pandas数据帧
本文翻译自:How to filter Pandas dataframe using 'in' and 'not in' like in SQL How can I achieve the equiv ...
【Bug Fix】Error : Can#39;t create table #39;moshop_1.#sql-534_185#39; (errno: 150)
运行alter操作, alter table xx_shop_info add index FK9050F5D83304CDDC (shop_area), add constraint FK9050F ...
SVN Working copying #39;xxxxx/xxxx/xxxx#39; locked
使用SVN想更新上传时提示Working copying 'xxxx/xxxx/xxx' locked 解决方法: 选中你的项目,上面工具栏一行找到 Action → Cleanup all Wor ...
自我学习39：接口自动化测试用例功能测试用例区别
标题接口文档三要素接口概述(接口实现功能.URL地址.GET/POST.接口使用场景描述) 接口入参 (Params/Body .Hearders) 接口出参(Json或CSS或其他格式) 标题接口 ...

#39;$（this）#39;和#39;this#39;有什么区别？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

#7楼

#39;$（this）#39;和#39;this#39;有什么区别？相关推荐

最新文章

热门文章