JavaScript è un linguaggio versatile ben noto che viene utilizzato principalmente per aggiungere funzionalità interattive ai siti Web. Viene fornito con una libreria denominata jQuery che esegue queste attività in modo efficiente. I metodi jQuery sono fondamentalmente le azioni che eseguono un'attività specifica senza molto coinvolgimento del codice. Uno di questi metodi è il ' modifica() ” che attiva l'evento “change” per notare immediatamente che il valore del campo di input è cambiato. Viene utilizzato principalmente nei campi del modulo HTML, nonché nelle caselle di controllo, nei pulsanti di opzione e nelle caselle di selezione.
Questo articolo approfondisce l'implementazione operativa e pratica del metodo 'change ()' di jQuery.
Come funziona il metodo jQuery 'change ()'?
Il jQuery ' modifica() ” metodo attiva il “ modifica ' gestore di eventi. L'evento 'change' è un tipo speciale di evento JavaScript che si verifica quando il valore dell'elemento HTML specificato (' ', '
Sintassi
$ ( selettore ) .modifica ( funzione )
Nella sintassi precedente:
-
- selettore: Permette la manipolazione dell'elemento HTML.
- funzione: È un parametro opzionale che specifica la funzione da eseguire con il metodo “change()”.
Esempio 1: applicazione del metodo 'change()' per ottenere il valore modificato del campo di input
In questo esempio, il ' modifica() ” viene applicato per restituire un particolare valore modificato dell'elemento HTML “ ”.
Codice HTML
Innanzitutto, una panoramica del seguente codice HTML:
< h2 > modifica jQuery ( ) Metodo h2 >< P > Modificare il valore del campo di input: P >
Campo di inserimento: < ingresso tipo = 'testo' valore = 'Linux' onchange = 'avviso(questo.valore)' >
< P > Fare clic sul pulsante indicato per sparare il 'in cambio' evento: P >
< pulsante > Clicca qui pulsante >
In questo blocco di codice:
-
- Definire un sottotitolo di livello 2 utilizzando il ' etichetta '.
- Successivamente, specificare il paragrafo con l'aiuto del ' etichetta '.
- Successivamente, aggiungi un campo di input tramite il ' ” etichetta denominata “ Campo di inserimento ”, con il tipo come “ testo ” e il valore come “ Linux ”, rispettivamente.
- Associa anche un “ al cambio() ” evento che visualizza una finestra di avviso quando il valore di input specificato cambia.
- IL ' Il tag ” crea un altro paragrafo con l'istruzione dichiarata.
- Infine, aggiungi un pulsante usando il '
etichetta '.
Codice jQuery
Ora, considera il seguente codice jQuery:
< Testa >< copione src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > copione >
< copione >
$ ( documento ) .pronto ( funzione ( ) {
$ ( 'pulsante' ) .clic ( funzione ( ) {
$ ( 'ingresso' ) .modifica ( ) ;
} ) ;
} ) ;
copione >
Testa >
Nelle righe di codice sopra:
-
- Specificare la '
” tag nella sezione “head” che include il percorso CDN di jQuery dal sito ufficiale “ ”. - Successivamente, il codice jQuery corrisponde prima al ' documento ” per selezionare l'elemento DOM target e associare il “ pronto() ” metodo che richiama la funzione dichiarata() non appena il documento viene caricato.
- Dopodiché il “ pulsante ” viene aggiunto il selettore ed è collegato con il “ clic() ” metodo che consentirà l'esecuzione di una funzione al clic del pulsante.
- Nella definizione della funzione, applica il ' modifica() ” metodo sul “ ingresso ” elemento che attiva l'evento “onchange” quando il suo valore cambia.
- Specificare la '
Produzione
L'output visualizza una casella di avviso con il valore modificato del campo di input all'evento 'onchange' attivato.
Esempio 2: applicazione del metodo 'change()' per modificare il colore di sfondo di un campo di input
Questo particolare esempio spiega il funzionamento del ' modifica() ” metodo per cambiare il colore di sfondo del campo di input quando si cambia il valore.
Codice HTML
Segui il codice HTML fornito:
< h2 > modifica jQuery ( ) Metodo h2 >< P > Modificare il valore del campo di input: P >
Campo di inserimento: < ingresso tipo = 'testo' valore = 'Linux' > P >
Qui, l'elemento ' ' specifica solo il tipo e il valore.
Codice jQuery
Ora, passa al codice jQuery:
< Testa >< copione src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > copione >
< copione >
$ ( documento ) .pronto ( funzione ( ) {
$ ( 'ingresso' ) .modifica ( funzione ( ) {
$ ( Questo ) .css ( 'colore di sfondo' , 'giallo' ) ;
} ) ;
} ) ;
copione >
Testa >
Nelle righe di codice sopra, il ' modifica () ” metodo allega un “ funzione() ” che applica la proprietà di stile “CSS” “ colore di sfondo ” sull'elemento HTML selezionato, ovvero “input” sul valore di input modificato.
Produzione
L'output conferma che il colore di sfondo del campo di input specificato cambia quando il suo valore viene modificato.
Conclusione
jQuery offre il ' modifica() ” che attiva l'evento “change” quando l'utente modifica il valore del campo di input. Può anche essere associato ad un evento aggiuntivo per supportarne le funzionalità Funziona solo sugli elementi HTML “ ”, “