JavaScript je dobro znan vsestranski jezik, ki se večinoma uporablja za dodajanje interaktivnih funkcij spletnim mestom. Priložena je knjižnica z imenom jQuery, ki učinkovito opravlja te naloge. Metode jQuery so v bistvu dejanja, ki izvajajo določeno nalogo brez večje vpletenosti kode. Ena taka metoda je ' spremeni() «, ki sproži dogodek »sprememba«, da takoj opazi, da je vrednost vnosnega polja spremenjena. Večinoma se uporablja v poljih obrazca HTML ter v potrditvenih poljih, izbirnih gumbih in izbirnih poljih.
Ta zapis podrobneje opisuje delujočo in praktično implementacijo metode »change()« jQuery.
Kako deluje metoda jQuery »change()«?
jQuery ' spremeni() ' metoda sproži ' sprememba ” obdelovalnik dogodkov. Dogodek »sprememba« je posebna vrsta dogodka JavaScript, ki se zgodi, ko se spremeni vrednost navedenega (“ ”, “
Sintaksa
$ ( selektor ) .sprememba ( funkcijo )
V zgornji sintaksi:
-
- selektor: Omogoča manipulacijo z elementom HTML.
- funkcija: To je izbirni parameter, ki določa funkcijo, ki naj se izvede z metodo »change()«.
1. primer: uporaba metode »change()« za pridobitev spremenjene vrednosti vnosnega polja
V tem primeru je ' spremeni() ” se uporabi za vrnitev določene spremenjene vrednosti elementa HTML “ ”.
HTML koda
Najprej pregled naslednje kode HTML:
< h2 > sprememba jQuery ( ) Metoda h2 >< str > Spremenite vrednost vnosnega polja: str >
Vnosno polje: < vnos vrsta = 'besedilo' vrednost = 'Linux' onchange = 'opozorilo(ta.vrednost)' >
< str > Kliknite dani gumb, da sprožite 'onchange' dogodek: str >
< gumb > Klikni tukaj gumb >
V tem kodnem bloku:
-
- Določite podnaslov ravni 2 z uporabo ' ' oznaka.
- Nato določite odstavek s pomočjo ' ' oznaka.
- Nato dodajte polje za vnos prek »
»oznaka z imenom« Vnosno polje «, ki ima vrsto kot » besedilo «, vrednost pa kot » Linux «, oz. - Povezuje tudi ' onchange() ” dogodek, ki prikaže okno z opozorilom, ko se podana vhodna vrednost spremeni.
- ' ” ustvari nov odstavek z navedeno izjavo.
- Na koncu dodajte gumb z uporabo '
' oznaka.
Koda jQuery
Zdaj pa razmislite o naslednji kodi jQuery:
< glavo >< scenarij src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenarij >
< scenarij >
$ ( dokument ) .pripravljen ( funkcijo ( ) {
$ ( 'gumb' ) .kliknite ( funkcijo ( ) {
$ ( 'vnos' ) .sprememba ( ) ;
} ) ;
} ) ;
scenarij >
glavo >
V zgornjih vrsticah kode:
-
- Določite '
” v razdelku “head”, ki vključuje pot CDN jQuery z uradnega spletnega mesta “ ”. - Nato koda jQuery najprej ustreza ' dokument ', da izberete ciljni element DOM in povežete ' pripravljen() ”, ki prikliče navedeno funkcijo() takoj, ko je dokument naložen.
- Po tem je ' gumb ' je dodan izbirnik in je povezan z ' klik() ”, ki bo omogočila izvedbo funkcije ob kliku na gumb.
- V definiciji funkcije uporabite » spremeni() ' metoda na ' vnos « element, ki sproži dogodek »onchange«, ko se spremeni njegova vrednost.
- Določite '
Izhod
Izhod prikaže opozorilno polje s spremenjeno vrednostjo vnosnega polja ob sproženem dogodku »onchange«.
2. primer: uporaba metode »change()« za spreminjanje barve ozadja vnosnega polja
Ta poseben primer pojasnjuje delovanje » spremeni() ” za spremembo barve ozadja vnosnega polja ob spremembi vrednosti.
HTML koda
Sledite podani kodi HTML:
< h2 > sprememba jQuery ( ) Metoda h2 >< str > Spremenite vrednost vnosnega polja: str >
Vnosno polje: < vnos vrsta = 'besedilo' vrednost = 'Linux' > str >
Tukaj element “ ” podaja samo svoj tip in vrednost.
Koda jQuery
Zdaj pa nadaljujte s kodo jQuery:
< glavo >< scenarij src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenarij >
< scenarij >
$ ( dokument ) .pripravljen ( funkcijo ( ) {
$ ( 'vnos' ) .sprememba ( funkcijo ( ) {
$ ( to ) .css ( 'Barva ozadja' , 'rumena' ) ;
} ) ;
} ) ;
scenarij >
glavo >
V zgornjih vrsticah kode je » spremeni () ' metoda priloži ' funkcija () «, ki uporablja lastnost sloga »CSS« Barva ozadja « na izbranem elementu HTML, tj. »vnos« ob spremenjeni vhodni vrednosti.
Izhod
Izhod potrjuje, da se barva ozadja danega vnosnega polja spremeni, ko se spremeni njegova vrednost.
Zaključek
jQuery ponuja » spremeni() «, ki sproži dogodek »sprememba«, ko uporabnik spremeni vrednost vnosnega polja. Lahko ga povežete tudi z dodatnim dogodkom za podporo njegovih funkcionalnosti. Deluje samo na elementih HTML “ ”, “