selettori jQuery | Spiegato
La selezione degli elementi della pagina web HTML può prendere alcune righe di codice nel JavaScript ma con JQuery, il codice diventa conciso e sembra molto leggibile. jQuery supporta le selezioni di quasi tutti i selettori Definito nel CS3, oltre a fornire anche alcuni selettori personalizzati integrati.
Aggiunta di jQuery alla nostra pagina HTML
Per essere in grado di jQuery nel nostro progetto, dobbiamo prima importare jQuery mettendo un link a un file jQuery nel tag script. Il metodo più efficace per importare jQuery è utilizzare un jQuery ospitato da Google CDN, nel file HTML utilizzare le seguenti righe nel tag script:
La funzione di fabbrica
Le funzioni di selezione jQuery sono spesso definite la funzione di fabbrica, inizia con un segno in dollari "$" seguito da parentesi rotonde o parentesi "()". Questa funzione di fabbrica viene utilizzata per fare riferimento a un elemento della pagina Web e puoi aggiungere un evento utilizzando un operatore DOT. Per esempio:
$ (documento).ready (function ()// all'interno del corpo della funzione
);
selettori jQuery
I selettori jQuery o le funzioni di fabbrica funzionano su tre selettori principali, vale a dire: ID tag, nome del tag, classe tag.
- Nome tag: questo viene utilizzato per selezionare il nome dell'elemento dalla cupola, ad esempio, se si desidera selezionare tutto il Tag H1.
- Classe di tag: questo viene utilizzato per scegliere un elemento con una determinata classe; Ad esempio, se si desidera selezionare un elemento con la classe "la mia classe" Puoi usare $ (".la mia classe')
- ID tag: questo viene utilizzato per selezionare un elemento con un ID specifico; Ad esempio, per scegliere un elemento con un ID di "myid" Puoi usare $ ('#myid')
Selezione di elementi per nome
Per mostrare l'uso dei selettori jQuery, passeremo prima la selezione di elementi usando il nome del tag. Supponiamo di voler selezionare tutto il Un tag p Un altro tag P Ancora un altro tag P Dovresti vedere il seguente output sulla pagina web: Per manipolare il I tag utilizzano il seguente codice di script: Con le linee sopra, l'output sembrerà così Abbiamo anche selettori di filtri; Supponiamo di voler solo selezionare l'ultimo $ (documento).ready (function () Questo ci darà il seguente output: Come puoi vedere, siamo stati in grado di selezionare su uno specifico etichetta Selezione di elementi per ID Per dimostrare i selettori ID, abbiamo le seguenti righe nel file HTML: Un tag p con l'ID ciao Un altro tag P Ancora un altro tag P Come puoi vedere, il primo Tag ha l'ID "Ciao", Per manipolare questo elemento usando il suo ID, possiamo utilizzare il seguente codice di script: Come puoi vedere nell'immagine sopra, siamo stati in grado di selezionare un elemento usando il suo ID e manipolare la sua proprietà di stile usando il selettore ID jQuery. Selezione di un elemento per classe Per selezionare un elemento usando la classe, utilizziamo il punto Prima del nome della classe nella funzione di fabbrica, per dimostrare l'uso del selettore della classe jQuery, diamo uno dei tag P un po 'di classe. Il nostro codice HTML sembrerà così: Un tag p con l'ID ciao Un altro tag P Ancora un altro tag p ma con qualche classe Per selezionare la classe "Myclass" e dargli uno sfondo di rosso, utilizziamo il seguente codice di script: Con il codice sopra, vedrai il seguente output: Come puoi vedere, siamo stati in grado di manipolare l'elemento con la classe "Myclass" utilizzando i selettori di classe jQuery. Conclusione La biblioteca più famosa di JavaScript JQuery è molto utile e risparmiando nel tempo quando si tratta di manipolare elementi su una pagina web, l'unico pre-req dell'utilizzo di jQuery in un progetto è quello di aggiungere un link alla libreria jQuery utilizzando un jquery ospitato da Google CDN. Il jQuery è costituito da una funzione che si chiama funzione di fabbrica che consente agli utenti di selezionare elementi della pagina web e manipolare le loro proprietà. La funzione di fabbrica '$ (")' funziona su 3 selettori di base che sono in particolare, Selettore ID, Selettore Nome e Selettore di classe.
$ ("p").CSS ("sfondo", "giallo");
);
$ ("p: ultimo").CSS ("sfondo", "giallo");
);
$ (".la mia classe").CSS ("sfondo", "rosso");
);