Dowiedz się, jak stworzyć element w jQuery

Tworzenie nowego elementu to jedno z najbardziej podstawowych zadań, jakie możesz wykonać za pomocą biblioteki JavaScript jQuery. Korzystając z jQuery, zadanie jest dużo prostsze niż równoważne podejście z Document Object Model (DOM). Im częściej korzystasz z jQuery, tym bardziej elastyczne i wyraziste.

Aby służyć celowi, musisz mieć możliwość dodania swojego elementu do strony internetowej. Dowiedz się, jak dodać nowy element listy lub zastąpić akapit nową treścią za pomocą jQuery.

Co to jest jQuery?

Biblioteka jQuery jest zbiorem JavaScript kod z dwoma głównymi celami:

• Upraszcza typowe operacje JavaScript.
• Obsługuje problemy z kompatybilnością krzyżową JavaScript między różnymi przeglądarkami.

Drugi cel dotyczy błędów, ale dotyczy również różnic w implementacji między przeglądarkami. Oba cele są mniej potrzebne niż kiedyś, ponieważ przeglądarki z czasem się poprawiają. Ale jQuery wciąż może być cennym narzędziem.

Co to jest element?

Element jest czasami określany jako znacznik. Chociaż oba są często używane zamiennie, istnieje subtelna różnica. Znacznik odnosi się do dosłownego lub

 dołączasz do pliku HTML, aby oznaczyć zawartość tekstową. Element to zakulisowy obiekt, który reprezentuje zaznaczony tekst. Pomyśl o elemencie jako DOM odpowiednik znaczników HTML.

Jak stworzyć nowy element za pomocą jQuery

Jak większość operacji jQuery, tworzenie elementu zaczyna się od funkcji dolara, $(). To jest skrót do sedna jQuery() funkcjonować. Ta funkcja ma trzy różne cele, to:

• Dopasowuje elementy, zwykle te, które już istnieją w dokumencie
• Tworzy nowe elementy
• Uruchamia funkcję zwrotną, gdy DOM jest gotowy

Gdy jako pierwszy parametr przekażesz ciąg znaków zawierający kod HTML, ta funkcja utworzy nowy element:

$("")

Zwraca to specjalny obiekt jQuery, który zawiera kolekcję elementów. W tym przypadku istnieje pojedynczy obiekt reprezentujący element „a”, który właśnie stworzyliśmy.

Ciąg znaków musi wyglądać jak HTML, aby odróżnić tę akcję od pasujących elementów. W praktyce oznacza to, że ciąg musi zaczynać się od a <. Za pomocą tej metody nie można dodać do dokumentu zwykłego tekstu.

Ważne jest, aby zrozumieć, że nie powoduje to dodania elementu do dokumentu, a jedynie tworzy nowy element gotowy do dodania. Element jest „niedołączony”, zajmuje pamięć, ale w rzeczywistości nie jest częścią końcowej strony — jeszcze.

Dodawanie bardziej złożonego kodu HTML

Funkcja dolara może w rzeczywistości stworzyć więcej niż jeden element. W rzeczywistości może zbudować dowolne drzewo elementów HTML:

$("

jeden
dwa
trzy
")

Możesz również użyć tego formatu, aby utworzyć element z atrybutami:

$('')

Jak ustawić atrybuty w nowym elemencie

Możesz utworzyć nowy element jQuery i ustawić jego atrybuty bez konieczności samodzielnego budowania pełnego ciągu HTML. Jest to przydatne, jeśli dynamicznie generujesz wartości atrybutów. Na przykład:

zdjęcie = nowe Date().getHours() > 12? "popołudnie.jpg": "poranek.jpg";
$("", { źródło: zdjęcie });

Jak dodać element

Po utworzeniu nowego elementu możesz dodać go do dokumentu na kilka różnych sposobów. Dokumentacja jQuery zbiera te metody razem w ramach kategoria „manipulacja”.

Dodaj jako dziecko istniejącego elementu

$("ciało").append($("
Witaj świecie
"));
$(dokument.body).append($el);

Możesz użyć tej metody, na przykład, aby dodać nowy element listy na końcu listy.

Dodaj go jako rodzeństwo istniejącego elementu

$("p.last").after("
Nowy akapit
")
$("ul li: pierwszy").before("
nowy przedmiot
")

To dobry wybór, jeśli na przykład chcesz dodać nowy akapit w środku dwóch innych.

Zastąp istniejący element

Możesz zamienić istniejący element na nowo utworzony za pomocą zamienić() metoda:

$('#stary').replaceWith("
Nowy akapit
");

Zawiń wokół istniejącego elementu

Jest to dość rzadki przypadek użycia, ale możesz chcieć dołączyć istniejący element do nowego. Na przykład możesz mieć kod element, który chcesz owinąć a przed:

$('kod#n1').wrap("
")

Dostęp do elementu, który stworzyłeś

ten $() funkcja zwraca obiekt jQuery. Jest to przydatne w przypadku operacji uzupełniających:

$el = $("p");
$('ciało').append($el);

Zauważ, że zgodnie z konwencją programiści jQuery często nazywają zmienne jQuery z wiodącym znakiem dolara. Jest to po prostu schemat nazewnictwa i nie jest bezpośrednio związany z $() funkcjonować.

Tworzenie elementów za pomocą jQuery

Chociaż możesz manipulować DOM za pomocą natywnych funkcji JavaScript, jQuery znacznie ułatwia to. Nadal bardzo przydatne jest dobre zrozumienie DOM, ale jQuery sprawia, że ​​praca z nim jest o wiele przyjemniejsza.

Ukryty bohater stron internetowych: Zrozumienie DOM

Uczysz się projektowania stron internetowych i chcesz dowiedzieć się więcej o obiektowym modelu dokumentu? Oto, co musisz wiedzieć o DOM.

Czytaj dalej

O autorze