A JavaScript egy jól ismert, sokoldalú nyelv, amelyet többnyire interaktív funkciók hozzáadására használnak webhelyekhez. Tartalmaz egy jQuery nevű könyvtárat, amely hatékonyan hajtja végre ezeket a feladatokat. A jQuery metódusok alapvetően olyan műveletek, amelyek egy adott feladatot hajtanak végre a kód különösebb bevonása nélkül. Az egyik ilyen módszer a „ változás() ” metódus, amely elindítja a „change” eseményt, hogy azonnal észrevegye, hogy a beviteli mező értéke megváltozott. Leginkább a HTML űrlapmezőkben, valamint a jelölőnégyzetekben, választógombokban és jelölőnégyzetekben használatos.
Ez az írás a jQuery „change()” metódusának működését és gyakorlati megvalósítását részletezi.
Hogyan működik a jQuery „change()” módszer?
A jQuery' változás() ' módszer kigyújtja a ' változás ' eseménykezelő. A „change” esemény egy speciális JavaScript-esemény, amely akkor következik be, amikor a megadott („ ”, „
Szintaxis
$ ( választó ) .változás ( funkció )
A fenti szintaxisban:
-
- választó: Lehetővé teszi a HTML elem manipulálását.
- funkció: Ez egy opcionális paraméter, amely a „change()” metódussal végrehajtandó függvényt határozza meg.
1. példa: A „change()” módszer alkalmazása a beviteli mező értékének módosításához
Ebben a példában a „ változás() ” metódust alkalmazzák egy adott HTML „ ” elem megváltozott értékének visszaadására.
HTML kód
Először a következő HTML-kód áttekintése:
< h2 > jQuery változás ( ) Módszer h2 >< p > Módosítsa a beviteli mező értékét: p >
Beviteli mező: < bemenet típus = 'szöveg' érték = 'Linux' váltáskor = 'alert(this.value)' >
< p > Kattints az adott gombra, hogy kilőd a 'csere' esemény: p >
< gomb > Kattints ide gomb >
Ebben a kódblokkban:
-
- Határozzon meg egy 2. szintű alcímet a „ ” címke.
- Ezután adja meg a bekezdést a „ ” címke.
- Ezután adjon hozzá egy beviteli mezőt a „
' címke neve ' Beviteli mező ', amelynek típusa ' szöveg ”, az értéke pedig „ Linux ”, ill. - Ez is egy ' onchange() ” esemény, amely egy figyelmeztető mezőt jelenít meg, amikor a megadott bemeneti érték megváltozik.
- A ' ” címke egy másik bekezdést hoz létre a megadott utasítással.
- Végül adjon hozzá egy gombot a „
” címke.
jQuery kód
Most fontolja meg a következő jQuery kódot:
< fej >< forgatókönyv src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > forgatókönyv >
< forgatókönyv >
$ ( dokumentum ) .kész ( funkció ( ) {
$ ( 'gomb' ) .kattintson ( funkció ( ) {
$ ( 'bemenet' ) .változás ( ) ;
} ) ;
} ) ;
forgatókönyv >
fej >
A fenti kódsorokban:
-
- Adja meg a „ ' címke a 'head' részben, amely tartalmazza a jQuery CDN-útvonalát a hivatalos webhelyről ' ”.
- Ezután a jQuery kód először megfelel a „ dokumentum ” választógombot a megcélzott DOM elem kiválasztásához és a „ kész() ” metódus, amely a dokumentum betöltésekor azonnal meghívja a megadott függvényt().
- Ezt követően a „ gomb ” választó hozzáadásra került, és a „ kattints() ” módszer, amely lehetővé teszi egy funkció végrehajtását a gomb kattintására.
- A függvénydefinícióban alkalmazza a „ változás() ' módszer a ' bemenet ” elem, amely az „onchange” eseményt aktiválja, amikor annak értéke megváltozik.
Kimenet
A kimenet egy figyelmeztető mezőt jelenít meg a beviteli mező megváltozott értékével a kiváltott „onchange” eseményre.
2. példa: A „change()” módszer alkalmazása egy beviteli mező háttérszínének megváltoztatására
Ez a konkrét példa elmagyarázza a „ változás() ” metódussal módosíthatja a beviteli mező háttérszínét az érték megváltoztatásakor.
HTML kód
Kövesse a megadott HTML kódot:
< h2 > jQuery változás ( ) Módszer h2 >< p > Módosítsa a beviteli mező értékét: p >
Beviteli mező: < bemenet típus = 'szöveg' érték = 'Linux' > p >
Itt az „ ” elem csak a típusát és az értéket adja meg.
jQuery kód
Most lépjen tovább a jQuery kódra:
< fej >< forgatókönyv src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > forgatókönyv >
< forgatókönyv >
$ ( dokumentum ) .kész ( funkció ( ) {
$ ( 'bemenet' ) .változás ( funkció ( ) {
$ ( ez ) .css ( 'háttérszín' , 'sárga' ) ;
} ) ;
} ) ;
forgatókönyv >
fej >
A fenti kódsorokban a „ változás () ' metódus egy ' funkció() ', amely a 'CSS' stílustulajdonságot alkalmazza ' háttérszín ” a kiválasztott HTML elemen, azaz „input” a megváltozott bemeneti értékre.
Kimenet
A kimenet megerősíti, hogy az adott beviteli mező háttérszíne megváltozik az érték megváltoztatásakor.
Következtetés
A jQuery a „ változás() ” metódus, amely elindítja a „change” eseményt, amikor a felhasználó megváltoztatja a beviteli mező értékét. Egy további eseménnyel is társítható, hogy támogassa funkcióit. Csak az „ ”, „