Metoda HTML-Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

jQuery oferuje wiele metod, które pomagają programistom skutecznie tworzyć dynamiczne środowisko internetowe. Metoda jQuery html() zastępuje cały kod HTML w wybranym elemencie. Jest to przydatne, jeśli chcesz dynamicznie zmieniać to, co widzi użytkownik po interakcji ze stroną.

W tym przewodniku dowiemy się, jak używać html() i jego składnia. Podejmiemy również krok po kroku podejście do korzystania z html(). jQuery html() jest podstawową metodą biblioteki jQuery i jest często używana. Po zapoznaniu się z podstawami możesz zacząć ćwiczyć z html().

Co to jest jQuery html()?

jQuery html() ustawia zawartość HTML każdego elementu na zestaw pasujących elementów. Należy zadbać o dostarczenie zapytania, które jest wystarczająco precyzyjne, aby zastąpić tylko żądany kod HTML.

Tylko treść jest edytowana za pomocą html(). Jeśli istnieje arkusz stylów, nowa treść będzie miała ten sam styl co poprzednia treść. Warto również wspomnieć, że html() działa tylko z dokumentem HTML - nie działa z XML.

html() jQuery składnia

Pamiętaj, że Metody jQuery są najpierw wywoływane na selektorze. Selektor może być tak duży jak

tag lub tak szczegółowy jak ). Po wybraniu żądanego elementu możemy wywołać html() i przekazać ciąg HTML jako parametr do html(). Szczegółowe wyjaśnienie selektorów CSS znajduje się w naszym przewodniku .

html () akceptuje literał ciąg jako parametr lub zmienna zawierająca ciąg. Przekazanie dosłownego ciągu „Nowa treść” zostanie wyrenderowane jako przekazanie zmiennej odnoszącej się do „Nowej treści”.

Załóżmy, że mamy to proste

Możemy zastąpić cały

tag:

Powyższy kod pokazuje nowy kod HTML jako:

Jeśli istnieje był stylem powiązanym z oryginalnym tagiem

, nie byłby już aktywny z nową treścią. Możliwe jest również przekazanie prostego ciągu znaków:

Nasz kod HTML wygląda teraz następująco:

Widać, że istnieją pewne różnice w nowej zawartości. Przekazywanie dosłownego ciągu to świetny sposób na zachowanie stylu poprzedniej treści. Pamiętaj, że łańcuch literalny to po prostu łańcuch zawierający znaki. Jeśli nowa treść ma być elementem podrzędnym, można to zrobić za pomocą ciągu HTML.

Teraz, gdy omówiliśmy już podstawową składnię, spójrzmy na przykład.

Przykład jQuery html()

Widzieliśmy, jak html() zastępuje zawartość w wybranym elemencie w naszym przykładzie „Nowa zawartość”. Można to osiągnąć, przekazując jako parametr ciąg literału lub ciąg HTML. Spójrzmy na przykład, w którym zachowujemy oryginalny styl.

Patrząc na naszą początkową stronę HTML, zobaczymy tylko słowo „Hello” stylizowane na kolor niebieski.

W tym przykładzie chcemy zastąpić słowo „Hello” nową treścią, zachowując oryginalny styl. Aby to zrobić, zaznaczamy akapit o nazwie niebieskiej klasy.

Wybraliśmy akapit należący do niebieskiej klasy i zastąpiliśmy "Hello" słowem "Hello AGAIN". Ponieważ html() zastępuje zawartość zawartą w nazwach elementów, kolor niebieski pozostanie.

< Figure class = "wp-image-block"> A83aaFCGA71IBKWgL4WyaFqn GeP4fN7kwWBtZnN4Xmhk9dfSP85teVs83FA2w8myG0SsPwzmfMP8RagLyBGr0JCb8XgEpQ88AFUpD 5iatEp Im3xzfqRKD35rOb9xjhLoN1Na

Co zrobić, jeśli chcemy zastąpić cały tekst w akapicie ? Jeśli wybierzemy element

, zastąpi on powyższy tekst trzema wystąpieniami „Hello PONOWNIE. ‚

Tutaj zaznaczamy cały akapit tagów w pliku HTML i zamieniamy zawartość każdego z "Cześć ponownie." lub wprowadzania treści przemieszcza PE w tych znaczników.

„2guefy2uVdRQb3zbHpmF0SeFtMBttoqGZfEwZJn0nS04IulS0SYHM8Q

tak jak mieliśmy nadzieję. przejść o jeden poziom w naszym selektora pozwolić nasze  JXF9suUYnrtQvrU 8sIs3 NEA0BBS2hKkyRaigcZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj Ol64YUdUPWEKZYgZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XGT XGT Ol64YUdUPWEKZYXX6D ma nasze elementu>. </p wiedząc, jak <code> html () </code>, można wywnioskować, że powyższy kod — powyżej zastąp trzy <p>znaczniki jednym przekazanym jako parametr. Przeczytaj nasz <a href= przewodnik dotyczący nauki języka HTML, aby dowiedzieć się więcej o powyższym

W jednym wierszu kodu zastąpiliśmy trzy różne elementy akapitu i użyliśmy naszego własnego oryginalnego stylu klasy .

Podsumowanie

jQuery html () jest powszechnie stosowaną metodą zastępowania zawartości stron HTML w celu stworzenia dynamicznego środowiska e html() zastępuje zawartość zawartą w elementach HTML, ważne jest, aby być ostrożnym z selektorami jQuery i klasami stylów. Zapobiegnie to wszelkim niechcianym zmianom stylu.

Poznaliśmy, czym jest jQuery, jego składnią i przykładem użycia. Poświęć czas na ćwiczenie i rozwijanie tej powszechnie stosowanej metody.