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

104

Ich bin ein jQuery-Anfänger und habe beim Durchgehen einiger Codebeispiele Folgendes gefunden:

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

Gibt es einen Unterschied zwischen diesen beiden?

jquery document document-body ashleedawg
quelle
1
Einer ist schneller, aber wenn man bedenkt, dass auf einer einzelnen Seite nie mehr als ein paar Mal aufgerufen wird, ist der Unterschied zwischen den beiden sehr gering.
Kevin B
$(body)funktioniert nicht für .on('click'...Events, während $(document.body)und $(document)beide funktionieren.
Rybo111
3
Die obige Aussage ist falsch und es gibt auch einen kleinen Leistungsunterschied, ungefähr 10% zugunsten von $ (document.body). Sie können den Vergleich hier ansehen sitepoint.com/jquery-body-on-document-on
Sigismund

Antworten:

76

Sie beziehen sich auf dasselbe Element. Der Unterschied besteht darin, dass Sie document.bodydas Element direkt an jQuery übergeben , wenn Sie sagen, dass Sie es übergeben. Wenn Sie die Zeichenfolge übergeben 'body', muss die jQuery-Auswahlmaschine die Zeichenfolge alternativ interpretieren, um herauszufinden, auf welche Elemente sie sich bezieht.

In der Praxis wird entweder die Arbeit erledigt.

Wenn Sie interessiert sind, finden Sie weitere Informationen in der Dokumentation zur jQuery-Funktion .

Justin Ethier
quelle
1
Die erste Aussage ist nicht ganz richtig. Sie können sich auf dasselbe Element beziehen. Normalerweise sogar. Aber nicht immer :). Siehe meine Antwort unten.
Jvenema
18

Die Antworten hier sind eigentlich nicht ganz richtig. Schließen, aber es gibt einen Randfall.

Der Unterschied besteht darin, dass $ ('body') das Element tatsächlich anhand des Tag-Namens auswählt, während document.body auf das direkte Objekt im Dokument verweist.

Das heißt, wenn Sie (oder ein Schurkenskript) das document.body-Element überschreiben (schade!), Funktioniert $ ('body') weiterhin, $ (document.body) jedoch nicht. Per Definition sind sie also nicht gleichwertig.

Ich wage zu vermuten, dass es andere Randfälle gibt (z. B. global identifizierte Elemente im IE), die ebenfalls auslösen, was einem überschriebenen Body-Element im Dokumentobjekt entspricht, und die gleiche Situation würde gelten.

jvenema
quelle
Ich denke nicht, dass es möglich ist, document.bodyauf etwas anderes als a zu setzen <body>: i.imgur.com/unJVwXy.png
mpen
Könnte jetzt gelöst werden. Es gab eine Zeit, in der FF und IE dies zuließen und / oder durch Elemente mit der ID "body" verwirrt wurden (der Fehler, den ich traf, war ein Kunde, der unser Skript auf der Website eines plastischen Chirurgen mit einem mit einem Tag versehenen Bild verwendete die ID "Körper"). Hoffentlich kein Problem mehr :)
Jvenema
12

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

Ich habe das folgende Skript verwendet:

WARNUNG: Wenn Sie dies ausführen, friert Ihr Browser ein wenig ein und kann 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>
Erweitern Sie das Snippet

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

Auswahl: 19591.97509765625ms
Element: 4947.8759765625ms

Das direkte Übergeben des Elements ist etwa viermal schneller als das Übergeben des Selektors.

Phiter
quelle
7
Du bekommst eine Gegenstimme nur für die "Pfeilnotation", du frecher Phiter du!
KlaymenDK
1
Ich habe irgendwo darüber gelesen und wollte es sofort benutzen XD
Phiter
Ja, aber - wirst du das wirklich 10 Millionen Mal machen? Warum nicht diese Art von Analyse dort durchführen, wo es darauf ankommt?
Scrayne
@scrayne Bei diesen Leistungstests geht es nicht um echte Anwendungsfälle. Es ist ziemlich selten, 10 Millionen Operationen mit einem solchen Element durchzuführen. Aber OP wollte den Unterschied wissen und ich bemerkte, dass es einen Leistungsunterschied gibt, also denke ich, dass es erwähnenswert ist.
Phiter
9

$(document.body)verwendet die globale Referenz document, um eine Referenz auf die zu erhalten body, während dies $('body')ein Selektor ist, in dem jQuery die Referenz auf das <body>Element auf der erhält document.

Kein wesentlicher Unterschied, den ich sehen kann, kein merklicher Leistungsgewinn von einem zum anderen.

Gabe
quelle
9
$(document.body)ist laut diesem Artikel messbar schneller: sitepoint.com/jquery-body-on-document-on
Steve Harrison
6

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

Mit beiden verpacken Sie das <body>Tag in ein jQuery-Objekt

Nicola Peluchetti
quelle
3

In der Ausgabe sind beide gleichwertig. Der zweite Ausdruck durchläuft jedoch eine Top-Down-Suche im DOM-Stammverzeichnis. Möglicherweise möchten Sie den zusätzlichen Aufwand vermeiden (wie winzig er auch sein mag), wenn Sie bereits ein document.body-Objekt zur Hand haben, das JQuery umbrechen kann. Siehe http://api.jquery.com/jQuery/ #Selector Context

Santon
quelle