Tipi di selettori in JQuery - Scopri i diversi tipi di selettori JQuery

Introduzione ai selettori JQuery e ai loro t

Quando lavori con JavaScript, ti troverai spesso in una situazione in cui devi trovare e modificare alcuni contenuti della pagina. In questi casi, dovrai utilizzare il supporto selettore in JQuery. JQuery rende abbastanza facile trovare elementi della pagina in base ai loro tipi, valori, attributi, ecc. Questi elementi sono basati su selettori CSS e una volta che hai avuto un po 'di pratica, vedrai che trovare elementi nelle pagine è un gioco da ragazzi. A seconda del loro utilizzo, possiamo classificare diversi tipi di selettori JQuery in diversi tipi. Diamo un'occhiata ad alcuni dei selettori più utilizzati.

Utilizzando un selettore

Di seguito è riportata una sintassi di un selettore JQuery:

• $ (Selector) .methodname ():

Se necessario, è possibile concatenare più selettori aggiungendo un "." Tra i metodi.

• $ (selector) .method1 () method2 () method3 ()..;

Tipi di selettori in JQuery

Ecco i diversi tipi di selettore in JQuery

1) Selettori JQuery di base

Possiamo selezionare gli elementi della pagina usando il loro ID, Classe o il loro nome tag. Se necessario, è anche possibile utilizzare una combinazione di questi. Di seguito sono riportati alcuni selettori di base:

• : header Selector - Questo è un tipo di selettore di base che ci permette di trovare elementi con i loro titoli HTML. Per fare ciò, usiamo il selettore $ (“sezione h1, sezione h2, sezione h3”) dettagliato oppure possiamo anche usare il selettore $ (“sezione: intestazione”) molto più corto.
• : selettore target: questo selettore trova i target della pagina o dell'hash dell'URI del documento. Ad esempio, se l'URI nella pagina è "https://example.com/#test". Quindi, il selettore $ ("h2: target") selezionerà l'elemento

  .

• : Selettore animato: questo selettore viene utilizzato per trovare tutti gli elementi con animazione. Tieni presente che affinché l'animazione sia selezionata, deve essere in esecuzione quando il selettore è in esecuzione.

2) Selettori basati sull'indice

JQuery ha il proprio set di selettori basati su indice che utilizzano l'indicizzazione basata su zero. Di seguito sono riportati alcuni esempi:

• : eq (k) Selettore - Questo selettore restituisce l'elemento all'indice k. Supporta anche valori di indice negativi.
• : selettore lt (k) - Questo selettore restituisce tutti gli elementi che hanno un indice inferiore a k. Proprio come sopra, sono accettati anche valori negativi
• : gt (n) Selettore - Questo selettore è simile: lt (k) Selettore tranne che funziona per un valore di indice maggiore o uguale a k.

3) Selettori figlio

È possibile utilizzare JQuery per selezionare elementi secondari di qualsiasi elemento in base al tipo o all'indice.

• : first-child - Questo selettore restituirà tutti gli elementi che sono il primo figlio dei loro genitori.
• : first-of-type - Questo selettore JQuery viene utilizzato per selezionare tutti gli elementi che sono il primo fratello
• : last-child - Come suggerisce il nome, questo selettore selezionerà l'ultimo figlio del genitore.
• : last-of-type - Questo selezionerà tutti i figli che sono l'ultimo del loro tipo in un genitore. Se ci sono più di un genitore, selezionerà più elementi.
• : only-of-type - Possiamo usare il selettore only-of-type per trovare tutti gli elementi che hanno fratelli dello stesso tipo nella pagina.
• : only-child - Nelle situazioni in cui è necessario trovare e selezionare elementi che sono gli unici figli dei genitori, è possibile utilizzare questo selettore. Nel caso in cui un genitore sulla pagina abbia più di un figlio, verrà ignorato.

4) Selettori di attributo

