JavaScript jest dobrze znanym, wszechstronnym językiem, który jest najczęściej używany do dodawania interaktywnych funkcji do stron internetowych. Zawiera bibliotekę o nazwie jQuery, która wydajnie wykonuje te zadania. Metody jQuery to w zasadzie akcje, które wykonują określone zadanie bez większego zaangażowania kodu. Jedną z takich metod jest „ zmiana() ”, która uruchamia zdarzenie „change”, aby natychmiast zauważyć, że wartość pola wejściowego została zmieniona. Jest używany głównie w polach formularzy HTML, a także w polach wyboru, przyciskach opcji i polach wyboru.
Ten artykuł omawia działanie i praktyczną implementację metody „change()” jQuery.
Jak działa metoda „change()” jQuery?
jQuery” zmiana() ” metoda uruchamia „ zmiana obsługi zdarzeń. Zdarzenie „change” jest specjalnym rodzajem zdarzenia JavaScript, które występuje, gdy wartość określonego („ ”, „
Składnia
$ ( selektor ) .zmiana ( funkcjonować )
W powyższej składni:
-
- selektor: Pozwala na manipulację elementem HTML.
- funkcjonować: Jest to opcjonalny parametr określający funkcję do wykonania za pomocą metody „change()”.
Przykład 1: Zastosowanie metody „change()” w celu uzyskania zmienionej wartości pola wejściowego
W tym przykładzie „ zmiana() ” jest stosowana w celu zwrócenia określonego elementu HTML „ ” zmienionej wartości.
Kod HTML
Najpierw omówienie następującego kodu HTML:
< h2 > zmiana jQuery ( ) metoda h2 >< P > Zmień wartość pola wejściowego: P >
Pole wejściowe: < wejście typ = 'tekst' wartość = „Linux” na zmianę = 'alert(ta.wartość)' >
< P > Kliknij dany przycisk, aby odpalić „na zmianę” wydarzenie: P >
< przycisk > Kliknij tutaj przycisk >
W tym bloku kodu:
-
- Zdefiniuj podtytuł poziomu 2 za pomocą „ ”znacznik.
- Następnie określ akapit za pomocą „ ”znacznik.
- Następnie dodaj pole wejściowe za pomocą „
etykieta o nazwie „ Pole wejściowe ”, mający typ jako „ tekst ”, a wartość jako „ Linuks ”, odpowiednio. - Wiąże się to również z „ zmiana() ”, które wyświetla okno alertu, gdy określona wartość wejściowa ulegnie zmianie.
- „ Znacznik ” tworzy kolejny akapit z podanym stwierdzeniem.
- Na koniec dodaj przycisk za pomocą „
”znacznik.
Kod jQuery
Rozważmy teraz następujący kod jQuery:
< głowa >< scenariusz źródło = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenariusz >
< scenariusz >
$ ( dokument ) .gotowy ( funkcjonować ( ) {
$ ( 'przycisk' ) .Kliknij ( funkcjonować ( ) {
$ ( 'wejście' ) .zmiana ( ) ;
} ) ;
} ) ;
scenariusz >
głowa >
W powyższych liniach kodu:
-
- Określić '
” w sekcji „head”, która zawiera ścieżkę CDN jQuery z oficjalnej strony internetowej „ ”. - Następnie kod jQuery najpierw odpowiada „ dokument ”, aby wybrać docelowy element DOM i powiązać „ gotowy() ”, która wywołuje określoną funkcję() zaraz po załadowaniu dokumentu.
- Następnie „ przycisk ” został dodany i powiązany z selektorem „ Kliknij() ”, która pozwoli na wykonanie funkcji po kliknięciu przycisku.
- W definicji funkcji zastosuj „ zmiana() ” metoda na „ wejście ”, który uruchamia zdarzenie „onchange”, gdy zmienia się jego wartość.
- Określić '
Wyjście
Wyjście wyświetla okno alertu ze zmienioną wartością pola wejściowego po wyzwoleniu zdarzenia „onchange”.
Przykład 2: Zastosowanie metody „change()” do zmiany koloru tła pola wejściowego
Ten konkretny przykład wyjaśnia działanie „ zmiana() ”, aby zmienić kolor tła pola wprowadzania po zmianie wartości.
Kod HTML
Postępuj zgodnie z podanym kodem HTML:
< h2 > zmiana jQuery ( ) metoda h2 >< P > Zmień wartość pola wejściowego: P >
Pole wejściowe: < wejście typ = 'tekst' wartość = „Linux” > P >
Tutaj element „ ” określa tylko jego typ i wartość.
Kod jQuery
Teraz przejdź do kodu jQuery:
< głowa >< scenariusz źródło = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenariusz >
< scenariusz >
$ ( dokument ) .gotowy ( funkcjonować ( ) {
$ ( 'wejście' ) .zmiana ( funkcjonować ( ) {
$ ( Ten ) .css ( 'kolor tła' , 'żółty' ) ;
} ) ;
} ) ;
scenariusz >
głowa >
W powyższych liniach kodu „ zmiana () ” metoda dołącza „ funkcjonować() ”, który stosuje właściwość stylu „CSS” „ kolor tła ” na wybranym elemencie HTML, tj. „input” po zmienionej wartości wejściowej.
Wyjście
Wyjście potwierdza, że kolor tła danego pola wejściowego zmienia się wraz ze zmianą jego wartości.
Wniosek
jQuery oferuje „ zmiana() ”, która uruchamia zdarzenie „zmiana”, gdy użytkownik zmieni wartość pola wejściowego. Może być również powiązany z dodatkowym zdarzeniem wspierającym jego funkcjonalność. Działa tylko na elementach HTML „ ”, „