Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Kurs jQuery - wybieranie elementów z DOM (cz. 1)

Prostota.

jQuery to jedna z najpopularniejszych bibliotek JS. Jednym (choć nie jedynym) z powodów jej popularności jest prostota z jaką umożliwia wybieranie elementów na naszej stronie, na których chcemy wykonać jakieś operacje. Do dyspozycji mamy mnóstwo selektorów i metod pomocniczych, które powodują, że operacje na elementach DOM stają się szybkie i przyjemne. Dzięki bibliotece zaoszczędzimy wiele linii kodu, który musieli byśmy napisać w czystym JS, aby osiągnąć to samo.

Dodatkowe korzyści

Używanie jQuery poza uproszczonym wybieraniem elementów ma co najmniej dwie powiązane z tym zalety. Po pierwsze nie musimy się martwić o kompatybilność z przeglądarkami - jQuery dba o to za nas. Druga sprawa to automatyczne iteracje, które jQuery wykonuje za nas. Chodzi o to, że jeśli wybierzemy za pomocą jQuery elementy o określonej klasie, to niezależnie czy taki obiekt jest jeden czy dziesięć, my wywołujemy określoną metodę (np dodanie klasy) na obiekcie jQuery raz, a jQuery wykona niejawną iterację po wszystkich elementach DOM. Przykład:$(".more").addClass("red");Powyższy kod doda klasę red do wszystkich elementów, które posiadają klasę more.

Od czego zacząć

