jQuery:“$(this)”和“this”有什么区别?
我目前正在通过本教程: 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()
可以直接在窗体上调用。
基本上我们需要$()
用于特殊的jQueryfunction。
它是否正确?
是的,当你使用jQuery时,你只需要$()。 如果你想要jQuery的帮助做DOM的东西只是记住这一点。
$(this)[0] === this
基本上每次你得到一组元素后jQuery把它变成一个jQuery对象 。 如果你知道你只有一个结果,它将在第一个元素。
$("#myDiv")[0] === document.getElementById("myDiv");
等等…
$()
是jQuery的构造函数。
this
是对调用的DOM元素的引用。
所以基本上,在$(this)
,你只是将this
作为parameter passing给$()
,这样就可以调用jQuery的方法和函数。
是的,你需要$(this)
用于jQuery函数,但是当你想访问不使用jQuery的基本javascript方法时,你可以使用this
。
当使用jQuery
,build议通常使用$(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); });
更深的一下
this
MDN包含在一个执行上下文中
范围是指当前的执行上下文ECMA 。 为了理解this
,理解执行上下文在JavaScript中的运行方式非常重要。
执行上下文绑定这个
当控制进入执行上下文(代码在该范围内执行)时,variables的环境被设置(词法和可变环境 – 本质上,这设置了已经可以访问的variables的区域,并且局部variables的区域是存储),并发生这种绑定。
jQuery绑定这个
执行上下文形成一个逻辑堆栈。 结果是栈中更深的上下文可以访问以前的variables,但是它们的绑定可能已经被改变了。 每次jQuery调用一个callback函数,它都会使用apply
MDN 来改变这个绑定 。
callback.apply( obj[ i ] )//where obj[i] is the current element
调用apply
的结果是, 在jQuerycallback函数内部, this
指的是callback函数正在使用的当前元素 。
例如,在.each
,通常使用的callback函数允许.each(function(index,element){/*scope*/})
。 在这个范围内, this == element
是真的。
jQuerycallback使用apply函数将被调用的函数与当前元素进行绑定。 这个元素来自jQuery对象的元素数组。 构造的每个jQuery对象都包含一个元素数组,这些元素与用于实例化jQuery对象的select器jQuery API相匹配。
$(selector)
调用jQuery函数(请记住$
是对jQuery
的引用,代码: window.jQuery = window.$ = jQuery;
)。 在内部,jQuery函数实例化一个函数对象。 所以,虽然它可能不是很明显,使用$()
内部使用new jQuery()
。 这个jQuery对象的一部分构造是查找select器的所有匹配。 构造函数也将接受htmlstring和元素 。 当你把this
传递给jQuery构造函数时,你传递了一个jQuery对象的当前元素来构造 。 然后,jQuery对象包含与select器匹配的DOM元素(或者在这种情况下仅仅是单个元素)的类似数组的结构。
一旦jQuery对象被构造,jQuery API现在被暴露。 当一个jQuery api函数被调用时,它将内部遍历这个类似数组的结构。 对于数组中的每一项,它都会调用api的callback函数,将callback的this
绑定到当前元素。 这个调用可以在上面的代码片断中看到,其中obj
是类似于数组的结构,而i
是用于当前元素数组中位置的迭代器。
是的,通过使用$(this)
,您启用了对象的jQueryfunction。 通过使用this
,它只具有通用的JavaScriptfunction。
这个引用一个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')