jQuery – atrybuty i manipulacja (cz. II)

02.12.2009 - Rafał Polito
TrudnośćTrudność

Przełączanie klas elementów

Jeśli jeszcze nie przerobiliście części pierwszej kursu jQuery, warto do niej zajrzeć, gdyż przy manipulacji klasami przyda nam się wiedza na temat selektorów i filtrów.

Do przełączania klas elementów posłużą nam:

- metoda addClass("klasa") pozwala dodać klasę (stworzoną w stylach CSS) do elementu strony www

- metoda removeClass("klasa") działa odwrotnie – usuwa klasę w elemencie

- metoda toggleClass("klasa") przyjmuje jako argument nazwę klasy*

*Jeżeli element, na którym używamy tej metody, ma przypisaną klasę, to wywołanie tej metody usunie ją. Jeżeli zaś element ten nie ma przypisanej klasy, to zostanie ona przypisana.

Żeby uruchomić metodę na selektorze, posługujemy się składnią przyjętą z innych języków:

1
     selektor.metoda("argument");
W miejsce słowa selektor wstawiamy kod selektora, na którym chcemy użyć metody, a na miejscu
słowa metoda - nazwę metody. Argumentem będzie zaś wartość z jaką chcemy wywołać metodę.

Argumentów może być kilka w zależności od metody i tego, czy jest to metoda przeciążona.
Przykładem metody przeciążonej jest toggleClass("klasa", boolean), którą można uruchomić
wywołując ją z dwoma parametrami.
Jak w przypadku nieprzeciążonej wersji tej metody, pierwszym argumentem będzie nazwa klasy,
zaś drugim wartość true/false.Tak więc metoda z parametrami toggleClass("klasa", true) działa jak addClass("klasa"), zaś metoda toggleClass("klasa", false) działa jak removeClass("klasa").

Aby sprawdzić, czy element strony ma przypisaną podaną klasę, wykorzystujemy metodę hasClass("klasa"), która, w przypadku gdy element ma przypisaną klasę, zwraca wartość true; gdy nie ma przypisanej klasy -
wartość false.

Możemy wywołać kilka metod na jednym selektorze rozdzielając je kropką. Metody wywołają się wtedy jedna po drugiej

Przykłady:

1
    $("div[class=’news’]").removeClass("news").addClass("artykul");

1
    var przypisana = $("p:first").hasClass("artykul");

Przełączanie klas elementów powinno być już dla nas proste. Manipulacja atrybutami, której przyjrzymy się na następnej stronie, będzie równie łatwa do opanowania.

2
Twoja ocena: Brak Ocena: 2 (1 ocena)

Copyright © 2008-2010 Wrocławski Portal Informatyczny

design: rafalpolito.com