jQuery each() – 它是如何在内部工作的?
我在这方面咨询了jQuery的来源,但我必须承认这可能超出了我的理解 – 或者我在错误的地方寻找。 https://github.com/jquery/jquery/blob/master/src/core.js
在第222行附近有一个看起来递归的函数,然后在第566行附近还有另一个在.extend()命名空间中声明的函数。
我只是好奇 – 这究竟是如何工作的? 例如,当我打电话时:
$('.item').each(function(){ // Do Something });
如何循环遍历DOM元素数组,何时停止,它如何应用该函数? 它不能做到
$('.item').doThis()
因为doThis()可能不是该对象的成员。
请赐教:)谢谢。
不,它不是递归的。 第222行的函数是jQuery原型( $.fn
)上的函数,而它调用的函数是jQuery.each
– 一个静态属性,在第566行定义。 请注意extend
如何工作:如果没有给出要扩展的对象,它将使用this
。 它在代码的不同部分都应用于jQuery
和jQuery.fn
。
那究竟是如何运作的呢?
$obj.each(callback)
调用$.fn.each
方法,该方法在jQuery实例(DOM包装器)本身上应用$.each
: 第223行 。
现在,在$.each
,有四种情况:有或没有提供的args
数组,以及类似数组的结构或其他对象。 您没有传递额外的args,并且jQuery实例具有length
属性并且在数字索引中具有DOM元素,因此将执行第596行中的循环。 所以你的电话相当于
for (var i=0, len=$obj.length; i
据我所知,这个
$('selector').each(func);
相当于这样做:
func = ...; $selector = $('selector'); for (var i = 0; i < $selector.length; i++) { if (func.call($selector[i], i, $selector[i]) === false) { break; } }
$ selection返回的对象实际上是一个DOM元素数组,附加了一大堆额外的方法,所以你基本上可以像使用Array一样使用它。 希望这能说明问题!
您在jQuery中执行的每个查询都存储为类似于Array的对象,这意味着您可以通过执行以下操作来访问查询找到的DOM元素列表:
$('.item')[0] //The first item found by your query
在内部,$()。每个都使用$ .each,这是一种迭代你的集合的方式,调用你作为参数传递的函数,并使用’Function.apply’将’this’设置为当前对象正在迭代。
查看源中的第 566行到第605行
它是迭代的,相当简单。