Che cos'è jQuery querySelector?

jQuery querySelector seleziona o trova un elemento DOM (document object model) in un documento HTML. JQuery ci consente di manipolare gli elementi HTML. Viene utilizzato per selezionare uno o più elementi HTML in base a ID, nome, tipi, attributi, classe, valori di attributo, ecc. Si basa su selettori CSS esistenti.

Introduzione a querySelector

Il metodo querySelector () restituisce solo il primo elemento che corrisponde a uno o più selettori CSS specificati nel documento. Se un ID nel documento viene utilizzato più di una volta, verrà restituito il primo elemento corrispondente.

Sintassi di querySelector

Di seguito è la sintassi di querySelector:

  • querySelector (selettori CSS)
  • Restituisce il primo elemento che corrisponde ai selettori specificati.
  • Per restituire tutti gli elementi corrispondenti, utilizziamo il metodo querySelectorAll ().
  • I selettori CSS che passiamo dovrebbero essere di tipo stringa.
  • È obbligatorio passare i selettori CSS.
  • La stringa che stiamo passando deve essere un selettore CSS valido.
  • Se la stringa passata non è valida, viene generata una SYNTAX_ERRexception.
  • Se non viene trovata alcuna corrispondenza, verrà restituito null.
  • La corrispondenza del primo elemento viene eseguita utilizzando un attraversamento del preordine del primo ordine di profondità del documento.
  • Specifica uno o più selettori CSS per abbinare l'elemento.
  • Per più selettori, separare con una virgola.
  • I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere barra rovesciata.

Esempi per il metodo querySelector ()

Di seguito sono riportati gli esempi per i metodi querySelector ():

In jQuery, puoi selezionare gli elementi in una pagina usando molte diverse proprietà dell'elemento che sono Tipo, Classe, ID, Possesso di attributo, Valori di attributo, ecc. Di seguito è riportato l'esempio di Jquery usando type.

Esempio n. 1: selezione per tipo

1. Il seguente selettore di query contiene due <a>

Spiegazione del codice sopra: In questo esempio, possiamo osservare che abbiamo usato due tag anchor e all'interno del tag anchor abbiamo passato il collegamento ipertestuale di due immagini. Utilizzando querySelector ("a"). Style.backgroundColor = "red"; abbiamo passato il tag anchor ("a") a querySelector. Nel metodo querySelector () se passiamo i selettori multipli restituirà il primo elemento che corrisponde ai selettori specificati. Sebbene contenga due tag di ancoraggio, il primo tag di ancoraggio che si trova, ha applicato il suo style.backgroundColor = "red"; solo per il primo tag di ancoraggio.

Uscita 1: prima di fare clic sul pulsante ("Click me").

Output 2: Dopo aver fatto clic sul pulsante ("Click me") il colore di sfondo del fiore cambia in "rosso".

Uscita 3: Facendo clic sui collegamenti ipertestuali, verranno aperte le rispettive immagini.

2. Questo querySelector ne contiene anche due Ma nell'esempio seguente ho modificato la sequenza dell'immagine. Ho tenuto prima il collegamento ipertestuale del deserto e poi il collegamento ipertestuale del fiore.

Spiegazione del codice sopra: anche in questo esempio possiamo osservare che abbiamo usato due tag di ancoraggio e all'interno del tag di ancoraggio abbiamo passato il collegamento ipertestuale di due immagini. Utilizzando querySelector ("a"). Style.backgroundColor = "red"; abbiamo passato il tag anchor ("a") al selettore di query. Questa volta in querySelector () scoprirà prima il collegamento ipertestuale "Desert" mentre cambiamo la sequenza. Sebbene contenga due tag di ancoraggio, il primo tag di ancoraggio che si trova, ha applicato il suo style.backgroundColor = "red"; solo per il primo tag di ancoraggio.

Uscita 1: Nell'output, possiamo osservare che la prima immagine è Desert. Pertanto, a causa del metodo querySelector (), il colore di sfondo del deserto è diventato rosso.

Uscita 2: Facendo clic sul collegamento ipertestuale, l'immagine del deserto verrà aperta.

Output 3: Facendo clic sul collegamento ipertestuale del fiore, l'immagine del fiore verrà aperta.

Esempio n. 2: selezione per classe

Nell'esempio seguente selezioniamo usando il nome della classe.

Spiegazione del codice sopra: Nell'esempio sopra, stiamo usando il nome della classe e qui il nome della classe è Selector. Lo stesso nome di classe viene passato sia per h2 (tag di intestazione) che per il tag di paragrafo. Per il metodo querySelector () stiamo passando il nome della classe che controllerà il nome della classe particolare nel programma. Ora ha trovato quei tag che hanno lo stesso nome di classe menzionato. Utilizzando l'attraversamento del preordine del primo ordine di profondità del documento viene eseguita la corrispondenza del primo elemento. Il primo elemento nell'esempio che contiene il nome della classe come Selector è h2 (tag di intestazione). Il metodo querySelector () recupera il tag h2 e da style.backgroundColor applica il colore di sfondo particolare al tag h2.

Output 1: prima di fare clic sul pulsante ("fai clic su di me") il contenuto del tag h2 non cambia il colore di sfondo in blu.

Output 2: dopo aver fatto clic sul pulsante ("fai clic su di me") il contenuto del tag h2 cambia il colore di sfondo in blu.

Esempio n. 3: selezione per ID

Nell'esempio seguente selezioniamo utilizzando id.

Spiegazione del codice sopra: Nell'esempio, stiamo selezionando usando id l'id qui è Selector. Per il metodo querySelector () stiamo passando l'id che controllerà il nome id specifico nel programma. Ora ha trovato il tag che ha lo stesso nome ID menzionato. Utilizzando l'attraversamento del preordine del primo ordine di profondità del documento, viene eseguita la corrispondenza del primo elemento. L'elemento nell'esempio che contiene il nome ID come Selector è il tag di paragrafo. Il metodo querySelector () recupera il tag di paragrafo e applica le modifiche particolari al contenuto in base al codice indicato.

Output 1: Prima di fare clic sul pulsante "fai clic su di me", il contenuto del tag di paragrafo sarà "Questo è un elemento ap con id =" selettore ".

Output 2: Dopo aver fatto clic sul pulsante "fai clic su di me", il contenuto del tag di paragrafo verrà modificato in "Modifica nel testo".

Usi di jQuery querySelector

Di seguito sono riportati i due punti che spiegano gli usi di querySelector:

  • I codici di jQuery sono più precisi, più brevi e più semplici dei codici JavaScript standard. Può eseguire una varietà di funzioni.
  • La chiamata a querySelector () restituisce il primo elemento mentre ne sta selezionando uno, quindi è più veloce e anche più breve da scrivere.

Articoli consigliati

Questa è una guida a jQuery querySelector. Qui discutiamo cos'è jQuery querySelector, l'introduzione a querySelector, la sintassi e l'esempio di Jquery usando type. Puoi anche consultare i nostri altri articoli correlati per saperne di più -

  1. Eventi jQuery
  2. Usi di JQuery
  3. Metodi jQuery
  4. Come installare Jquery?
  5. Eventi HTML
  6. Primi 5 attributi di eventi HTML con esempi
  7. Lancio contro Lancio | Le 5 differenze principali che dovresti conoscere
  8. Guida agli esempi della barra di avanzamento di JQuery

Categoria:

Sviluppo software