Artykuł

sie 30 2009
0

Wprowadzenie do jQuery - biblioteki JavaScript

W dzisiejszych czasach, aby zaistnieć w Internecie nie wystarczy już wykonać prostej, statycznej, nie wiele dającej użytkownikowi strony WWW. Strony konstruowane w sposób dynamiczny z wykorzystaniem technologii takich jak ASP.NET, PHP czy JAVA EE, również stają się nie wystarczalne. Tak więc czego oczekuje dzisiejszy użytkownik Internetu? Oczekuje on wszystkiego tego co napisałem powyżej, ale popartego JavaScriptem, jednym słowem dynamiki. Przykładowo, na tradycyjnej stronie wyniki sondy Internetowej kierują nas na kolejną podstronę, w stronie opartej o JavaScript, po naciśnięciu przycisku głosowania, nasz głos zostaje zapisany do bazy danych, a przeglądarka w oparciu o JavaScript wyświetla aktualne wyniki głosowania i to bez żadnego przeładowywania strony! To tylko jedna z wielu rzeczy jakich można dokonać za pomocą JavaScriptu. Niestety JavaScript ma kilka wad. Różne przeglądarki różnie interpretują polecenia tego języka i jest to język dość rozłożysty - chodzi mi o to, że aby coś osiągnąć należy napisać dużo kodu, którego nadmiar w przypadku strony Internetowej jest szczególnie istotny. Na szczęście jest rozwiązanie, powyższe wady możemy dość w prosty sposób zniwelować korzystając z jednej z popularnych bibliotek JavaScript np. jQuery.

Wprowadzenie do jQuery

Jak już wspomniałem we wprowadzeniu, jQuery jest jedną z bibliotek JavaScript mającą na celu wesprzeć użytkownika w procesie tworzenia aplikacji Internetowych opartych o ten właśnie język. Zasadniczym celem używania jQuery jak i innych bibliotek jest redukcja ilości tworzonego kodu (oczywiście im nasza witryna jest większa tym lepsze efekty uzyskamy) oraz zapewnienie kompatybilności dla wszystkich popularnych przeglądarek (większość webmasterów z pewnością zdaje sobie sprawę ile problemów może dostarczyć choćby sam Internet Explorer w wersji 6).

Tworząc kod w oparciu o jQuery używamy specjalnej konstrukcji:

$()

Jest to specjalna funkcja, dzięki której w jQuery możemy zrobić praktycznie wszystko (czynności jakie możemy wykonać przy jej pomocy, zależą od przekazanych argumentów). Wywołanie powyższej funkcji możemy zapisać również w taki sposób:

jQuery()

Oczywiście przed wywołaniem funkcji w jakiejkolwiek postaci należy najpierw dołączyć bibliotekę jQuery w sekcji HEAD naszej strony WWW:

<script type='text/javascript' src='jquery.js' />

W kolejnych kilku akapitach przyjrzymy się kilku podstawowym zastosowaniom jQuery.

Wyszukiwanie elementów na stronie przy pomocy jQuery

Wyszukiwanie elementów na stronie w oparciu o DOM jest w tym wypadku bardzo proste. Przykładowo jeśli chcemy odnaleźć wszystkie akapity tekstu skorzystamy z następującego polecenia:

$('p');

Powyższa linijka zwróci nam tablicę wszystkich elementów p. Chcemy znaleźć element o określonym id? Nic prostszego:

$('#uniqueid');

