Cosa è necessario e come viene scritto il selettore jQuery?

Un web designer moderno non dovrebbe solo possederele basi di HTML, CSS e JavaScript, ma anche essere in grado di lavorare nella libreria di jQuery, che si concentra sull'interazione di JavaScript con i documenti HTML. Ti consente di accedere e manipolare rapidamente qualsiasi elemento DOM (l'interfaccia del programma che apre l'accesso ai contenuti dei file html). Le principali unità strutturali di questa libreria sono le squadre. Per applicare questo o quel comando, è necessario un selettore jQuery.

La formula dei selettori nella libreria jQuery

I selettori di JQuery sono basati su quelli usati nei CSS. Sono necessari per selezionare gli elementi del file HTML, in modo da usarli per chiamare uno o un altro metodo di manipolazione (il team). La ricerca tramite il selettore viene eseguita mediante la funzione $ (). Ad esempio, $ ("div").

I selezionatori possono essere classificati in base al modo in cui gli elementi sono selezionati:

di base;
per attributo;
per gerarchia;
per contenuto;
per posizione;
selezione di campi modulo;
altri.

Selettori di base

Nel 90% dei casi quando si lavora con questa libreria viene utilizzato un selettore jQuery appartenente al gruppo principale. Tutti sono abbastanza semplici e comprensibili. Consideriamo ciascuno di loro:

* - seleziona tutti gli elementi della pagina, inclusi testa, corpo, ecc.;
p / div / sidebar / ... - seleziona tutti gli elementi relativi al tag specificato (ad esempio, p.div, barra laterale, ecc.);
.myClass / p.myClass: seleziona gli elementi con il nome della classe specificato;
# myID / p. # myID: seleziona un elemento con l'ID specificato.

Facciamo un esempio. Diciamo che dobbiamo selezionare tutti gli elementi di una pagina con il par della classe, la voce sarà simile a questa: $ (.par). Se sono necessari solo gli elementi di p di questa classe, scriveremo: $ (p.par).

Selettori di attributi

Il selettore JQuery principale può essere usato sedobbiamo selezionare un elemento che appartiene a una classe che ha un ID o selezionare tutti gli elementi della pagina. Tuttavia, ci sono momenti in cui l'elemento desiderato non ha una classe o un ID. Ecco perché ci sono selettori per attributo. Permettono di campionare su alcuni attributi di un elemento HTML, ad esempio, da href o src. Questo attributo è scritto tra parentesi quadre [].

L'esempio più semplice: $ ([src]) - seleziona tutti gli elementi che hanno l'attributo src. È possibile restringere l'area di esempio impostando l'attributo su un valore specifico: $ ([src = "valore"]).

Puoi usare diversi in jQueryi selettori, se necessario, restringono l'area di selezione. Ad esempio, $ (p [color = blue] [size = 12]) - saranno selezionati solo gli elementi di p che sono blu e la dimensione 12.

Selettori di contenuti

Nel caso in cui non sia possibile selezionare gli articoli per attributi o per i selettori principali, è opportuno fare riferimento al loro contenuto. Esistono 4 selettori di questo tipo:

: contains - seleziona gli elementi contenenti il testo specificato;
: has - seleziona gli elementi che contengono altri elementi specifici per quella linea;
: parent - seleziona gli elementi che contengono gli altri;
: vuoto: seleziona gli elementi che non contengono altri.

Facciamo un esempio. Per selezionare tutti gli elementi div contenenti il testo Hello, è necessario scrivere $ (div: contiene ("Hello")).

Selettori di gerarchia

C'è un altro modo per selezionare gli elementi in jQuery,vale a dire - in base alla loro gerarchia (cioè, la relazione tra loro sulla pagina HTML). Ce ne sono molti, quindi ecco due dei più popolari: "bambino" e "bambino".

Nel primo caso, gli elementi selezionatisono i discendenti diretti (figlio) dell'elemento dato (antenato). Ad esempio, per selezionare gli elementi dell'elenco nella classe di luci che sono i figli dell'elenco di nav, è necessario scrivere: $ (ul # nav> li.light).

Il secondo caso è più generale. Qui, i discendenti indiretti di un elemento possono anche essere selezionati. Ad esempio, per selezionare i collegamenti all'interno dell'elenco di navigazione, scriveremo: $ (ul # nav a).

Pertanto, in JQuery, gli elementi possono essere selezionati in vari modi utilizzando parametri come classe, ID, attributi, contenuto o gerarchia di elementi del documento HTML.