jQuery può selezionare tutto ciò che CSS3 può selezionare. Ma non finisce qui! Ci sono una serie di selettori aggiuntivi offerti da jQuery (tramite il motore di selezione Sizzle) che a volte sono dannatamente utili. Ad esempio, CSS dispone di selettori di attributi che consentono di selezionare un elemento in base a qualsiasi attributo arbitrario che l'elemento potrebbe avere. Per esempio:
C'è un selettore CSS che possiamo usare in jQuery per selezionarlo:
$("(data-whatever='elephant-eyeballs')");Ci sono variazioni sul selettore di attributi, come invece di =te puoi fare ^=per indicare "inizia con questo valore". Ma per qualche motivo, CSS non ha! = O "non uguale a questo valore". jQuery fa! Questo è un esempio di un'estensione del selettore jQuery.
Ci sono molte di queste estensioni del selettore. Alcuni di cui parliamo specificamente in questo screencast:
- : eq () - una versione indicizzata 0 di: nth-child ()
- : even - scorciatoia per: nth-child (even)
- : gt (n) - seleziona gli elementi con un indice maggiore di n. Anche una scorciatoia per un forumla più complesso: nth-child ().
Forse l'estensione del selettore più utile di tutte è: has () - che limita la selezione agli elementi che contengono ciò che passi a questo pseudo selettore (o è uno pseudo pseudo selettore :) È probabile che un giorno in futuro CSS avrà qualcosa di simile questo per noi (penso che sarà come pre ! code) ma è molto lontano. Sfortunatamente non ne ho argomenti molto convincenti in questo screencast, ma saprai quando ne avrai bisogno! Ad esempio "Seleziona tutti i .module che contengono un h3.sports-bar" - quel genere di cose.
Se lo desideri, puoi anche creare le tue estensioni di selezione. Ecco un articolo su questo. L'esempio è fare :inviewche seleziona un elemento solo se è visibile sulla pagina nella posizione di scorrimento corrente. Sarebbe così:
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); ) ));