Powyższy zapis zwróci uchwyt do elementu o atrybucie id zawierającym wartość uniqueid (warto zwrócić uwagę na znak #, który informuje jQuery, że chodzi tutaj o id o wskazanej przez nas wartości). Oczywiście jQuery nie ogranicza się do tak prostych wyszukiwań. Załóżmy teraz, że mamy tabelę o id mytable i chcemy odnaleźć wszystkie elementy tr należące tylko i wyłącznie do tej tabeli. Możemy tego dokonać w sposób następujący:

$('#mytable tr');

jQuery posiada również zestaw gotowych filtrów, którą pozwalają na łatwe wyszukiwanie grup określonych elementów. Np. jeśli chcemy odnaleźć na stronie wszystkie elementy input typu text wykorzystamy następujący filtr:

$(':text');

Oczywiście powyższy filtr można wykorzystać np. dla tabeli o określonym id itp. Pełną listę selektorów można znaleźć tutaj (materiał w języku angielskim).

Modyfikacja elementów przy pomocy jQuery

Skoro już umiemy odnaleźć dowolny element na stronie WWW czas wykorzystać te wiedzę w praktyce. W niniejszym punkcie poznamy kilka technik, które umożliwią nam modyfikację właściwości odnalezionego elementu (lub elementów). Dla uproszczenia przyjmijmy, że wszystkie operacje odnosić się będą do akapitów (p).

Modyfikacja reguł CSS

Za pomocą jQuery możemy dodać nową regułę CSS do dowolnego elementu. Zasada działania tego mechanizmu jest taka sama jak w przypadku dodania atrybutu style dla określonego elementu. Spójrzmy na poniższy przykład:

$('p').css('font-size', '12px');

Powyższy zapis spowoduje dodanie dla wszystkich elementów akapitu, reguły mówiącej o wielkości czcionki równej 12 pikseli. Możemy w ten sposób dodać dowolną regułę poprzez analogię: pierwszy argument funkcji css to nazwa reguły, a drugi to jej wartość.

Dodawanie klas CSS

Oprócz modyfikacji reguł CSS, do elementu możemy dodać nową klasę, która zawiera cały zestaw nowych reguł. Aby tego dokonać, wystarczy posłużyć się poleceniem przedstawionym na poniższym listingu:

$('p').addClass('mycssclass');

Ważną informacją na jaką warto w tym przypadku zwrócić uwagę jest to, że jQuery jest biblioteką inteligentną oznacza to, że jeśli taka klasa w danym elemencie została prędzej dodana to nic się nie stanie, jeśli ktoś spróbuje dodać ją ponownie.

Usuwanie klas CSS

Skoro możemy dodawać nowe klasy musi istnieć również opcja usuwania istniejących klas. I tak też jest w istocie. Spójrzmy na poniższy przykład:

$('p').removeClass('mycssclass');

Podobnie jak polecenie dodawania, funkcja usuwająca również została zabezpieczona. Oznacza to, że jeśli klasa przeznaczona do usunięcia nie będzie istnieć, to nie wyskoczy żaden błąd.

Dodawanie/modyfikacja atrybutów

Do naszych akapitów możemy dodawać również nowe atrybuty i to obojętnie czy będzie to atrybut istniejący w specyfikacji HTMLa czy też atrybut wymyślony na nasze potrzeby. Dodajmy do każdego z naszych akapitów atrybut testattr, który prawdopodobnie nie będzie miał żadnej istotnej funkcji, ale pokaże nam sposób działania tego mechanizmu:

$('p').attr('testattr', 'test');

Jeśli dany element będzie posiadał atrybut testattr to jego wartość zostanie nadpisana. W przeciwnym wypadku odpowiedni atrybut zostanie utworzony.

Usuwanie atrybutów

Usuwanie atrybutów jest równie proste. Wystarczy zastosować polecenie:

$('p').removeAttr('testattr');

Aby usunąć atrybut testattr. Oczywiście funkcja ta jest odpowiednio zabezpieczona i jeśli taki atrybut nie będzie istniał to nie spowoduje ona żadnego błędu.

Modyfikacja zawartości elementów

W przypadku akapitów oraz kilku innych znaczników możemy za pomocą jQuery zmieniać ich zawartość tekstową. Aby to uczynić wykorzystamy funkcję html(). Modyfikacja zawartości wszystkich elementów byłaby co najmniej dziwna dlatego możemy zrobić to dla jednego określonego akapitu, który załóżmy że posiada id o wartości uniquepar:

$('#uniquepar').html('nowa treść akapitu');

Funkcja html ma jeszcze jedną ciekawą właściwość. Otóż jeśli zastosujemy ją bez podawania wartości argumentu, to zwróci ona bieżącą wartość wybranego elementu.

Dodawanie treści za pomocą jQuery

Wiemy już jak wyszukiwać elementy, jak modyfikować ich właściwości, zawartość, najwyższy czas by dowiedzieć się o tym w jaki sposób można dodać nowe elementy do naszej strony WWW. Wyobraźmy sobie, że chcielibyśmy dodać do naszej tabeli o id mytable nowy wiersz. Za pomocą jQuery nie jest to specjalnie trudne. Kluczem do zwycięstwa jest funkcja append(). Przykład zastosowania tej metody został zilustrowany na poniższym listingu:

$('#mytable').append('<tr><td>1 komórka...</td><td>2 komórka...</td></tr>');

Podsumowanie

Niniejszy artykuł zaprezentował tylko mały wycinek funkcji dostępnych w jQuery (pełną dokumentację można znaleźć na stronie projektu). Niewątpliwie jest to bardzo pożyteczna biblioteka i przy odrobinie praktyki może w znaczący sposób usprawnić tworzenie naszego kodu. Oczywiście zawsze należy zadać sobie pytanie, czy nasza strona jest na tyle duża by warto było podpinać dodatkowe biblioteki, czy może wystarczy kilka poleceń w klasycznym JavaScripcie.

Data ostatniej modyfikacji: 05.06.2011, 17:23.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus