¿Cómo puedo saber cómo funcionan los selectores jQuery detrás de escena?

Question

Por ejemplo, cuando usamos $('div span'), ¿cómo hace jQuery tal búsqueda por nosotros?

¿Busca primero el elemento span o el div?

Parece que el sitio oficial de jQuery no tiene ninguna explicación sobre estas cosas; simplemente nos muestra qué funciones están disponibles a través de la API.

Quiero saber cómo se implementa cada selector jQuery de tipo, por lo que puedo seleccionar el mejor selector para usar.

¿Sabes dónde puedo obtener esa información?

Answer 1

El lugar más simple para buscar sería leer directamente de la fuente. Descargue la fuente sin comprimir del sitio de jquery y lea de la fuente sin procesar qué hace y en qué orden.

http://jquery.com/download/

Answer 2

Como @Juhana ha comentado, si desea conocer los métodos específicos jQuery utiliza para seleccionar objetos en función de sus selectores, mira el repositorio GitHub:

https://github.com/jquery/jquery/

alternativa, busque en el código fuente disponible en la descarga jQuery sin comprimir:

http://jquery.com/download/

Si lo que desea saber lo que están disponibles para usted diferentes selectores, jQuery proporciona una lista de ellos aquí:

http://api.jquery.com/category/selectors/

Answer 3

-Están Analizada de derecha a izquierda.

Ver http://csswizardry.com/2011/09/writing-efficient-css-selectors/ y Why do browsers match CSS selectors from right to left?

Answer 4

En términos generales, lo que necesita saber:

1. jQuery lee selectores from right to left.
2. Using an exact ID is fastest, seguido del uso de un nombre de etiqueta exacto, porque utilizan métodos optimizados nativos de JavaScript.
3. Selectores nativos de CSS como :first-child son faster than jQuery selectors como :first.

También puede leer el official Sizzle documentation, pero realmente no se discuten las técnicas de optimización.

Answer 5

Primero busca los elementos span.Se analiza el selector como:

1. Cualquier elemento con tagName = longitud de
2. Tener un antepasado con tagName = div

Para la primera parte se puede utilizar el método getElementsByTagName para encontrar todos los span elementos, luego tiene que recorrer los antepasados ​​de cada uno para buscar elementos div.