Selectores de sintaxis de jQuery, ¿son estos exactamente lo mismo?

Question

Hay algunas preferencias que he observado para la sintaxis de selección, tales como:

 $('#mydiv > a.selectMe').hide();
 $('#mydiv').children('a.selectMe').hide();

Para mí, parece un poco confuso ya que la documentación para jQuery es un poco ambigua aquí:

" padre > niño regresa: matriz Coincide con todos los elementos secundarios especificados por " child " de elementos especificados por " parent " ;. "

y

" children (expr) Devuelve: jQuery Obtenga un conjunto de elementos que contenga todos los elementos secundarios inmediatos únicos de cada uno de los elementos coincidentes. "

La pregunta que debe aclararse en MI mente es si el primer formulario devuelve TODOS los hijos / nietos o solo los hijos inmediatos, como el segundo formulario indica que es cierto. Uno de estos es el "selector". forma y el otro bajo '' atravesar '' en las páginas de documentación de jQuery, que para mí son tareas funcionales similares pero no exactamente lo mismo.

Entonces, las preguntas aquí son:
¿Qué forma es más rápida? ¿REALMENTE seleccionan lo mismo, o el 'parent > forma infantil 'seleccionar nietos y niños inmediatos?

Answer 1

$ ('# mydiv a.selectMe') - Encuentra todos los anclajes con la clase 'selectMe' que son descendientes de la etiqueta con ID 'mydiv'. Estos podrían estar anidados profundamente.

$ ('# mydiv > a.selectMe') - Encuentra hijos inmediatos.

En cuanto a cuál es más rápido entre sus dos ejemplos de tener hijos inmediatos ... Hice algunas pruebas de tiempo para probar.

Tenía una página con 10,000 etiquetas de anclaje con la clase 'selectMe', dentro de un Div con ID 'mydiv'.

$("#mydiv").children("a.selectMe") - 485ms
$("#mydiv > a.selectMe") - 374ms

Básicamente, es una diferencia insignificante, aunque hacer todo con selectores fue mucho más rápido. Sin embargo, si tiene 10k anclas en una página, se enfrenta a un problema completamente diferente. :-)