jQuery puede seleccionar cualquier cosa que CSS3 pueda seleccionar. ¡Pero no se detiene ahí! Hay una serie de selectores adicionales que ofrece jQuery (a través del motor de selección de Sizzle) que a veces son bastante útiles. Por ejemplo, CSS tiene selectores de atributos que le permiten seleccionar un elemento en función de cualquier atributo arbitrario que pueda tener el elemento. Por ejemplo:
Hay un selector de CSS que podemos usar en jQuery para seleccionar eso:
$("(data-whatever='elephant-eyeballs')");Hay variaciones en el selector de atributos, como en lugar de lo =que puede hacer ^=para indicar "comienza con este valor". Pero por alguna razón, CSS no tiene! = O “no es igual a este valor”. ¡jQuery lo hace! Ese es un ejemplo de una extensión de selector de jQuery.
Hay muchas de estas extensiones de selector. Algunos de los que hablamos específicamente en este screencast:
- : eq () - una versión indexada 0 de: nth-child ()
- : even - atajo para: nth-child (even)
- : gt (n) : seleccione elementos con un índice mayor que n. También es un atajo para un foro más complejo: nth-child ().
Posiblemente la extensión de selector más útil de todas es: has () - que limita la selección a los elementos que contienen lo que le pasa a este pseudo selector (o es un pseudo pseudo selector :) Es probable que algún día en el futuro CSS tenga algo como esto para nosotros (creo que va a ser así pre ! code) pero eso está muy lejos. Desafortunadamente, no presento un argumento muy convincente en este screencast, ¡pero sabrá cuándo lo necesita! Por ejemplo, "Seleccione todos los .modules que contienen una barra h3.sports", ese tipo de cosas.
También puede hacer sus propias extensiones de selección si lo desea. Aquí hay un artículo sobre eso. El ejemplo es hacer :inviewque selecciona un elemento solo si está visible en la página en la posición de desplazamiento actual. Sería así:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));