Kurs jQuery. Część 4: Zaawansowana obsługa DOM
Z lektury poprzednich odcinków kursu jQuery wiemy już, że framework ten oferuje dostęp do dowolnych elementów drzewa DOM za pomocą selektorów oraz umożliwia wstawianie danych jako fragmentów kodu HTML. Jednak w niektórych sytuacjach projektant internetowej aplikacji wolałby skorzystać z niskopoziomowej metody manipulacji DOM. I biblioteka jQuery mu to umożliwia. Przyjrzyjmy się więc bliżej, w jaki sposób poruszać się między elementami, wyszukiwać rodziców i przodków oraz jak stosować metody niskopoziomowej modyfikacji drzewa przez pobieranie, klonowanie, otaczanie i usuwanie już istniejących fragmentów DOM.
Wprowadzenie
We wcześniejszych artykułach serii stosowaliśmy w zasadzie tylko i wyłącznie selektory CSS oraz edytowaliśmy dokument przez wstawianie przygotowanych wcześniej jako tekst fragmentów HTML. Choć rozwiązania te pozwalają osiągnąć zamierzony efekt, nie zawsze są na tyle elastyczne, by można je było wykorzystać wielokrotnie. W niniejszym odcinku kursu opiszemy więc dwa zestawy metod jQuery dające dostęp do obsługi dokumentu HTML na nieco innym poziomie – jego reprezentacji jako drzewa DOM (Document Object Model – model obiektowego opisu dokumentu).
Poruszanie się po strukturze DOM umożliwiają metody pozwalające przejść do następnego lub poprzedniego elementu, poznać rodzica aktualnego obiektu, a nawet wydobyć elementy sąsiednie, znajdujące się na tym samym poziomie. Biblioteka jQuery zwiększa dodatkowo elastyczność prezentowanego rozwiązania, oferując możliwość ograniczania się w trakcie naszych działań tylko do elementów wybranego typu.
Selektory lub metody – wybór należy do Ciebie.
Modyfikacja dokumentu na poziomie drzewa DOM jest również bardzo przydatna dla projektanta witryny. Możemy bowiem na przykład wskazać, że chcemy dany kod HTML umieścić tuż za innym fragmentem lub też jego część przenieść w wybrane miejsce, czy po prostu usunąć. Biblioteka oferuje kilka metod realizujących takie operacje – nie jest to zestaw duży, zapewnia jednak pełną elastyczność, bez potrzeby pobierania większych fragmentów kodu, ich obróbki i późniejszego wstawiania na miejsce.
«poprzednia 1 2 3 4 ... 9 następna »
Polecamy
Reklama
Komentarze
Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka
(słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.
Popularne
Pobierałeś pirackie pliki? Uważaj! Kontrole antypirackie w domach użytkowników to codzienność
31
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1455
Debata w sprawie ACTA: internauci spodziewali się chyba czegoś innego
14
Wynalazca WWW przed sądem: walczy tam o wolny dostęp do webowych technologii dla każdego
8
PHP 5.3.9 nie pozwoli hakerom zawiesić serwera. Pozwoli za to przejąć nad nim kontrolę
28
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
15
Internet w EU bez Facebooka i Google? Firmy nie mają wyboru: albo się dostosują, albo…
10
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
[Aktualizacja] Facebook zablokował Demotywatory.pl. W czym zawiniły?
36
FBI zamknęło Megaupload. Anonimowi dali się sprowokować. Teraz ich akcja uzasadni potrzebę SOPA?
17
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1455
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
15
„Donald matole, twój rząd dopadną kibole” – hakerska elita przyłącza się do walki z ACTA
23
Klamka jeszcze nie zapadła. Minister prosi Donalda Tuska, by wstrzymał się z podpisywaniem ACTA
24
Społeczność
slawek22 @WebDev:
Te korporacje i "twórcy" starej daty których tak bronisz nie...
darekp @eimi, a co za różnica między zdobytym pieniędzmi a nie? Spróbuj zdobyć...
Jan "Tablet, na którym można uruchomić prawdziwe Microsoft Office, ładnie...
Maciekkkk Strona nie działa!
WebDev @eimi®
Zdobyte inaczej niż pieniędzmi, czyli jak? Czy mógłbyś to rozwinąć...
eimi @Webdev, a ja jeszcze raz Ci powiem - to co zdobyte inaczej niż pieniędzmi...
sade Powodem dla którego klienci wybierają ten sklep jest ich niewiedza.
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
- Marek: problem z menu (2)
- Marek: Własne checkboxy w HTML,CSS (1)
Polecane książki
Praca
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |










#1 dAREuS® 2009-10-28 09:23:13 0
IP: 83.31.125.[...] Opera/9.80 (Windows NT 6.0; U; pl) Presto/2.2.15 Version/10.00
#2 super webmaster 2009-10-28 11:46:12 0
IP: 83.19.229.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4 (.NET CLR 3.5.30729)
#3 super webmaster 2009-10-28 11:47:36 0
IP: 83.19.229.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4 (.NET CLR 3.5.30729)
#4 ktos 2009-10-28 14:10:40 0
IP: 90.156.80.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
#5 To_Ja 2009-10-28 15:16:53 0
IP: 78.131.216.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
#6 threehundred 2009-10-28 15:17:54 0
IP: 88.156.126.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.27 Safari/532.0
#7 swot 2009-10-28 18:35:14 0
IP: 89.229.202.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
#8 To_Ja 2009-10-29 11:36:33 0
IP: 78.131.216.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
#9 zreb 2009-10-30 07:44:27 0
IP: 83.19.229.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4 (.NET CLR 3.5.30729)
#10 ktoś 2009-10-31 12:21:28 0
IP: 90.156.80.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
#11 Pluto 2010-03-20 23:28:04 0
IP: 94.75.74.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.3 (KHTML, like Gecko) Chrome/5.0.352.0 Safari/533.3