Oczywiście zacząć musimy od dołączenia do naszej strony biblioteki jQuery:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>Cały kod jQuery, który pojawi się w późniejszej części artykułu wykonujemy w sekcji head i w znacznikach jak poniżej:<script type="text/javascript"> <!-- $(function(){ //tutaj kod....... }) --> </script>Znak dolara i nawiasy: $(), to funkcja fabryczna jQuery. Praktycznie wszystko co będziemy robić w jQuery będziemy zaczynać od tego znaczka. Wywołanie w nawiasach od razu funkcji powoduje, że kod tej funkcji zostanie wywołany przez jQuery zaraz po załadowaniu się pełnego drzewa DOM. Tutaj uwaga: nie oznacza to, że załadowane będą inne elementy strony poza strukturą, takie jak np obrazki.

Dodajmy do naszego skryptu jeszcze style CSS, które będziemy wykorzystywać w dalszej części:<style type="text/css"> <!-- .czerwony{ color: red; background: #FF8080; } .zielony{ color: lime; background: green; } --> </style>

Na czy będziemy pracować

Teraz czas na HTML. Poniżej kod przykładowego dokumentu, na którym będziemy operować. Pomijam oczywiście nagłówki itp, zamieszczam tylko wnętrze znacznika <body>:<p>Tytuł tabeli</p> <table style="width: 400px;" border="1"> <tbody> <tr> <th><p>Tytuł</p></th> <th><p>Wartość</p></th> </tr> <tr> <td>Lista</td> <td> <ul> <li>Lata <ul> <li>2010</li> <li>2011<ol> <li>styczeń</li> <li>luty</li> <li>marzec</li> <li>kwiecień</li> </ol></li> <li>2012</li> </ul> </li> <li>Miasta</li> <li>Państwa</li> <li>Rzeki</li> </ul> </td> </tr> <tr> <td>Mail</td> <td><a href="mailto:biuro@test.pl">biuro@test.pl</a></td> </tr> <tr> <td>Strona www</td> <td><a href="http://www.mojastrona.pl">www.mojastrona.pl</a></td> </tr> <tr> <td>nazwa 1</td> <td class="wyroznienie">wartość 1</td> </tr> <tr> <td>nazwa 2</td> <td>wartość 2</td> </tr> <tr id="waznyWiersz"> <td class="wyroznienie">nazwa 3</td> <td>wartość 3</td> </tr> <tr> <td>nazwa 4</td> <td class="wyroznienie">wartość 4</td> </tr> <tr> <td>nazwa 5</td> <td>wartość 5</td> </tr> <tr> <td>nazwa 6</td> <td class="wyroznienie">wartość 6</td> </tr> </tbody> </table>

Uwagi

Ponieważ wpis traktuje o wybieraniu elementów z drzewa DOM, nie będę w treści skupiał się na działaniu innych metod jQuery. Niemniej jednak będziemy ich używać, w związku z tym wymieniam je tutaj i króciutko opisuję ich działanie, dla tych, którzy nie znają:
  • .addClass() - dodaje klasę do elementu
  • .hide() - ukrywa element
  • .css() - dodaje style css do elementów
Powyższe opisy dotyczą sposobów wykorzystania tych metod w tekście, część z nich ma też inne zastosowania, np .css() może nie tylko ustawiać, ale również zawracać wartości atrybutów CSS.

Sensowność niektórych działań w tym wpisie może wydawać się mała, i tak jest, ale chodzi o to, żeby pokazać możliwości jQuery.

Podstawowe selektory

Każde wybieranie elementów zaczynamy od funkcji fabrycznej, a jako jej argument podajemy w cudzysłowach informację jaki element chcemy wybrać.
Na początek zacznijmy od najprostszych sektorów. Wybierzemy przy pomocy jQuery wszystkie elementy będące akapitami i wyzerujemy ich marginesy. Żeby wybrać elementy będące znacznikami HTML, wystarczy w cudzysłowie podać ich nazwę:$("p").css('margin',"0");Jeśli chcemy wybrać różne elementy wystarczy oddzielić je od siebie przecinkiem:$("p,li,h1").css('margin',"0");Powyższy kod wybrał by wszystkie akapity, punkty w listach i nagłówki poziomu 1, w naszym przypadku ten kod nie ma zastosowania.
Wracając do usuniętych marginesów. Najczęściej jest tak, że nie chcemy stosować reguł do wszystkich elementów danego typu. Zróbmy tak, żeby usunięty margines miały tylko akapity w nagłówkach tabel. Jeśli chcemy wybrać elementy będące potomkami innego robimy to tak jak w CSS podając ich nazwy oddzielone spacją. Zamieniamy nasz kod na:$("th p").css('margin',"0");Wybieranie elementów o określonej klasie odbywa się za pomocą podania nazwy klasy poprzedzonej kropką, a w przypadku wybierania po id podajemy nazwę poprzedzoną haszem. Pogrubmy tekst elementów z klasą "wyroznienie" oraz zastosujmy klasę "czerwony" do wiersza oznaczonego id "waznyWiersz":$(".wyroznienie").css('font-weight','bold'); $("#waznyWiersz").addClass('czerwony');

Elementy parzyste i nieparzyste

Dzięki jQuery w prosty sposób możemy pokolorować w naszej tabeli co drugi wiersz, służą do tego specjalne selektory, które umożliwiają wybranie co drugiego dopasowanego elementu:
  • :even - parzyste elementy
  • :odd - nieparzyste elementy
Spróbujmy pokolorować nasza tabelkę:$("tr:even").css("background","#DAD8D8");

Wykluczanie elementów

Niestety teraz pokolorowaniu uległy również pierwszy nagłówkowy wiersz oraz wiersz, który wyróżniliśmy kolorem czerwonym. Aby to zmienić, możemy posłużyć się negacją podczas wybierania elementów. Służy do tego specjalny selektor :not(), który wykluczy elementy spełniające kryteria podane wewnątrz nawiasów. Dzięki temu możemy wybierać elementy, które psują do jednych kryteriów, ale nie pasują do innych, jak w naszym przypadku:$("tr:even:not(#waznyWiersz)").css("background","#DAD8D8");

Pierwszy i ostatni

Jednak powyższa zmiana nie do końca załatwia sprawę. Co prawda wróżniony wiersz juz nie jest szary, ale nadal wiersz nagłówkowy jest. Aby poprawić błąd poznamy kolejny selektor :first. Ten selektor wybiera pierwszy element z dopasowanych, w naszym wypadku wykluczymy pierwszy wiersz tabeli. Poprawiamy ostatni wiersz na taki:$("tr:even:not(#waznyWiersz, :first)").css("background","#DAD8D8");Istnieje również selektor umożliwiający wybranie ostatniego z dopasowanych elementów, jest to :last.
Tak obecnie powinna wyglądać nasza strona:

Wybieranie z listy dopasowanych wg numerów

Istnieje również selektor umożliwiający wybranie elementu o określonym numerze wśród dopasowanych elementów :eq(n), gdzie n to numer elementu. Dodamy ramkę do elementów td w 6 wierszu w naszej tabeli, w tym o nazwie "nazwa 2". Elementy numerowane są od zera, więc wiersz szósty będzie miał numer 5:$("tr:eq(5) td").css('border','2px solid #000');Możemy też wybierać elementy z dopasowanych o numerze (indeksie) większym lub mniejszym od konkretnej liczby, służą do tego selektory:
  • :gt(n) - większe od n
  • :lt(n) - mniejsze od n
Ukryjmy przy pomocy tych selektorów wiersze od 8 do końca. Jeśli chcemy ukryć wiersze włącznie z ósmym, musimy jako argument selektora podać wiersz numer siedem - przy czym pamiętamy, że elementy są numerowane od zera, więc podajemy liczbę 6.$("tr:gt(6)").hide();Teraz strona wygląda tak:

Podsumowanie

W artykule starałem się opisać w miarę jasno użycie selektorów w jQuery. Artykuł nie wyczerpuje tematu i będzie miał oczywiście kontynuację.

nie zamieszczam plików do ściągnięcia, bo cały kod jest dosyć prosty. Kod HTML i CSS jest cały w jednym miejscu, kod JS dla porządku wklejam w całości poniżej.$(function(){ $("th p").css('margin',"0"); $(".wyroznienie").css('font-weight','bold'); $("#waznyWiersz").addClass('czerwony'); $("tr:even:not(#waznyWiersz, :first)").css("background","#DAD8D8"); $("tr:eq(5) td").css('border','2px solid #000'); $("tr:gt(6)").hide(); }) 

internet programowanie inne

Komentarze

0 nowych
Druedain   14 #1 19.07.2012 13:40

Hyhy, właśnie przed chwilą miałem pierwszy kontakt z JS + DOM :P . W domu sobie poczytam Twój wpis :)

alucosoftware   7 #2 19.07.2012 13:59

Bardzo dobrze napisany tekst. Warto wspomnieć o wyborze elementu po nazwie atrybutu $('#element[atrybut=nazwa]')

Autor edytował komentarz.
slepciu   11 #3 19.07.2012 14:14

@alucosoftware - będzie w drugiej części :) to i kilka innych rzeczy

djfoxer   18 #4 19.07.2012 14:29

Na początek na pewno przydatne :) Zawsze warto pisać o jq :P

