Introduzione ai metodi jQuery
Se sei sorpreso dalla parola jQuery, lascia che ti spieghi prima cosa è jQuery. jQuery è una delle librerie javascript più popolari per creare siti Web o applicazioni Web. È stato appositamente progettato per risolvere la manipolazione di html dom tree e la gestione degli eventi, nonché l'html dom tree traversal, la transizione css e l'animazione css con il supporto della gestione di ajax. È anche open source e gratuito sotto la licenza gnu. In questo argomento, impareremo i metodi jQuery.
jQuery è molto facile da imparare in quanto semplifica la programmazione javascript. JQuery è compatibile con css3, compatibilità cross-browser e ha impronte leggere molto basse. In breve, possiamo dire che jQuery ha cambiato il percorso per gli sviluppatori che scrivevano il loro lungo codice in javascript. jQuery offre un metodo diverso per manipolazione dom, trasversal m, gestione eventi o trigger eventi, manipolazione attributi, manipolazione dimensione, manipolazione css e animazioni.
Tipi di metodi jQuery
Qui impareremo i diversi tipi di metodi jQuery riportati di seguito
1) Manipolazione Dom
Qualunque cosa utilizziamo, questi metodi, alla fine, si stanno concentrando sul cambiamento degli eventi dom. In altre parole, possiamo dire che usando questi metodi stiamo manipolando dom. Alcuni dei metodi jQuery di manipolazione dom sono:
- addClass (): nel set di elementi corrispondenti, aggiunge la classe o le classi specificate a ciascun elemento.
- after (): nel set di elementi corrispondenti, inserisci i dati o il contenuto specificati dal parametro dopo ogni tag element.
- append (): in poche parole, possiamo dire che usando questo metodo inseriamo dati o contenuti nell'elemento specifico.
- attr (): questo metodo fornisce il valore dell'attributo dell'elemento particolare.
- before (): utilizzando questo metodo possiamo inserire qualsiasi dato o contenuto prima di ogni elemento specificato.
- clone (): usando questo metodo copiamo in profondità l'elemento di provenienza.
- css (): usando questo metodo cambiamo il css dell'elemento specificato.
- detach (): usando questo metodo eliminiamo semplicemente l'elemento specificato dall'albero dom.
- hasClass (): Usando questo metodo troviamo la classe specificata allegata al particolare elemento.
- empty (): questo metodo elimina tutti i nodi figlio collegati al particolare elemento dom tree.
- height (): questo metodo fornisce il valore dell'altezza dell'elemento specificato.
- offset (): questo metodo imposta la coordinata dell'elemento specificato rispetto al documento.
- position (): questo metodo ottiene la posizione corrente dell'elemento specificato rispetto al suo elemento padre.
- prop (): questo metodo fornisce il valore della proprietà dell'elemento attualmente selezionata.
- replaceAll (): questo metodo sostituisce tutto l'elemento target con l'elemento specificato.
- text (): questo metodo imposta o ottiene il valore della stringa di testo degli elementi specificati.
- Val (): questo metodo fornisce il valore corrente dei primi elementi specificati.
- width (): questo metodo fornisce il valore della larghezza calcolata degli elementi specificati.
- wrap (): questo metodo avvolge la particolare struttura html attorno a ciascun elemento negli insiemi di elementi specificati.
- wrapInner (): questo metodo avvolge la struttura html attorno al contenuto di ciascun elemento specificato.
2) Attraversamento
Questo metodo ci aiuta a navigare da un elemento dom ad altri elementi dom seguendo una gerarchia padre-figlio. Alcuni dei metodi di attraversamento sono:
- add (): questo metodo crea un nuovo oggetto jQuery e lo aggiunge agli elementi specificati.
- addBack (): questo metodo aggiunge un set jQuery precedente dell'elemento all'elemento stack corrente.
- children (): questi metodi trovano l'elemento figlio di ciascun elemento specificato.
- più vicino (): questo metodo trova l'elemento che corrisponde per primo al selettore.
- contents (): questo metodo trova sia il contenuto dell'elemento specificato che include nodi di commento e testo.
- each (): questo metodo scorre attraverso un ciclo, il che significa che questo metodo verrà applicato a tutti gli elementi specificati.
- end (): questo metodo termina l'attività di filtro più recente e riporta l'elemento corrispondente al suo stato precedente.
- eq (): questo metodo riduce l'insieme dell'elemento specificato a uno nell'indice specificato.
- filter (): questo metodo fornisce l'elemento specificato in base al filtro che forniamo.
- first (): questo metodo fornisce l'elemento specificato in base al selettore che hai fornito.
- has (): questo metodo fornisce l'insieme di elementi o selettori specificati.
- map (): questo metodo restituisce un nuovo valore di un oggetto jQuery basato su una funzione che viene passata attraverso ciascun elemento.
- next (): questo metodo fornisce immediatamente il prossimo fratello del particolare elemento selezionato.
- parent (): questo metodo consente al genitore di selezionare l'elemento specificato.
- prev (): questo metodo fornisce un precedente fratello immediato degli elementi attualmente specificati.
3) Trigger eventi
Usando questo metodo registriamo le modifiche nella manipolazione del dom che avranno effetto quando interagiamo con il browser. Alcuni degli eventi che gestiscono i metodi jQuery sono:
- bind (): questo metodo associa la gestione di un evento all'elemento specificato.
- blur (): questo metodo associa un evento sfocatura javascript all'elemento specificato.
- change (): questo evento associa l'elemento specificato all'elemento change javascript.
- click (): questo metodo associa un evento javascript click all'elemento specificato.
- delegate (): questo metodo collega uno o più di un evento all'insieme specificato dell'elemento.
- die (): questo metodo rimuove qualsiasi tipo di gestione degli eventi javascript associata all'insieme dell'elemento specificato.
- errore (): questo metodo collega un evento di gestione dell'errore al set specificato dell'elemento.
- focus (): questi metodi associano la gestione di un evento focus al set specificato dell'elemento.
- hover (): questo metodo associa la gestione di un evento hover al set specificato dell'elemento.
Bene, ho cercato di includere il numero massimo di possibili metodi jQuery usati nel nostro processo di sviluppo quotidiano. Oltre a questi, ci sono molti altri metodi jQuery che devono essere studiati. Ogni giorno c'è qualche sviluppo nei metodi jQuery. Quindi ogni volta che jQuery rilascia la sua versione, includono diversi nuovi metodi jQuery.
Articoli consigliati
Questa è una guida ai metodi jQuery. Qui abbiamo discusso i diversi tipi di metodi jQuery come Dom Manipulation, Traversing e Event Triggering Methods ecc. Puoi anche leggere il seguente articolo per saperne di più -
- Come installare Jquery?
- Che cos'è jQuery?
- Che cos'è PostgreSQL?
- Strumenti di gestione SQL
- jQuery querySelector
- Guida agli esempi della barra di avanzamento di JQuery