Pregunta Diferencia entre $ (document.body) y $ ('body') JQuery


Soy un principiante de JQuery y mientras voy a través de algunos ejemplos en algunos códigos encontrados.

$(document.body) y $('body')

¿Alguien podría decirme si hay alguna diferencia entre estos dos?


75
2017-09-06 19:33


origen


Respuestas:


Se refieren al mismo elemento, la diferencia es que cuando dices document.body está pasando el elemento directamente a jQuery. Alternativamente, cuando pasas la cuerda 'body', el Motor selector jQuery tiene que interpretar la cadena para descubrir a qué elemento (s) se refiere.

En la práctica, cualquiera hará el trabajo.

Si está interesado, hay más información en la documentación para el función jQuery.


61
2017-09-06 19:36



$(document.body) está usando la referencia global document para obtener una referencia al body, mientras que $('body') es un selector en el que jQuery obtendrá la referencia al <body> elemento en el document.

No hay una diferencia importante que yo pueda ver, ninguna ganancia de rendimiento notable de uno a otro.


8
2017-09-06 19:36



Las respuestas aquí no son en realidad completamente correcto. Cerca, pero hay una caja de borde.

La diferencia es que $ ('cuerpo') realmente selecciona el elemento por el nombre de la etiqueta, mientras que document.body hace referencia al objeto directo en el documento.

Eso significa que si usted (o un guión deshonesto) sobrescribe el elemento document.body (¡vergüenza!) $ ('Body') seguirá funcionando, pero $ (document.body) no lo hará. Entonces, por definición, no son equivalentes.

Me atrevería a adivinar que hay otros casos extremos (como los elementos con id global en IE) que también desencadenarían lo que equivale a un elemento del cuerpo sobreescrito en el objeto del documento, y se aplicaría la misma situación.


8
2018-02-03 16:19



No debería haber ninguna diferencia, tal vez la primera es un poco más eficiente, pero creo que es trivial (no deberías preocuparte por esto, realmente).

Con ambos envuelves el <body> etiqueta en un objeto jQuery


5
2017-09-06 19:35



Outputwise ambos son equivalentes. Aunque la segunda expresión pasa por una búsqueda de arriba hacia abajo desde la raíz DOM. Es posible que desee evitar la sobrecarga adicional (aunque sea minúscula) si ya tiene el objeto document.body a mano para que JQuery lo complete. Ver http://api.jquery.com/jQuery/ #Selector Context


3
2017-09-06 19:55



He encontrado una gran diferencia en el tiempo cuando las pruebas en mi navegador.

Utilicé el siguiente script:

ADVERTENCIA: ejecutar esto congelará un poco su navegador, incluso podría bloquearlo.

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>

Hice 10 millones de interacciones, y esos fueron los resultados (Chrome 65):

selector: 19591.97509765625ms
  elemento: 4947.8759765625ms

Pasar el elemento directamente es aproximadamente 4 veces más rápido que pasar el selector.


1
2018-03-23 12:43