javascript - jQuery 便利方法如何在我的 DOM 元素中结束？

Question

我只是想知道这是如何工作的。
使用 jQuery 时，我的 DOM 元素带有各种方便的方法。
举个例子，我只取 the css method :

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

例子(也是 here in this Fiddle )

HTML代码:

<div id="test" style="background-color:#ff0000;">
   MY RED DIV
</div>

Javascript 代码:

var color = $('#test').css("background-color");
console.log(color);

这个输出:

rgb(255, 0, 0)

jQuery 是否使用这种方便的方法扩展了我所有的 DOM 元素对象？还是我的所有元素都包含在代理类中？或者这是如何工作的？

所有这些额外的方法如何影响我的应用程序或文档对象模型的性能？

Answer 1

How do jQuery convenience methods end up in my DOM elements?

他们没有。它们位于 jQuery 对象(具体来说，是那些 jQuery 对象的原型(prototype))中，它们是 DOM 元素集的包装器。实际的 DOM 元素没有扩展(有一个库可以做到这一点，称为 PrototypeJS，但这不是 jQuery 的工作方式)。

对于你的 div，当你这样做时:

var test = $('#test');

...test 指的是一个 jQuery 对象，其中有一个 DOM 元素，如下所示:

        +−−−−−−−−−−−−−−−+test−−−>| jQuery object |        +−−−−−−−−−−−−−−−+     +−−−−−−−−−−−−−−−−+        | 0             |−−−−>| HTMLDivElement |        | length: 1     |     +−−−−−−−−−−−−−−−−+        +−−−−−−−−−−−−−−−+     | id: "test"     |                              | ...            |                              +−−−−−−−−−−−−−−−−+

As you can see, jQuery objects are array-like: They have a length property, and properties for each of their elements in numeric order starting with 0.

Similarly, if we had

<div class="foo" id="one"></div>
<div class="foo" id="two"></div>
<div class="foo" id="three"></div>

做了

var test = $(".foo");

我们会:

        +−−−−−−−−−−−−−−−+test−−−>| jQuery object |        +−−−−−−−−−−−−−−−+       +−−−−−−−−−−−−−−−−−−+        | 0             |−−−−−−>|  HTMLDivElement  |        | 1             |−−−+   +−−−−−−−−−−−−−−−−−−+        | 2             |−+ |   | id: "one"        |        | length: 3     | | |   | className: "foo" |        +−−−−−−−−−−−−−−−+ | |   | ...              |                          | |   +−−−−−−−−−−−−−−−−−−+                          | |                           | |   +−−−−−−−−−−−−−−−−−−+                          | +−−>|  HTMLDivElement  |                          |     +−−−−−−−−−−−−−−−−−−+                          |     | id: "two"        |                          |     | className: "foo" |                          |     | ...              |                          |     +−−−−−−−−−−−−−−−−−−+                          |                             |     +−−−−−−−−−−−−−−−−−−+                          +−−−−>|  HTMLDivElement  |                                +−−−−−−−−−−−−−−−−−−+                                | id: "three"      |                                | className: "foo" |                                | ...              |                                +−−−−−−−−−−−−−−−−−−+

They're kept in the jQuery object in document order, which is why we see them in the listed order above.

This set-based nature of jQuery is a big part of its strength compared to the afore-mentioned PrototypeJS or the DOM itself. Want to turn all elements matching a selector green? With jQuery it's:

$("selector").css("color", "green");

对于 DOM，它是一个 for 循环:

var elements = document.querySelectorAll("selector");
for (var i = 0; i < elements.length; ++i) {
    elements[i].style.color = "green";
}

...或辅助函数。在非常的现代浏览器上，我们可以在没有非标准助手的情况下变得更加简洁:

Array.from(document.querySelectorAll("selector")).forEach(e => e.style.color = "green");

...但简而言之，事实并非如此。 :-)

奇怪的是，jQuery 基于集合的特性并没有体现在它的 getter 方法中。例如，上面的代码将 jQuery 集中的所有 元素设置为绿色，但是这段代码:

console.log($("selector").css("color"));

...仅从集合中的第一个 元素获取颜色。几乎所有 jQuery 的 getter 方法都是这样的(奇怪的是 text，出于某种原因)。但另一种选择当然是返回所有这些颜色的数组，John Resig(原作者)决定改用非对称 API。