W poprzednim, trzecim już, odcinku kursu zajeliśmy się podstawami. Dzisiaj nadal będziemy się zajmować się właśnie nimi, ale posuniemy się o krok dalej. W tym artykule poznacie więcej praktycznych czynności i użyjecie wiedzy zdobytej do tej pory. Jak już wspominałem, potęga jQuery tkwi w prostocie manipulacji elementami strony Internetowej. To co w skrócie musicie się nauczyć to jak wykorzystywać jQuery do tego by zajmować się tym co już znacie, czyli kodem HTML i CSS.
Dlatego w tym artykule pokażę Wam jak:
- Dodawać, usuwać, odczytywać i zmieniać atrybuty znaczników HTML
- Dodawać, usuwać i zastępować treść strony
Dodawanie, usuwanie, odczyt i zmienianie atrybutów znaczników HTML
Współcześnie za wygląd stron www odpowiadają przede wszystkim kaskadowe arkusze stylów. Dlatego operacje związane z dodawaniem, usuwaniem i zmianą klas w znacznikach HTML będą jednym z podstawowych (jeśli nie podstawowym) sposobem na modyfikację strony.
Biorąc pod uwagę, fakt iż dzisiejsze selektory CSS3 dają nam ogromne możliwości, jQuery używać będziemy głównie w sytuacjach kiedy chcemy aby dany element zmieniał się w wyniku interakcji użytkownika ze stroną lub gdy jest to wymagane działaniem skryptu. Jak to osiągnąć? jQuery udostępnia nam trzy wyjątkowo przydatne funkcje:
.addClass() – nazwa jest dosyć sugestywna ;) dzięki tej funkcji dodamy do wybranego elementu HTML klasę. Zobaczmy przykład:
1 | $('a').addClass('link'); |
W ten sposób wszystkie linki otrzymają klasę „link”. Oczywiście w arkuszu stylów musi się znaleźć deklaracja ze stylami dla tejże klasy.
Uwaga: w nazwie klasy podawanej do funkcji .addClass() nie wpisujemy kropki a jedynie nazwę klasy.
.removeClass() – działanie tej funkcji jest po prostu odwrotne do działania opisanej wyżej .addClass(), więc nie będziemy się rozpisywać ;)
.toggleClass() – najprościej rzecz ujmując dzięki tej funkcji „przełączymy” klasy elementu. W tym przypadku widać jak na dłoni, że sens jej praktycznie zawsze łączy się z interakcją użytkownika i strony.
Wklej poniższy kod do dokumentu z rozszerzeniem .html, a następnie wyświetl ten dokument w przeglądarce:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style type="text/css"> .red {background:red;} #przyklad {width:50%; height:300px; text-align:center; margin:40px auto 0;} </style> <script type="text/j-avascript" > $(document).ready(function() { $('#link').click(function() { $('#przyklad').toggleClass('red'); }); }); </script> </head> <body> <div id="przyklad"> <a href="javascript:void(0);" id="link">kliknij mnie aby zmienić tło</a> </div> </body> </html> |
Jeśli klikniesz link zrozumiesz do czego służy funkcja .toggleClass(). Fragment kodu odpowiedzialny za zmianę koloru tła to:
1 2 3 | $('#link').click(function() { $('#przyklad').toggleClass('red'); }); |
Operacje na klasach to nie jedyna metoda wpływania na deklaracje stylów za pomocą jQuery. Funkcja .css() umożliwia bezpośrednie zmiany we właściwościach CSS. Ponad to może też służyć do pobierania informacji o wartościach właściwości jeśli w wywołaniu funkcji podamy jedynie nazwę interesującej nas właściwości. Jeśli zaś chcemy ustawić pewną wartość dla pewnej właściwości to musimy te informacje podać przy wywołaniu funkcji.
1 | $('a#przyklad').css('text-decoration', 'none'); |
W celu modyfikacji większej liczby par wartość-właściwość należy użyć literału obiektowego. Wygląda to następująco:
1 2 3 4 5 | $('a#przyklad').css({ 'border' :' 1px solid white', 'text-decoration' :' none', 'color' : 'red' }); |
Na koniec warto wspomnieć, że wyżej wymienione funkcje są specjalnie przeznaczone do operacji na deklaracjach stylów i klasach. W jQuery istnieją jednak funkcje, które „ogólnie” służą do manipulowania atrybutami elementów. Jest to funkcja .attr() i .removeAttr()
Dzięki pierwszej z nich możemy np. pobrać sobie ścieżkę do pliku obrazka albo podmienić tę ścieżkę na inną, a więc zmienić obrazek wyświetlany na stronie np. po kliknięciu użytkownika na link.
Za pomocą .removeAttr() możemy usuwać niepożądane atrybuty i również w ten sposób kształtować wygląd strony.
Dodawanie, usuwanie i zastępowanie treści strony
Dodawanie treści do strony jest wyjątkowo przydatną umiejętnością. Wprawdzie to czym będziemy się głównie zajmować w przypadku jQuery to raczej operowanie stylami, ale umiejętność szybkiego i dynamicznego dodawania treści też nie raz okaże się cenną wiedzą.
W tej materii interesować nas będzie kilka funkcji.
.html() – za pomocą tej funkcji odczytujemy cały kod HTML wewnątrz wybranego elementu lub zastępujemy go podanym przez nas.
1 | $('#przyklad').html(); |
Dzięki powyższemu fragmentowi kodu możemy „wyciągnąć” z elementu o identyfikatorze „przyklad” znajdujący się w nim kod HTML.
Funkcją .html() możemy też zastąpić kod HTML w wybranym obiekcie.
1 | $('#przyklad').html('<h1>Webroad</h1>'); |
Wszelki kod HTML wewnątrz elementu o identyfikatorze „przykład” zostanie zastąpiony kodem podanym w funkcji. Jeśli chcemy jedynie zmienić treść bez ingerencji w znaczniki musimy sięgnąć po inną funkcję.
.text() – nie przyjmuje znaczników HTML, a oprócz tego działa podobnie do powyższej funkcji. W tym wypadku z poniższego kodu HTML wyciągniemy jedynie sam text:
1 2 | <p>Lorem ipsum</p> $('#przyklad p').text(); |
.prepend() i .append() – funkcje te (odpowiednio) dodają przekazany kod HTML na początku lub końcu wybranego elementu strony. Inaczej dodają go jako pierwszy lub ostatni element potomny elementu nadrzędnego (tego którego wybraliśmy).
1 | $('#przyklad').append('<li>Cztery</li>'); |
W efekcie:
1 2 3 4 5 6 | <ul id=”przyklad”> <li>Jeden</li> <li>Dwa</li> <li>Trzy</li> <li>Cztery</li> </ul> |
.before() i .after() – dzięki tym funkcjom (odpowiednio) przypiszemy kod HTML za i przed wybranym elementem. Mówiąc inaczej – to co podamy w tych funkcjach znajdzie się poza znacznikami HTML wybranego elementu (za lub przed).
Z innych przydatnych funkcji (w tej kategorii tematycznej) wspomnimy jeszcze o:
.clone() – która służy do kopiowania elementów strony
.remove() – którą usuwamy elementy strony
.replace() – którą zastępujemy elementy strony innymi, podanymi elementami
Znając wyżej wymienione funkcje jesteście już w stanie całkiem sprawnie operować elementami HTML na waszej witrynie. Możecie je nie tylko pobierać, ale też usuwać, zamieniać, kopiować i przede wszystkim dodawać.
Wymienione sposoby nie wyczerpują listy funkcji, których możecie używać do manipulowania elementami strony, aczkolwiek jak sami zauważycie czytając dokumentację, inne służące do tego funkcje takie jak .appendTo() lub .detach() są bardzo zbliżone do wymienionych wyżej. To jednak nie oznacza, że nie warto się z nimi zapoznać.
Na marginesie: pełną listę funkcji wymienionych w dwóch powyższych punktach znajdziecie na stronie oficjalnej dokumentacji.
Zdjęcie pochodzi z: http://www.freedigitalphotos.net/
Piąta część kursu jQuery na webroad
W przykładzie do wklejenia jest błąd
„” – zbędny myślnik powoduje, że skrypt nie działa (jeśli to jest zrobione umyślnie, by zmusić czytelnika do znalezienia błędu to proszę o usunięcie komentarza :)