flaszer   10 #5 19.07.2012 14:35

Dobrze napisane. Myślę, że wielu początkującym wpis się przyda - jakby nie patrzeć, jQuery niesamowicie usprawnia pracę ;)

B.Andy   4 #6 19.07.2012 14:36

Przyda się

djfoxer   18 #7 19.07.2012 14:39

Czy ktoś jeszcze tworzy w czystym js? :)

tfl   8 #8 19.07.2012 14:44

Zwracam tylko uwage, ze .hide() "znika element" przez dodanie styl display:none. Natomiast dodawanie css via js dla statycznych stron to jest zlo. Nie umniejsza to oczywiscie przydatnosci w tych przykladach, by pokazac o co kaman. Tak tylko pisze, zeby sie ktos nie sugerowal ;)

djfoxer   18 #9 19.07.2012 15:08

@tfl
Ale to tylko przykład akademicki :)

Sidhmor   7 #10 19.07.2012 15:12

@tfl
To jak prościej "znikać element"?

djfoxer   18 #11 19.07.2012 15:16

@Sidhmor
Jak chcesz całkowicie usunąć (a nie ukryć) to użyj: empty/remove.

slepciu   11 #12 19.07.2012 15:32

@tfl - zgadzam się, dodawanie CSS taki sposób jak w przykładzie, bez wcześniejszych zdarzeń wywołujących jest bez sensu, starałem się zaznaczyć to w tekście i mam nadzieję, że nikt nie odebrał tego inaczej.
Jeśli chodzi o .hide() to tak jak pisałem ta metoda ukrywa element, a nie usuwa, dla dociekliwych wystarczy dodać ukrycie jednego wiersza przed pokolorowanie co drugiego wiersza, zobaczycie wtedy, że wiersze kolorują się tak jakby ten ukryty istniał, w związku z czym nie będzie już ładnej "zebry". Nie zagłębiałem się w tą kwestię, bo nie tego dotyczy artykuł, ale pewnie w przyszłości napisze tez coś o edycji drzewa DOM.

tfl   8 #13 19.07.2012 15:38

oj, wyszedlem jak zwykle na malkontenta...

od gory:

@djfoxer - tak wlasnie napisalem. przyklad doskonaly dla nauczenia sie czegos.
@Sidhmor - prosciej sie juz nie da. Chodzi mi o to, ze js czy jq nie robi tego czaromagicznie a po prostu styluje

@slepciu, troche zaluje, ze nie pogadalismy na HZ, w kazdym razie ogromnie szanuje Twoje wpisy, bo trafiaja do czytelnikow :) oby tak dalej!

MaXDemage   18 #14 19.07.2012 15:48

Mleeehhhhh~ takie jakieś dla laików to to.

;>
A tak serio, dobra robota.

R@z0r   5 #15 19.07.2012 16:02

Zabrakło .filter() i .find() ale tak to spoko ;) Dużo podobnych podstaw w sieci. Nie wiem na ile znasz jquery ale fajnie by było w języku ojczystym poczytać o zaawansowanych funkcjach ;)

slepciu   11 #16 19.07.2012 16:46

@tfl - dzięki za miłe słowa :) HotZlot był zdecydowanie za krótki, albo nas było za dużo :) Może będzie okazja za rok.

@MaXDemage - dzięki

@R@z0r - metody przechodzenia drzewa DOM będą, ale w przyszłości. Co do zaawansowanych funkcji, to nie wiem gdzie się zaczynają zaawansowane, ale pewnie jeszcze nie jeden wpis na temat jQ napiszę, więc może coś się trafi co i Ciebie zainteresuje. Będę się starał :)

DjLeo MODERATOR BLOGA  18 #17 19.07.2012 19:05

Bardzo fajny wpis. Oby takich więcej.

arlid   14 #18 20.07.2012 08:54

@slepciu
Nauczyłeś mnie z wcześniejszych wpisów sporo, teraz czas na kolejną lekcję :) Dzięki za wpis.

slepciu   11 #19 20.07.2012 09:49

@DjLeo
@arlid
Dzięki za motywowanie do kolejnych wpisów

GediMaster   3 #20 20.07.2012 12:57

Na znak dolara $ trzeba uważać ;]. Często jQuery potrafi się pokłócić z innymi skryptami (np. może się pożreć ze skryptem lightBox). Wtedy albo trzeba skorzystać z `$ = Jquery.noConflict()`, albo bezpiecznie pisać wszystko bez dolara - jQuery(). Ja wybieram to ostatnie ;)

underface   14 #21 20.07.2012 14:36

kolejny wpis ląduje u mnie na dysku offline na tzw. czarną godzinę bo nie wiadomo, kiedy coś się może przydać

flaszer   10 #22 20.07.2012 14:37

@GediMaster
Dokładnie. Miałem kiedyś identyczny identyczny problem z lightBox'em i znakiem dolara, ale problem okazał się być banalnym do rozwiązania ;)

  #23 03.05.2013 14:17

Hej a w jaki sposób wybrać element jeżeli posiada on 2 klasy i spełniając warunek, że musi on mieć te 2 klasy inaczej nie wykona metody np. .css()

Przykładowo klasy stałe to .home-icon a 2 klasa która sie dodaje automatycznie: .current-menu-item?

:)

slepciu   11 #24 04.05.2013 18:46

$('.home-icon').filter('.current-menu-item').css('color','red'); - powinno być dobrze