Dowiedz się, jak stworzyć element w jQuery

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 o wiele prostsze niż równoważne podejście z modelem obiektów dokumentu (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ą zawartoś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ż te dwa są często używane zamiennie, istnieje subtelna różnica. Tag odnosi się do literału

lub



dołączasz do pliku HTML, aby oznaczyć zawartość tekstową. Element to zakulisowy obiekt, który reprezentuje oznaczony tekst. Pomyśl o elemencie jako o odpowiedniku DOM tagó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.



przenieś licencję Windows 10 na nowy komputer

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:

$('
  • one
  • two
  • three
')

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

$(' my hometown')

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:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

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

$('body').append($('

Hello, world

'));
$(document.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('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    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:

    $('#old').replaceWith('

    New paragraph

    ');

    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ąć dla :

    $('code#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');  
    $('body').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.
      Udział    Udział      Ćwierkać      E-mail      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       Powiązane tematy  
       
    • Programowanie
      •  
    • Tworzenie stron internetowych
      •  
    • jQuery
      •  
      O autorze   Bobby Jack(58 opublikowanych artykułów)      
    Bobby jest entuzjastą technologii, który przez prawie dwie dekady pracował jako programista. Pasjonuje się grami, pracuje jako redaktor recenzji w magazynie Switch Player i jest zanurzony we wszystkich aspektach publikowania online i tworzenia stron internetowych.
    Więcej od Bobby'ego Jacka
    Zapisz się do naszego newslettera
     
    Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
    Kliknij tutaj, aby zasubskrybować