Differenza tra $ (document.body) e $ ('body')

104

Sono un principiante di jQuery e durante alcuni esempi di codice ho trovato:

$(document.body) e $('body')

C'è qualche differenza tra questi due?

jquery document document-body

— ashleedawg
fonte

1

Uno è più veloce, tuttavia considerando che non verrebbe mai chiamato più di poche volte su una singola pagina, la differenza tra i due è molto piccola.

— Kevin B

$(body)non funziona per gli .on('click'...eventi, mentre $(document.body)ed $(document)entrambi funzionano.

— rybo111

3

L'affermazione sopra è falsa e c'è anche una piccola differenza nelle prestazioni, circa il 10% a favore di $ (document.body). Puoi vedere il confronto qui sitepoint.com/jquery-body-on-document-on

— Sigismund

77

Si riferiscono allo stesso elemento, la differenza è che quando dici document.bodyche stai passando l'elemento direttamente a jQuery. In alternativa, quando si passa la stringa 'body', il motore di selezione jQuery deve interpretare la stringa per capire a quale elemento si riferisce.

In pratica, entrambi porteranno a termine il lavoro.

Se sei interessato, ci sono maggiori informazioni nella documentazione per la funzione jQuery .

— Justin Ethier
fonte

1

La prima affermazione non è del tutto corretta. Essi possono fare riferimento allo stesso elemento. Di solito anche. Ma non sempre :). Vedi la mia risposta di seguito.

— jvenema

18

Le risposte qui non sono in realtà completamente corrette. Chiudi, ma c'è un caso limite.

La differenza è che $ ('body') seleziona effettivamente l'elemento in base al nome del tag, mentre document.body fa riferimento all'oggetto diretto nel documento.

Ciò significa che se tu (o uno script canaglia) sovrascrivi l'elemento document.body (vergogna!) $ ('Body') continuerà a funzionare, ma $ (document.body) no. Quindi per definizione non sono equivalenti.

Mi azzarderei a indovinare che ci sono altri casi limite (come elementi identificati a livello globale in IE) che attivano anche ciò che equivale a un elemento del corpo sovrascritto sull'oggetto documento, e la stessa situazione si applicherebbe.

— jvenema
fonte

Non penso che sia possibile impostare document.bodyqualcosa di diverso da a <body>: i.imgur.com/unJVwXy.png

— mpen

Potrebbe essere risolto ora. C'è stato un tempo in cui FF e IE ti permettevano di farlo, e / o venivano confusi da articoli con un ID "body" (l'errore che ho colpito era un cliente che utilizzava il nostro script sul sito di un chirurgo plastico con un'immagine contrassegnata con l'id "body"). Speriamo che non sia più un problema :)

— jvenema

12

Ho riscontrato una differenza piuttosto grande nei tempi durante il test nel mio browser.

Ho usato il seguente script:

ATTENZIONE: eseguendolo si bloccherà un po 'il browser, potrebbe anche bloccarlo.

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>

Espandi lo snippet

Ho fatto 10 milioni di interazioni e questi sono stati i risultati (Chrome 65):

selettore: 19591.97509765625ms
elemento: 4947.8759765625ms

Il passaggio diretto dell'elemento è circa 4 volte più veloce rispetto al passaggio del selettore.

— Phiter
fonte

7

Ottieni un voto positivo solo per la "notazione freccia", sei sfacciato!

— KlaymenDK

1

L'ho letto da qualche parte e ho voluto usarlo subito XD

— Phiter

Sì, ma - lo farai davvero 10 milioni di volte? Perché non fare questo tipo di analisi dove conta?

— scrayne

@scrayne questi test delle prestazioni non riguardano casi d'uso reali. È abbastanza raro fare 10 milioni di operazioni su un elemento come questo. Ma OP voleva sapere la differenza e ho notato che c'è una differenza di prestazioni, quindi suppongo che valga la pena notare.

— Phiter

9

$(document.body)sta usando il riferimento globale documentper ottenere un riferimento a body, mentre $('body')è un selettore in cui jQuery otterrà il riferimento <body>all'elemento su document.

Nessuna grande differenza che posso vedere, nessun notevole guadagno di prestazioni dall'uno all'altro.

— Gabe
fonte

9

$(document.body)è misurabilmente più veloce secondo questo articolo: sitepoint.com/jquery-body-on-document-on

— Steve Harrison

6

Non dovrebbe esserci alcuna differenza, forse il primo è un po 'più performante ma penso che sia banale (non dovresti preoccuparti di questo, davvero).

Con entrambi avvolgi il <body>tag in un oggetto jQuery

— Nicola Peluchetti
fonte

3

In termini di output entrambi sono equivalenti. Anche se la seconda espressione passa attraverso una ricerca dall'alto verso il basso dalla radice DOM. Potresti voler evitare l'overhead aggiuntivo (per quanto minuscolo possa essere) se hai già un oggetto document.body in mano per il wrapping di JQuery. Vedi http://api.jquery.com/jQuery/ #Selector Context

— santon
fonte