JavaScript je dobre známy všestranný jazyk, ktorý sa väčšinou používa na pridávanie interaktívnych funkcií na webové stránky. Dodáva sa s knižnicou s názvom jQuery, ktorá tieto úlohy vykonáva efektívne. Metódy jQuery sú v podstate akcie, ktoré vykonávajú špecifickú úlohu bez veľkého zapojenia kódu. Jednou z takýchto metód je „ zmeniť () “, ktorá spustí udalosť „change“, aby si okamžite všimla, že sa zmenila hodnota vstupného poľa. Väčšinou sa používa v poliach formulára HTML, ako aj v začiarkavacích políčkach, prepínačoch a výberových poliach.
Tento článok rozpracúva funkčnú a praktickú implementáciu metódy „change()“ jQuery.
Ako funguje metóda jQuery „change()“?
jQuery' zmeniť () “metóda spúšťa “ zmeniť 'obslužný program udalostí.' Udalosť „change“ je špeciálny druh udalosti JavaScriptu, ktorá nastane, keď sa zmení hodnota zadaného prvku HTML („ “, „
Syntax
$ ( selektor ) .zmeniť ( funkciu )
Vo vyššie uvedenej syntaxi:
-
- selektor: Umožňuje manipuláciu s elementom HTML.
- funkcia: Je to voliteľný parameter, ktorý určuje funkciu, ktorá sa má vykonať pomocou metódy „change()“.
Príklad 1: Použitie metódy „change()“ na získanie zmenenej hodnoty vstupného poľa
V tomto príklade „ zmeniť () ” metóda sa použije na vrátenie konkrétnej zmenenej hodnoty prvku HTML „ “.
HTML kód
Najprv prehľad nasledujúceho kódu HTML:
< h2 > zmena jQuery ( ) Metóda h2 >< p > Zmeňte hodnotu vstupného poľa: p >
Vstupné pole: < vstup typu = 'text' hodnotu = 'linux' pri zmene = 'upozornenie (táto.hodnota)' >
< p > Kliknutím na dané tlačidlo spustíte 'zmena' udalosť: p >
< tlačidlo > Kliknite tu tlačidlo >
V tomto bloku kódu:
-
- Definujte podnadpis úrovne 2 pomocou „ ” tag.
- Ďalej špecifikujte odsek pomocou „ ” tag.
- Potom pridajte vstupné pole cez „
” tag s názvom “ Vstupné pole “, s typom ako „ text “ a hodnotu ako „ Linux “, resp. - Spája tiež „ onchange() ” udalosť, ktorá zobrazí výstražné pole pri zmene zadanej vstupnej hodnoty.
- ' Značka ” vytvorí ďalší odsek s uvedeným vyhlásením.
- Nakoniec pridajte tlačidlo pomocou „
” tag.
kód jQuery
Teraz zvážte nasledujúci kód jQuery:
< hlavu >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >
< skript >
$ ( dokument ) .pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) .kliknite ( funkciu ( ) {
$ ( 'vstup' ) .zmeniť ( ) ;
} ) ;
} ) ;
skript >
hlavu >
Vo vyššie uvedených riadkoch kódu:
-
- Uveďte „ “ v sekcii “head”, ktorá obsahuje cestu CDN jQuery z oficiálnej webovej stránky “ “.
- Ďalej kód jQuery najprv zodpovedá „ dokument ” na výber zacieleného prvku DOM a priradenie „ pripravený() ” metóda, ktorá vyvolá uvedenú funkciu() hneď po načítaní dokumentu.
- Potom sa „ tlačidlo “ je pridaný a je prepojený s “ klikni() ” metóda, ktorá umožní vykonanie funkcie po kliknutí na tlačidlo.
- V definícii funkcie použite „ zmeniť () “ metóda na “ vstup ” prvok, ktorý spustí udalosť „onchange“, keď sa zmení jeho hodnota.
Výkon
Výstup zobrazí výstražné pole so zmenenou hodnotou vstupného poľa pri spustenej udalosti „onchange“.
Príklad 2: Použitie metódy „change()“ na zmenu farby pozadia vstupného poľa
Tento konkrétny príklad vysvetľuje fungovanie „ zmeniť () ” na zmenu farby pozadia vstupného poľa pri zmene hodnoty.
HTML kód
Postupujte podľa zadaného HTML kódu:
< h2 > zmena jQuery ( ) Metóda h2 >< p > Zmeňte hodnotu vstupného poľa: p >
Vstupné pole: < vstup typu = 'text' hodnotu = 'linux' > p >
Tu prvok „ “ špecifikuje iba svoj typ a hodnotu.
kód jQuery
Teraz prejdite na kód jQuery:
< hlavu >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >
< skript >
$ ( dokument ) .pripravený ( funkciu ( ) {
$ ( 'vstup' ) .zmeniť ( funkciu ( ) {
$ ( toto ) .css ( 'farba pozadia' , 'žltá' ) ;
} ) ;
} ) ;
skript >
hlavu >
Vo vyššie uvedených riadkoch kódu je „ zmeniť () ” metóda pripája “ funkcia() “, ktorá aplikuje vlastnosť štýlu „CSS“ „ farba pozadia ” na vybratom prvku HTML, t. j. „vstup“ pri zmenenej vstupnej hodnote.
Výkon
Výstup potvrdí, že farba pozadia daného vstupného poľa sa zmení pri zmene jeho hodnoty.
Záver
jQuery ponúka „ zmeniť () “, ktorá spustí udalosť „zmena“, keď používateľ zmení hodnotu vstupného poľa. Môže byť tiež spojená s ďalšou udalosťou na podporu jej funkcií. Funguje iba na HTML elementoch „ “, „