¿Diferencia entre el selector CSS y el filtro jQuery?

Es posible pasar selectores de CSS a la función jQuery, como:

jQuery('h1 + h2'); 

jQuery también tiene algunos filtros tales como :even y :odd :

 jQuery('tr:even'); 

Estaba buscando algún tipo de regla de syntax que diferencie a los dos y estaba pensando que tal vez los filtros jQuery siempre usan un :

Sin embargo, algunos selectores de CSS también usan un : Por ejemplo:

  • :last-child
  • :root
  • :empty
  • :target

¿Alguien tiene consejos inteligentes para saber si se usa un selector CSS o un filtro jQuery?

Estaba buscando algún tipo de regla de syntax que diferencie a los dos y estaba pensando que tal vez los filtros jQuery siempre usan un :

Sin embargo, algunos selectores de CSS también usan un :

¿Alguien tiene consejos inteligentes para saber si se usa un selector CSS o un filtro jQuery?

Esta es una de las cosas más molestas sobre las bibliotecas de selector que adoptan la syntax CSS dentro de sus propias extensiones: porque ambos filtros basados ​​en coincidencias y pseudo-clases verdaderas se agrupan en un término general conocido como “pseudo-selectores” (que básicamente significa “selectores”). que comienza con a : “), la única manera de saber si un” pseudo-selector “es un filtro o un selector simple verdadero es saber qué hace, que si no está familiarizado con el selector a menudo significa referirse al jQuery documentación mencionada por otros aquí. Observará que la mayoría de estos filtros basados ​​en coincidencias tendrán la palabra “coincidencia” en alguna parte de sus descripciones; ese es un indicador razonable de que un “pseudo-selector” funciona como un filtro basado en el partido.

Hay una subcategoría de Selectores en jQuery llamada Filtros básicos , sin embargo, el nombre es completamente engañoso y los selectores mismos están pobremente categorizados; no todos son filtros reales, pero algunos de ellos funcionan como pseudo-clases estándar. Al menos la categoría Extensiones jQuery tiene un nombre propio, porque estos selectores no son estándar.

Lo que llamo un “filtro basado en coincidencias” es básicamente un selector que coincide con un elemento basado en todo el selector complejo que conduce a ese selector . ¿Suena confuso? Eso es porque lo es.

De hecho, para facilitar la referencia, aquí hay una lista de selectores jQuery que funcionan como filtros basados ​​en coincidencias:

  • :eq()
  • :gt()
  • :lt()
  • :even
  • :odd
  • :first
  • :last

Estos selectores devuelven los enésimos elemento (s) entre un conjunto de coincidencias, a diferencia de otros selectores estándar que toman cada elemento y hacen deducciones de lo que se basa únicamente en la información sobre el elemento proporcionada por DOM o de otro modo, y no basado en el rest de la cadena de selector. Aunque a menudo se los compara con :first-child , :last-child , :nth-child() y :nth-last-child() , son muy diferentes en términos de funcionalidad. Tenga mucho cuidado al elegir qué selector usar.

Por ejemplo, el siguiente selector, usando jQuery’s :first :

 $('ul > li:first') 

Coincide con un solo elemento: el primer elemento que coincide con el selector ul > li , independientemente de la cantidad de elementos ul y li que haya en el DOM. Esta notación de selector se puede escribir como una llamada a método así:

 $('ul > li').first() 

Lo que hace que sea mucho más claro lo que realmente hace. Difiere de :first-child :

 $('ul > li:first-child') 

En eso :first-child seleccionará cada li que sea el primer hijo de su padre padre y, por lo tanto, puede devolver uno o más elementos li , en oposición a exactamente uno con :first .

También vale la pena mencionar es el selector :not() ; aunque no lo considero como el mismo tipo de filtro que los selectores anteriores, es importante recordar que jQuery lo extiende de lo que realmente se ofrece en CSS. Las diferencias se detallan en esta pregunta . Me imagino que está categorizado en filtros básicos de todos modos debido a .not() , que definitivamente es para todos sus propósitos y propósitos un método de filtro, y la antítesis de .filter() .

La idea de la función de utilidad del selector jQuery es aceptar cualquier selector css (incluidos los selectores css3) y, además de eso, agregar algunos extra que no están definidos en la especificación css (ejemplos de los cuales son: impar (que en css válido es : nth-child (impar)) y: not (selector) por ejemplo). Es muy recomendable no utilizar los selectores específicos de jquery, excepto si es realmente necesario, ya que los selectores de CSS nativos pueden procesarse (en navegadores web modernos) mucho más rápido que el jQuery css personalizado. Como ya se mencionó en gdoron, puede ver la lista completa en la documentación de jquery si necesita verificar si un selector específico está o no disponible y también puede encontrar los selectores personalizados allí.

Sí, ese selector existe en jQuery
El selector se llama próximo selector adyacente

Puede ver la lista completa de selectores aquí

¿Alguien tiene consejos inteligentes para saber si se usa un selector CSS o un filtro JQuery?

Mi consejo, revisa la API, si el selector existe o no …