JavaScript je uznávaný všestranný jazyk, který se většinou používá k přidávání interaktivních funkcí na webové stránky. Dodává se s knihovnou s názvem jQuery, která tyto úkoly plní efektivně. Metody jQuery jsou v podstatě akce, které provádějí konkrétní úkol bez velkého zapojení kódu. Jednou z takových metod je „ změna() “, která spustí událost „change“, aby si okamžitě všimla, že se změnila hodnota vstupního pole. Většinou se používá v polích formuláře HTML, stejně jako zaškrtávací políčka, přepínače a výběrová políčka.
Tento článek rozvádí pracovní a praktickou implementaci metody „change()“ jQuery.
Jak funguje metoda jQuery „change()“?
jQuery' změna() “ metoda spustí “ změna ” obsluha události. Událost „change“ je speciálním druhem události JavaScriptu, která nastane, když se změní hodnota zadaného prvku HTML („ “, „
Syntax
$ ( volič ) .změna ( funkce )
Ve výše uvedené syntaxi:
-
- volič: Umožňuje manipulaci s elementem HTML.
- funkce: Je to volitelný parametr, který určuje funkci, která se má provést pomocí metody „change()“.
Příklad 1: Použití metody „change()“ pro získání změněné hodnoty vstupního pole
V tomto příkladu „ změna() ” metoda se použije k vrácení konkrétní změněné hodnoty prvku HTML „ “.
HTML kód
Nejprve přehled následujícího HTML kódu:
< h2 > změna jQuery ( ) Metoda h2 >< p > Změňte hodnotu vstupního pole: p >
Vstupní pole: < vstup typ = 'text' hodnota = 'linux' při změně = 'upozornění (tato.hodnota)' >
< p > Kliknutím na dané tlačítko vystřelíte 'změna' událost: p >
< knoflík > Klikněte zde knoflík >
V tomto bloku kódu:
-
- Definujte podnadpis úrovně 2 pomocí „ ” tag.
- Dále určete odstavec pomocí „ ” tag.
- Poté přidejte vstupní pole pomocí „
” tag s názvem “ Vstupní pole “, s typem jako „ text “ a hodnotu jako „ Linux “, resp. - Sdružuje také „ onchange() ” událost, která zobrazí varovné pole, když se zadaná vstupní hodnota změní.
- ' Značka ” vytvoří další odstavec s uvedeným příkazem.
- Nakonec přidejte tlačítko pomocí „
” tag.
kód jQuery
Nyní zvažte následující kód jQuery:
< hlava >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >
< skript >
$ ( dokument ) .připravený ( funkce ( ) {
$ ( 'knoflík' ) .klikněte ( funkce ( ) {
$ ( 'vstup' ) .změna ( ) ;
} ) ;
} ) ;
skript >
hlava >
Ve výše uvedených řádcích kódu:
-
- Upřesněte „ ” tag v sekci “head”, která obsahuje cestu CDN jQuery z oficiálního webu “ “.
- Dále kód jQuery nejprve odpovídá „ dokument ” pro výběr cíleného prvku DOM a přiřazení “ připraven() ” metoda, která vyvolá uvedenou funkci() ihned po načtení dokumentu.
- Poté se „ knoflík “ je přidán volič a je propojen s “ klikni() ” metoda, která umožní provedení funkce po kliknutí na tlačítko.
- V definici funkce použijte „ změna() “ metoda na “ vstup ” prvek, který spustí událost „onchange“, když se změní jeho hodnota.
Výstup
Výstup zobrazí výstražné pole se změněnou hodnotou vstupního pole při spuštěné události „onchange“.
Příklad 2: Použití metody „change()“ ke změně barvy pozadí vstupního pole
Tento konkrétní příklad vysvětluje fungování „ změna() ” pro změnu barvy pozadí vstupního pole při změně hodnoty.
HTML kód
Postupujte podle zadaného HTML kódu:
< h2 > změna jQuery ( ) Metoda h2 >< p > Změňte hodnotu vstupního pole: p >
Vstupní pole: < vstup typ = 'text' hodnota = 'linux' > p >
Zde prvek „ “ určuje pouze svůj typ a hodnotu.
kód jQuery
Nyní přejděte ke kódu jQuery:
< hlava >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >
< skript >
$ ( dokument ) .připravený ( funkce ( ) {
$ ( 'vstup' ) .změna ( funkce ( ) {
$ ( tento ) .css ( 'barva pozadí' , 'žlutá' ) ;
} ) ;
} ) ;
skript >
hlava >
Ve výše uvedených řádcích kódu je „ změna () “ metoda připojuje “ funkce() “, který použije vlastnost stylu „CSS“ barva pozadí ” na vybraném prvku HTML, tj. „vstup“ po změněné vstupní hodnotě.
Výstup
Výstup potvrdí, že se při změně jeho hodnoty změní barva pozadí daného vstupního pole.
Závěr
jQuery nabízí „ změna() ” metoda, která spustí událost “change”, když uživatel změní hodnotu vstupního pole. Může být také spojen s další událostí pro podporu jeho funkcí. Funguje pouze na HTML prvcích „ “, „