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.

Spis treści
Wprowadzenie Przemieszczanie się po strukturze dokumentu Przykład praktyczny – ruch wewnątrz tabeli Edycja struktury DOM Dodawanie i usuwanie elementów w praktyce Obróbka elementów przed ich dołączeniem do DOM W praktyce – zmiana kolejności elementów listy Przenieś i upuść nie jest trudne! Podsumowanie

Spis treści

Wprowadzenie
Przemieszczanie się po strukturze dokumentu

Przykład praktyczny – ruch wewnątrz tabeli

Edycja struktury DOM

Przenieś i upuść nie jest trudne!
Podsumowanie

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 »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

11 skomentuj »

Komentarze

#1 dAREuS^® 2009-10-28 09:23:13 0
Od razu dodam, że wdrożyliśmy mechanizm kolorowania składni. Dajcie znać, czy teraz jest to bardziej czytelne.
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
To niech mi ktoś powie jak się np. dostać (odczytać za pomocą jQuery - javascript generalnie) do ostatniego znaku w kolumnie??

Może to są i webowe ale nie aplikacje
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
Mówimy oczywiście o kolumnie tekstowej która ma wiele wierszy :p
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
@02,03:

Wczytujesz kolumne do zmiennej, sprawdzasz dlugosc zmiennej, odwolujesz sie przez indeks tablicy.
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
@super webmaster

var litera = $("p").text().slice(-1);
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
Kolorowanie składni na webhosting wow ;] od razu lepiej patrzy się na kod.

Przydałoby się również numeracja linii.
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
@04 - zadziała tylko przy stałej szerokości czcionki. Oczywiście można próbować wyliczyć dla normalnej czcionki i dla każdej przeglądarki, systemu operacyjnego - dużo tych kombinacji wyjdzie

@05 - o ile dostaniesz ten element to zwróci ostatni znak ale nie wiersza tylko ostatni tegoż stringa
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
@swot

super webmaster napisał: "do ostatniego znaku w kolumnie" a nie wierszu.
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
@To_Ja

super webmster dodał też że chodzi o kolumnę z wieloma wierszami ... domyślam się że chodzi o odczytywanie z każdego wiersza ostatnich znaków żeby je ewentualnie przenieść do następnego wiersza (typu i z w a o ...) - lepiej się wtedy czyta tekst i profesjonalniej wygląda

Można stosować oczywiście   ale to jest brzydkie rozwiązanie.
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
Jeżeli chodzi o to, co napisał zreb, to super webmaster źle opisał sytuację. Ostatni znak w kolumnie to ostatni znak w kolumnie. A nie ostatni znak w łamanym wierusz. Nie chciałbym jego kodu rozwijać :D

A z owym   to robisz klasę/metodę/funkcję przy zapisie tekstu do bazy danych aby przeparsował tekst i odpowiednio powstawiał   - po to chyba ta twarda spacja jest, aby ją stosować. A obchodzenie tego javascriptem, szczególnie gdy ktoś może mieć różne rozdzielczości (przy dynamicznej szerokości kolumny tekst się łamie w różnych miejscach) lub korzystać z powiększania tekstu, spowoduje tylko jeszcze większy bajzel i niepotrzebnie będzie za każdym razem obciążało kompa użytkownika.

jQuery tak jak i javascript tak jak i c, c++ czy php nie są do wszystkiego, więc zamiast psioczyć jak to coś jest badziewne, lepiej się zastanowić czy korzystamy z właściwego narzędzia do osiągnięcia celu.
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
Kolorowanie fajne, tylko wciec brakuje bez ktorych kod jest strasznie nieczytelny. Mozna by te kolorowania zapodac w poprzednich czesciach? ;)
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

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.