Gli elementi possono essere selezionati in base ai loro attributi, di seguito sono riportati alcuni selettori di attributi comuni:

• $ (“(Attributo | = 'valore')”) - L '"attributo contiene un selettore di prefissi" seleziona tutti gli elementi con attributi in cui il valore è uguale o inizia con la stringa data seguita da un trattino.
• $ (“(Attributi ~ = 'valuehere')”) - Restituisce tutti gli elementi con attributi in cui il valore contiene una determinata parola delimitata da spazi.
• $ (“(Attributo * = 'valuehere')”) - Seleziona gli elementi con cui il valore contiene la sottostringa data. Finché il valore corrisponde, la posizione non avrà importanza

5) Selettori di contenuto

Come suggerisce il nome, questi selettori JQuery vengono utilizzati per trovare e selezionare il contenuto all'interno degli elementi.

• : contiene (testo) - Questo è usato per selezionare elementi che hanno un contenuto di testo specificato all'interno. Una cosa da tenere a mente quando si utilizza questo selettore è che il test qui è case sensitive.
• : has (selettore) - Restituirà con elementi che contengono almeno un elemento corrispondente al selettore specificato. Ad esempio, $ ("section: has (h1)") verrà restituito con tutte le sezioni che hanno un elemento h1.
• : vuoto - Questo selettore restituirà gli elementi della pagina che non hanno figli, inclusi i nodi di testo.
• : parent - Questo selettore viene utilizzato per selezionare tutti gli elementi della pagina Web che hanno almeno un nodo figlio. Puoi considerarlo come un contrario di: empty JQuery Selector.

6) Selettori di gerarchia

• $ ("Discendente dell'antenato") - Viene usato per selezionare tutti gli elementi discendenti di un genitore. Il discendente nel nostro caso potrebbe essere un bambino, un nipote e così via.
• $ ("Genitore> figlio"): viene utilizzato nei casi in cui è necessario selezionare solo il figlio diretto di un genitore specifico.
• $ ("Precedente + successivo") - Nel caso in cui sia necessario selezionare tutti gli elementi che corrispondono al selettore "successivo" e che hanno il padre "precedente". Gli elementi selezionati saranno inoltre immediatamente seguiti da "precedente" che è il fratello.

7) Selettori di visibilità

Due selettori: visibile e: nascosto sono disponibili anche in JQuery. Questi possono essere usati per trovare rispettivamente elementi visibili o nascosti nella pagina web. Qualsiasi elemento nella pagina Web è considerato nascosto se:

• Il suo display è impostato correttamente su nessuno.
• La sua larghezza e altezza sono definite zero.
• Ha type = nascosto menzionato nell'elemento form.
• Tutti gli antenati dell'elemento sono già nascosti.

Tieni presente che anche se un elemento ha un'opacità impostata su Zero, sarà comunque considerato visibile perché occuperà ancora spazio.

8) Selettori di moduli

Per risparmiare tempo e fatica, JQuery ha versioni più ordinate dei selettori per gli elementi di input dei moduli Web.

Ad esempio, mentre $ ("pulsante, input (tipo =" pulsante ")") funzionerà per selezionare il pulsante nella pagina, possiamo usare $ (": pulsante") per farlo rapidamente.

Allo stesso modo, possiamo usare $ (“: radio”) per selezionare il pulsante di opzione.

Conclusione - Tipi di selettori in JQuery

I selettori sono una delle caratteristiche importanti di JQuery, la selezione su JavaScript non è così intuitiva e robusta con l'aggiunta di selettori tramite JQuery, la programmazione per il web è diventata più semplice.

Articoli consigliati

Questa è una guida ai tipi di selettore in JQuery. Qui discutiamo i diversi tipi di selettori JQuery con la sintassi. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più-

1. Metodi jQuery
2. Alternative jQuery
3. Usi di JQuery
4. Cosa può fare Javascript?
5. jQuery querySelector
6. Guida agli esempi della barra di avanzamento di JQuery