Sintassi jQuery | Spiegato

In Sintassi jQuery, Tutte le dichiarazioni si basano su un modello di base che applica metodi e funzioni diversi agli elementi HTML e ai loro attributi correlati. È inoltre possibile personalizzare la sintassi jQuery in base al selettore e all'azione aggiunti, che può essere un metodo o una funzione.

Questo articolo spiegherà in dettaglio la sintassi jQuery con l'aiuto di esempi adatti. Quindi iniziamo!

Sintassi jQuery | Spiegato

In jQuery, la prima cosa che devi fare è selezionare gli elementi HTML su cui si desidera eseguire qualsiasi azione. La sintassi di base di jQuery è la seguente:

$ (selettore).azione();

Nella sintassi di jQuery sopra donata, devi aggiungere un "$"Firma per l'accesso o la definizione di jQuery; poi un "selettore"Viene aggiunto all'interno delle parentesi, che rappresenta la query per trovare gli elementi HTML. Da ultimo, "azione()"È l'operazione che verrà eseguita sugli elementi HTML selezionati.

Ora controlliamo i tipi di selettori che puoi aggiungere nella sintassi jQuery.

Tipi di selettori nella sintassi jQuery

I selettori jQuery sono considerati una parte essenziale della libreria jQuery. Per utilizzare qualsiasi metodo jQuery, è necessario creare un oggetto jQuery selezionando un elemento HTML specifico.

Vari tipi di selettori esistono in jQuery, come Selettore dei nomi dell'elemento, Element #Id Selector, E Elemento .Selettore di classe. Ad esempio, per selezionare tutto il paragrafo "P"Elementi, useremo il selettore dei nomi dell'elemento nel modo seguente:

$ ("p").nascondere()

È inoltre possibile assegnare un ID a un elemento HTML e quindi eseguire la stessa operazione utilizzando l'elemento #ID Selector:

$ ("##btnclick").nascondere()

Con l'aiuto dell'elemento .Selettore di classe, è possibile selezionare contemporaneamente diversi elementi HTML che appartiene alla stessa classe:

$ (".nome della classe").nascondere()

Nota: Per selezionare elementi HTML usando ID, Aggiungi carattere hash "#,"Seguito dall'ID elemento e per trovare elementi utilizzando il nome della loro classe, aggiungi un"."Carattere d'epoca seguito dal nome della classe.

Evento pronto per documenti nella sintassi jQuery

Prima di lavorare con un "documento"In jQuery assicurarsi che sia completamente caricato ed è tutto pronto per l'uso. IL "pronto()Evento "del"documento"L'elemento può essere utilizzato per questo scopo:

$ (documento).ready (function ()
// Scrivi i metodi jQuery nel corpo
);

Il metodo di cui sopra impedirà l'esecuzione di jQuery quando il "documento"L'elemento non è pronto. Tuttavia, se si sta cercando di nascondere un elemento HTML che non è ancora stato creato, l'azione specificata fallirà in questo caso. Quindi, assicurati che il "documento"È pronto prima di eseguire il codice jQuery.

Ecco un metodo più breve per scrivere l'evento pronto per il documento:

$ (function ()
// Scrivi i metodi jQuery nel corpo
);

Esempio: usando la sintassi jQuery per nascondere un elemento HTML
Questo esempio ti dimostrerà l'uso della sintassi jQuery per nascondere un elemento HTML con l'aiuto del selettore dei nomi dell'elemento. In primo luogo, nel nostro "indice.html"File aggiungeremo un'intestazione con il"H2"Tag, un paragrafo che utilizza il"

Tag e un "Cliccami!"Pulsante:

Trova elementi HTML in jQuery

Questo è il paragrafo principale con un testo di esempio

Cliccami!

È possibile utilizzare qualsiasi sandbox di codifica online o il tuo editor di codice preferito per l'esecuzione del programma; Tuttavia, useremo il codice Visual Studio:

Quindi, spostati verso il tuo file JavaScript, che è "il mio progetto.js"Nel nostro caso e scrivi il seguente codice in esso:

$ (documento).ready (function ()
$ ("pulsante").Click (function ()
$ ("H2").nascondere();
);
);

Il codice fornito ha specificato che jQuery "$ (documento).pronto()"Il metodo nasconderà l'elemento HTML con il"H2"Nome elemento quando l'utente fa clic sul pulsante:

Dopo aver salvato entrambi i file, apriremo "indice.html"Usando il codice VS"Server epatico"Estensione:

Ora, faremo clic sul pulsante evidenziato nell'immagine di seguito:

Come puoi vedere, abbiamo nascosto con successo il "H2"Elemento HTML seguendo la sintassi jQuery:

Si trattava della sintassi di base di jQuery. Puoi esplorarlo ulteriormente in base alle tue preferenze.

Conclusione

Il $ (selettore).Action () è la sintassi di base jQuery che può essere utilizzata per la selezione di elementi HTML e l'applicazione di azioni specifiche ad essi. Una volta che hai scritto il codice richiesto seguendo la sintassi di jQuery, è possibile utilizzare $ (documento).Ready (function () ) metodo per l'esecuzione del programma. Questo articolo ha discusso della sintassi jQuery, tipi di selettori jQuery e funzionalità di $ (documento).Metodo ready (function () ) in dettaglio.