Selettori jQuery non comuni

I selettori sono di vitale importanza. La maggior parte dei metodi jQuery richiede un qualche tipo di selezione di elementi per essere di qualche utilità. Ad esempio, allegando a clic evento su un pulsante richiede di selezionare prima il pulsante. 

Dal momento che i comuni selettori jQuery sono basati su selettori CSS esistenti, potresti essere esperto in loro. Tuttavia, ci sono anche alcuni selettori che non vengono utilizzati tanto. In questo tutorial, mi concentrerò su questi selettori meno noti ma importanti.

All Selector (*)

Questo selettore è giustamente chiamato il selettore universale perché seleziona tutti gli elementi nel documento, incluso il , , > o  tag. Questa demo dovrebbe illustrare il mio punto.

$ ("section *") // Seleziona tutti i discendenti $ ("section> *") // Seleziona tutti i discendenti diretti $ ("section> *> *") // Seleziona tutti i discendenti di secondo livello $ ("section> *> * a ") // Seleziona i collegamenti di terzo livello

Questo selettore è estremamente lento se usato in combinazione con altri elementi. Tuttavia, tutto dipende da come viene utilizzato il selettore e da quale browser viene eseguito. In Firefox, $ ("# selector> *"). find ("li") è più lento di $ ("# selector> ul"). find ("li"). È interessante notare che Chrome esegue  $ ("# selector> *"). find ("li") leggermente più veloce. Tutti i browser vengono eseguiti $ ("# selector *"). find ("li") più lentamente di $ ("# selector ul"). find ("li"). Suggerirei di confrontare le prestazioni prima di utilizzare questo selettore. 


Ecco una demo che confronta la velocità di esecuzione del selettore all.

Selettore animato (: animato)

Puoi usare il :animato selettore per selezionare tutti gli elementi la cui animazione è ancora in corso quando viene eseguito questo selettore. L'unico problema è che selezionerà solo gli elementi che sono stati animati usando jQuery. Questo selettore è un'estensione jQuery e non beneficia del miglioramento delle prestazioni fornito con il nativo querySelectorAll () metodo. 

Inoltre, non puoi rilevare le animazioni CSS usando jQuery. Tuttavia, è possibile rilevare quando l'animazione termina con animationend evento.

Dai un'occhiata alla seguente demo.

Nella demo sopra, solo la dispari div gli elementi sono animati prima dell'esecuzione . $ ( ": Animazione") css ( "sfondo", "# 6F9");. Di conseguenza, solo quelli div gli elementi cambiano in verde. Subito dopo, chiamiamo la funzione animata sul resto del div elementi. Se si fa clic sul pulsante ora tutto div gli elementi dovrebbero diventare verdi.

Selettore non uguale di attributo ([attr! = "Valore"])

I selettori di attributo comuni di solito rilevano se esiste un attributo con un nome o un valore specificato. D'altra parte, il [Attr! = "Valore"]  il selettore seleziona tutti gli elementi che non hanno l'attributo specificato o in cui l'attributo esiste ma non è uguale a un valore particolare. È equivalente a : Non ([attr = "value"]). diversamente da [Attr = "valore"] , [Attr! = "Valore"] non fa parte delle specifiche CSS. Di conseguenza, utilizzando $ ( "Css-selettore"). Non ( "[attr = 'valore']") può migliorare le prestazioni nei browser moderni. 

Lo snippet seguente aggiunge a mancata corrispondenza classe a tutti Li elementi di cui Dati-categoria attributo non è uguale a css. Ciò può essere utile durante il debug o l'impostazione del valore dell'attributo corretto utilizzando JavaScript.

