Frage Unterschied zwischen $ (document.body) und $ ('body') JQuery


Ich bin ein JQuery Anfänger und habe einige Beispiele in einigen gefundenen Codes durchgelesen.

$(document.body) und $('body')

Kann mir jemand sagen, ob es einen Unterschied zwischen diesen beiden gibt?


75
2017-09-06 19:33


Ursprung


Antworten:


Sie beziehen sich auf das gleiche Element, der Unterschied ist der, wenn du sagst document.body Sie übergeben das Element direkt an jQuery. Alternativ, wenn Sie die Zeichenfolge übergeben 'body', das jQuery Selektor-Engine muss die Zeichenfolge interpretieren, um herauszufinden, auf welche Elemente verwiesen wird.

In der Praxis wird entweder die Arbeit erledigt.

Wenn Sie interessiert sind, gibt es weitere Informationen in der Dokumentation für die jQuery-Funktion.


61
2017-09-06 19:36



$(document.body) verwendet die globale Referenz document einen Verweis auf die body, wohingegen $('body') ist ein Selektor, in dem jQuery den Verweis auf den <body> Element auf der document.

Kein großer Unterschied, den ich sehen kann, kein merklicher Leistungsgewinn von einem zum anderen.


8
2017-09-06 19:36



Die Antworten hier sind nicht wirklich vollständig richtig. Schließen, aber es gibt einen Randfall.

Der Unterschied besteht darin, dass $ ('body') das Element tatsächlich nach dem Tag-Namen auswählt, während document.body das direkte Objekt auf dem Dokument referenziert.

Das heißt, wenn Sie (oder ein Rogue-Skript) das document.body-Element (Schande!) Überschreiben, funktioniert $ ('body') noch, aber $ (document.body) funktioniert nicht. Per definitionem sind sie nicht gleichwertig.

Ich wage zu erraten, dass es andere Randfälle gibt (wie global id-Elemente in IE), die auch auslösen würden, was einem überschriebenen body-Element auf dem Dokumentobjekt entspricht, und die gleiche Situation würde gelten.


8
2018-02-03 16:19



Es sollte überhaupt keinen Unterschied geben, vielleicht ist der erste etwas leistungsfähiger, aber ich denke, es ist trivial (Sie sollten sich darüber keine Gedanken machen).

Mit beiden wickelst du die <body> Tag in einem jQuery-Objekt


5
2017-09-06 19:35



Outputweise sind beide gleichwertig. Obwohl der zweite Ausdruck eine Top-Down-Suche vom DOM-Stamm durchläuft. Möglicherweise möchten Sie den zusätzlichen Overhead vermeiden (auch wenn er noch sehr klein ist), wenn Sie bereits ein document.body-Objekt in der Hand haben, damit JQuery es umbrechen kann. Sehen http://api.jquery.com/jQuery/ #Selector Kontext


3
2017-09-06 19:55



Ich habe einen ziemlich großen Unterschied im Timing beim Testen in meinem Browser gefunden.

Ich habe das folgende Skript verwendet:

ACHTUNG: Wenn Sie dies ausführen, wird Ihr Browser einfrieren, möglicherweise sogar abstürzen.

var n = 10000000, i;
i = n;
console.time('selector');
while (i --> 0){
    $("body");
}

console.timeEnd('selector');

i = n;
console.time('element');
while (i --> 0){
    $(document.body);
}

console.timeEnd('element');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ich habe 10 Millionen Interaktionen gemacht, und das waren die Ergebnisse (Chrome 65):

Selektor: 19591.97509765625ms
  Element: 4947.8759765625ms

Die direkte Übergabe des Elements ist etwa 4 mal schneller als die Übergabe des Selektors.


1
2018-03-23 12:43