„JavaScript“ yra gerai žinoma universali kalba, kuri dažniausiai naudojama interaktyvioms svetainėms pridėti. Jame yra biblioteka, pavadinta jQuery, kuri efektyviai atlieka šias užduotis. „jQuery“ metodai iš esmės yra veiksmai, kurie atlieka konkrečią užduotį be didelio kodo įsitraukimo. Vienas iš tokių metodų yra „ keisti () “ metodas, kuris suaktyvina „pakeitimo“ įvykį, kad iš karto pastebėtų, kad įvesties lauko reikšmė pasikeitė. Jis dažniausiai naudojamas HTML formos laukuose, taip pat žymimuosiuose laukeliuose, akutėse ir pasirinkimo laukeliuose.
Šiame rašte išsamiai aprašomas jQuery „pakeitimo()“ metodo veikimas ir praktinis įgyvendinimas.
Kaip veikia jQuery „change()“ metodas?
„jQuery“ keisti () “ metodas suaktyvina “ pakeisti “ įvykių vedėjas. „Change“ įvykis yra specialus „JavaScript“ įvykis, kuris įvyksta, kai pakeičiama nurodyto („ “, „
Sintaksė
$ ( parinkiklis ) .pakeisti ( funkcija )
Aukščiau pateiktoje sintaksėje:
-
- parinkiklis: Tai leidžia manipuliuoti HTML elementu.
- funkcija: Tai yra pasirenkamas parametras, nurodantis funkciją, kuri turi būti vykdoma naudojant „change()“ metodą.
1 pavyzdys: „Change()“ metodo taikymas norint gauti pakeistą įvesties lauko reikšmę
Šiame pavyzdyje „ keisti () “ metodas taikomas norint grąžinti tam tikrą HTML elemento „ “ pakeistą reikšmę.
HTML kodas
Pirma, šio HTML kodo apžvalga:
< h2 > jQuery pakeitimas ( ) Metodas h2 >< p > Pakeiskite įvesties lauko reikšmę: p >
Įvesties laukas: < įvestis tipo = 'tekstas' vertė = 'Linux' pakeitimas = 'alert(this.value)' >
< p > Spustelėkite duotą mygtuką, kad paleistumėte 'keisk' įvykis: p >
< mygtuką > Paspauskite čia mygtuką >
Šiame kodo bloke:
-
- Apibrėžkite 2 lygio paantraštę naudodami „ “ žymą.
- Tada nurodykite pastraipą naudodami „ “ žymą.
- Po to pridėkite įvesties lauką naudodami „ <įvestis> 'žyma pavadinimu ' Įvesties laukas “, kurio tipas yra „ tekstą “, o vertė kaip „ Linux “, atitinkamai.
- Tai taip pat siejasi su „ onchange () “ įvykis, kuris iššoka įspėjimo langelis, kai pasikeičia nurodyta įvesties reikšmė.
- „ “ žyma sukuria kitą pastraipą su nurodytu teiginiu.
- Galiausiai pridėkite mygtuką naudodami „
“ žymą.
jQuery kodas
Dabar apsvarstykite šį jQuery kodą:
< galva >< scenarijus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenarijus >
< scenarijus >
$ ( dokumentas ) .pasiruošęs ( funkcija ( ) {
$ ( 'mygtukas' ) .spustelėkite ( funkcija ( ) {
$ ( 'įvestis' ) .pakeisti ( ) ;
} ) ;
} ) ;
scenarijus >
galva >
Aukščiau pateiktose kodo eilutėse:
-
- Nurodykite ' “ žymą skiltyje „head“, kurioje yra jQuery CDN kelias iš oficialios svetainės “ “.
- Tada „jQuery“ kodas pirmiausia atitinka „ dokumentas “ parinkiklis, kad pasirinktumėte tikslinį DOM elementą ir susietumėte „ pasiruošęs () “ metodas, kuris iškviečia nurodytą funkciją () iškart, kai tik įkeliamas dokumentas.
- Po to „ mygtuką “ parinkiklis yra pridėtas ir susietas su “ spustelėkite () “ metodas, kuris leis atlikti funkciją spustelėjus mygtuką.
- Funkcijos apibrėžime taikykite „ keisti () ' metodas ' įvestis “ elementas, kuris suaktyvina „onchange“ įvykį, kai pasikeičia jo vertė.
Išvestis
Išvestyje rodomas įspėjimo langelis su pakeista įvesties lauko verte, kai suaktyvinamas „onchange“ įvykis.
2 pavyzdys: „Change()“ metodo taikymas norint pakeisti įvesties lauko fono spalvą
Šis konkretus pavyzdys paaiškina, kaip veikia „ keisti () “ metodas, skirtas pakeisti įvesties lauko fono spalvą pakeitus reikšmę.
HTML kodas
Sekite pateiktą HTML kodą:
< h2 > jQuery pakeitimas ( ) Metodas h2 >< p > Pakeiskite įvesties lauko reikšmę: p >
Įvesties laukas: < įvestis tipo = 'tekstas' vertė = 'Linux' > p >
Čia elementas „ “ nurodo tik jo tipą ir reikšmę.
jQuery kodas
Dabar pereikite prie jQuery kodo:
< galva >< scenarijus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenarijus >
< scenarijus >
$ ( dokumentas ) .pasiruošęs ( funkcija ( ) {
$ ( 'įvestis' ) .pakeisti ( funkcija ( ) {
$ ( tai ) .css ( 'fono spalva' , 'geltona' ) ;
} ) ;
} ) ;
scenarijus >
galva >
Aukščiau pateiktose kodo eilutėse „ pakeisti () ' metodas prideda ' funkcija() “, kuriai taikoma „CSS“ stiliaus savybė“ fono spalva “ ant pasirinkto HTML elemento, t. y. „įvesties“, kai pakeista įvesties reikšmė.
Išvestis
Išvestis patvirtina, kad keičiant jo reikšmę pasikeičia nurodyto įvesties lauko fono spalva.
Išvada
„jQuery“ siūlo „ keisti () “ metodas, kuris suaktyvina „pakeitimo“ įvykį, kai vartotojas pakeičia įvesties lauko reikšmę. Jis taip pat gali būti susietas su papildomu įvykiu, kad palaikytų jo funkcijas. Jis veikia tik su „ “, „