$ ("li [data-category! = 'css']"). each (function () $ (this) .addClass ("mismatch"); // Aggiunge una classe mismatch per filtrare i selettori. $ (". mismatch "). attr (" data-category ", attributeValue); // Imposta il valore dell'attributo corretto);

Nella demo, analizzo due elenchi e corrego il valore degli attributi di categoria degli elementi.

Contiene il selettore (: contiene (testo))

Questo selettore viene utilizzato per selezionare tutti gli elementi che contengono la stringa specificata. La stringa corrispondente può essere direttamente all'interno dell'elemento interessato o all'interno di uno qualsiasi dei suoi discendenti. 

L'esempio seguente dovrebbe aiutarti a capire meglio questo selettore. Aggiungeremo uno sfondo giallo a tutte le occorrenze della frase Lorem Ipsum.

Iniziamo con il markup:

 
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500, quando una stampante sconosciuta ha preso una cambusa di tipo e l'ha codificata per creare un libro esemplificativo di tipo. È sopravvissuto non solo a cinque secoli, ma anche al salto nella composizione elettronica, rimanendo sostanzialmente invariato.
 
È stato reso popolare negli anni '60 con la pubblicazione di fogli Letraset contenenti brani di Lorem Ipsum e, più recentemente, con software di desktop publishing come Aldus PageMaker che include versioni di Lorem Ipsum.
 Link Wikipedia di Lorem Ipsum 
 
 
Questo lorem ipsum non dovrebbe essere evidenziato.
 
 
 
Una lista Lorem Ipsum
 
Altri elementi qui
 

Osserva che la frase Lorem Ipsum si verifica in sette luoghi diversi. Ho deliberatamente usato maiuscoletto in una di queste istanze per mostrare che la corrispondenza è case sensitive. 

Ecco il codice JavaScript per evidenziare tutte le partite: 

$ ("section: contains ('Lorem Ipsum')"). each (function () $ (this) .html ($ (this) .html (). replace (/ Lorem Ipsum / g, "Lorem Ipsum")););

Le virgolette attorno alla stringa sono opzionali. Ciò implica che entrambi $ ("section: contains ('Lorem Ipsum')") ") e $ ("sezione: contiene (Lorem Ipsum)") sarà valido nello snippet qui sopra. Sto solo prendendo di mira l'elemento della sezione, quindi il testo di Lorem Ipsum all'interno degli elementi della lista dovrebbe rimanere invariato. Inoltre, a causa del caso non corrispondente, il testo all'interno del secondo sezione l'elemento non dovrebbe essere evidenziato neanche. Come puoi vedere in questa demo, questo è esattamente quello che succede.

Ha il selettore (: ha (selettore))

Questo selettore seleziona tutti gli elementi che contengono almeno un elemento che corrisponde a un determinato selettore. Il selettore che deve essere abbinato non deve essere un bambino diretto. : Ha () non fa parte delle specifiche CSS. Nei browser moderni, dovresti usare $ ( "Puro-css-selettore"). Ha (selettore) invece di $ ( "Puro-css-selettore: ha (selettore)") per prestazioni migliorate. 

Una possibile applicazione di questo selettore è la manipolazione di elementi che contengono un elemento specifico al loro interno. Nel nostro esempio, cambierò il colore di tutti gli elementi della lista che contengono un collegamento al loro interno.

Questo è il markup per la demo:

 
Abitante pellénico morbi tristique senectus.
 
Abitante pellénico morbi tristique senectus.
 (... altri elementi della lista qui ...) 
Abitante pellénico morbi tristique senectus.
 
Abitante pellénico morbi tristique senectus.
 

Ecco il codice JavaScript per cambiare il colore degli elementi della lista:

$ ("li: has (a)"). each (function (index) $ (this) .css ("color", "crimson"););

La logica dietro questo codice è piuttosto semplice. Faccio scorrere tutti gli elementi dell'elenco che contengono un collegamento e impostiamo il loro colore su cremisi. Puoi anche manipolare il testo all'interno degli elementi dell'elenco o rimuoverli dal DOM. Sono sicuro che questo selettore può essere utilizzato in molte altre situazioni. Scopri una versione live di questo codice su CodePen.

Selettori basati su indici

Oltre ai selettori CSS come : Nth-child (), jQuery ha anche il proprio set di selettori basati su indici. Questi selettori sono : Eq (index), : Lt (index), e : Gt (index). A differenza dei selettori basati su CSS, questi selettori utilizzano l'indicizzazione basata su zero. Questo implica che mentre : Nth-child (1) selezionerà il primo figlio, : Eq (1) selezionerà il secondo figlio. Per selezionare il primo figlio che dovrai usare : Eq (0). 

Questi selettori possono anche accettare valori negativi. Quando vengono specificati valori negativi, il conteggio viene eseguito all'indietro a partire dall'ultimo elemento. 

: Lt (index) seleziona tutti gli elementi che hanno un indice inferiore al valore specificato. Per selezionare i primi tre elementi, verranno utilizzati : Lt (3). Questo perché i primi tre elementi avranno rispettivamente valori di indice 0, 1 e 2. Utilizzando un indice negativo selezioneremo tutti i valori prima dell'elemento che abbiamo raggiunto dopo il conteggio all'indietro. allo stesso modo, : Gt (index) seleziona tutti gli elementi con indice maggiore del valore specificato.

: lt (4) // Seleziona i primi quattro elementi: lt (-4) // Seleziona tutti gli elementi oltre all'ultimo 4: gt (4) // Seleziona tutti gli elementi oltre al primo 5: gt (-4) // Seleziona gli ultimi tre elementi : gt (-1) // Seleziona niente: eq (4) // Seleziona quinto elemento: eq (-4) // Seleziona il quarto elemento dall'ultimo

Prova a fare clic su vari pulsanti nella demo per ottenere una migliore comprensione dei selettori di indice.

Selettori di forma

jQuery definisce molti selettori per una facile selezione degli elementi del modulo. Ad esempio, il :pulsante il selettore selezionerà tutti gli elementi del pulsante e gli elementi con il pulsante del tipo. allo stesso modo, : casella di controllo selezionerà tutti gli elementi di input con tipo checkbox. Esistono selettori definiti per quasi tutti gli elementi di input. Considera il modulo sottostante:

 
 L'immissione di testo 
   
 
 
 casella di controllo:     
 

Ho creato due elementi di testo qui e quattro caselle di controllo. Il modulo è piuttosto semplice, ma dovrebbe darti un'idea di come funzionano i selettori di forma. Conteremo il numero di elementi di testo usando il :testo selettore e aggiorna anche il testo nel primo input di testo. 

var textCount = $ (": text"). length; $ (". text-elements"). text ('Text Inputs:' + textCount); $ (": text"). eq (0) .val ('Aggiunto programmaticamente!');

Io uso :testo per selezionare tutti gli input di testo e quindi il metodo di lunghezza per calcolare il loro numero. Nella terza affermazione, io uso il discusso in precedenza : Eq () selettore per accedere al primo elemento e successivamente impostarne il valore. 

Tieni presente che da jQuery 1.5.2, :testo ritorna vero per elementi che non hanno alcun attributo di tipo specificato.

Dai un'occhiata alla demo.

Header Selector (: intestazione)

Se si desidera selezionare tutti gli elementi di intestazione su una pagina Web, è possibile utilizzare il cortocircuito $ ( ": Intestazione") versione al posto del verboso $ ("h1 h2 h3 h4 h5 h6") selettore. Questo selettore non fa parte delle specifiche CSS. Di conseguenza, è possibile ottenere prestazioni migliori utilizzando innanzitutto un selettore CSS puro e quindi utilizzando .filtrata ( ": header"). 

Ad esempio, supponiamo che ci sia un articolo elemento su una pagina Web e ha tre diverse intestazioni. Ora, puoi usare $ ("articolo: intestazione") invece di $ ("articolo h1, articolo h2, articolo h3") per brevità. Per renderlo ancora più veloce, puoi usare $ ( "Articolo") filtrare. ( ": Intestazione"). In questo modo hai il meglio di entrambi i mondi.

Per numerare tutti gli elementi di intestazione, è possibile utilizzare il seguente codice.

$ ("article: header"). each (function (index) $ (this) .text ((index + 1) + ":" + $ (this) .text ()); // Aggiunge numeri alle intestazioni );

Prova questa demo di accompagnamento.

Pensieri finali

In questo tutorial, ho discusso selettori non comuni che potresti incontrare quando usi jQuery. Sebbene la maggior parte di questi selettori disponga di alternative che è possibile utilizzare, è comunque opportuno sapere che questi selettori esistono. 

Spero che tu abbia imparato qualcosa di nuovo in questo tutorial. Se avete domande o suggerimenti, si prega di fare un commento.