Question

我很想知道这是如何运作的使用jQuery时，我的DOM元素带有各种便利方法举个例子，我只需要the css method：

获取匹配元素集中第一个元素的计算样式属性的值，或为每个匹配元素设置一个或多个CSS属性。

HTML code：

<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元素对象？或者我的所有元素都包含在Proxy类中？或者这是如何工作的？

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

Answer 1

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

他们没有。它们位于jQuery对象（特别是那些jQuery对象的原型）中，它们是围绕DOM元素集的包装器。实际的DOM元素没有被扩展（有一个lib就是这样做的，叫做PrototypeJS，但它并不是jQuery的工作方式）。

使用你的div，当你这样做时：

var test = $('#test');

... test指的是一个jQuery对象，里面有一个DOM元素，如下所示：

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

如您所见，jQuery对象类似于：它们具有length属性，并且每个元素的属性按数字顺序从0开始。

同样，如果我们有

<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" |
                                | ...              |
                                +−−−−−−−−−−−−−−−−−−+

他们以文档顺序保存在jQuery对象中，这就是我们按照上面列出的顺序看到它们的原因。

与上述PrototypeJS或DOM本身相比，jQuery的这种基于集合的特性是其强度的重要组成部分。想要将所有与选择器匹配的元素变为绿色吗？使用jQuery：

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

使用DOM，它是for循环：

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

...或辅助功能。在 very 现代浏览器上，我们可以在没有非标准帮助程序的情况下更加简洁：

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

......但简洁而不是。： - ）

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

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

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

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

1 个答案: