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

Prostota.

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">

</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">
    
</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 :

[code=html]Tytuł tabeli

[/code]

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();
})