2012-04-02 21 views
6

Es posible pasar selectores CSS a la función jQuery como:Diferencia entre el selector CSS y el filtro jQuery?

jQuery('h1 + h2'); 

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

jQuery('tr:even'); 

que estaba buscando algún tipo de regla de sintaxis que los diferencia y pensé que tal vez los filtros jQuery siempre usan un :.

Sin embargo, algunos CSS selectors también usan un :. Por ejemplo:

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

¿Alguien tiene algún consejo inteligentes para saber si se trata de un selector CSS o un filtro que se utiliza jQuery?

+0

No estoy seguro de cómo responde alguna de las respuestas existentes a la pregunta ... – BoltClock

+0

@BoltClock ¿está seguro de que sabe de lo que está hablando? ... Estoy muy confundido ... – Neal

+0

@Neal: Estoy tan confundido como tú. ¿A qué estás respondiendo "Sí"? ¿Qué estás diciendo que debería ser posible en jQuery? – BoltClock

Respuesta

7

Estaba buscando algún tipo de regla de sintaxis 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 algún consejo inteligentes para saber si se trata de un selector CSS o un filtro que se utiliza jQuery?

Ésta es una de las cosas más molestas de bibliotecas de selección de la adopción de la sintaxis CSS dentro de sus propias extensiones: porque ambos filtros basados ​​en fósforo y verdaderos pseudo-clases se agrupan en un término genérico conocido como "pseudo-selectores" (que básicamente significa "selectores que comienzan con :"), la única forma de saber si un "pseudo-selector" es un filtro o es un verdadero selector simple al saber lo que hace, que si no está familiarizado con el selector a menudo significa referirse al jQuery documentation mencionado 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 Basic Filters, sin embargo, el nombre es completamente engañoso y los selectores mismos están mal categorizados; no todos son filtros reales, pero algunos de ellos funcionan como pseudo-clases estándar. Al menos la categoría jQuery Extensions 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, en aras de facilitar la referencia, aquí es una lista de los selectores de jQuery que funcionan como filtros basados ​​en fósforo:

Estos selectores de devolver el elemento (s) de orden n entre un conjunto de partidos, a diferencia de otros selectores, estándar que tienen cada elemento y hacer deducciones de lo que se basa únicamente en la información sobre el elemento, provisto por DOM o de otro modo, y no basado en el resto 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, el uso de jQuery :first:

$('ul > li:first') 

Partidos única uno elemento: el primer elemento que cumpla con el selector ul > li, independientemente del número de ul y li elementos que hay en el DOM . Esta notación selector puede ser escrita como una llamada a un método de este modo:

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

que hace que sea mucho más clara de lo que realmente hace.Se diferencia de :first-child:

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

En ese :first-child seleccionará cada li que es el primer hijo de su padre ul, y por lo tanto potencialmente puede devolver uno o másli elementos, en contraposición a exactamente una con :first.

También vale la pena mencionar 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 this question. Me imagino que está categorizado bajo 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().

0

Sí, existe ese selector de jQuery
El selector se llama next adjacent selector

se puede ver una lista de los selectores completos here

¿Alguien tiene algún consejo inteligentes para saber si se trata de un selector CSS o un filtro JQuery siendo utilizado?

Mi consejo, active la API, si existe o no el selector ...

0

La idea de la función de utilidad selector de jQuery es aceptar cualquier selector CSS (incluyendo selectores CSS3) y además de eso agregue 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). Se recomienda encarecidamente no no usar los selectores específicos de jquery, excepto si es realmente necesario, ya que los selectores 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 el jquery documentation si necesita verificar si un selector específico está o no disponible y también puede encontrar los selectores personalizados allí.

+0

': impar' no es lo mismo que': nth-child (impar) '- de hecho, no tiene equivalente de CSS en absoluto. Para una explicación detallada de ': not()' de jQuery contra ': not()' de CSS3, vea http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between- jquery-and-css – BoltClock

+0

Malo, siempre uso el selector n-child (impar) y olvidé por un segundo que: impar no funciona desde la perspectiva del padre. Y sí, en cuanto a: no, era consciente de eso y por eso dije eso: no (selector) es una extensión jquery (como: no (selector singleton) es la alternativa css), pero no quería profundizar demasiado en eso ya que la pregunta no parecía pedir eso. –

Cuestiones relacionadas