Blog Leszczynowa

Framework, JavaScript, jQuery

Framework jQuery - JavaScript nie boli

Framework jQuery - JavaScript nie boli jQuery jest lekkim i łatwym w użyciu frameworkiem, który sprawia, że tworzenie aplikacji w JavaScript staje się przyjemnością. Koniec z ciągnącymi się liniami kodu i obchodzeniem błędów przeglądarek. Dzięki prostej składni jQuery szybko odkryjesz ogromne możliwości frameworka i osiągniesz w szybki sposób to, co wcześniej wymagało dużo więcej pracy.

Piotr Arendt

1 2 3 4 »

Naturalnie jQuery nie oferuje nic więcej poza tym, co dałoby się uzyskać w "czystym" JavaScripcie. Jednakże jego potęga polega na tym, że proces dochodzenia do zamierzonych efektów jest tu skracany do minimum. jQuery zawiera wbudowane narzędzia i metody do intuicyjnego poruszania się po drzewie DOM i manipulowania jego elementami, łatwego przechwytywania zdarzeń i interakcji z użytkownikiem, a także do tworzenia prostych animacji. Oraz - nie mogłoby tego zabraknąć - do w pełni bezbolesnej implementacji rozwiązań AJAX-owych.

Dodatkowo łatwość tworzenia rozszerzeń zwiększających standardową funkcjonalność biblioteki sprawiła, że mamy dziś potężną ilość rozmaitych wtyczek do jQuery. Na pewno znajdziesz wśród nich te najlepiej odpowiadające twoim potrzebom. Zawsze możesz także napisać własne rozszerzenie.

Nie musisz również martwić się o to, by rezultaty twojej pracy były poprawnie wyświetlane w różnych przeglądarkach internetowych. Dzięki zastosowaniu jQuery, w zdecydowanej większości przypadków efekty będą jednakowe. Wynika to z faktu, że wszelkie różnice w implementacji Java- Scriptu są niwelowane po stronie biblioteki.

Nowoczesne strony internetowe cechują się pełnym oddzieleniem struktury dokumentu (tj. zawartości) od warstwy prezentacyjnej (CSS) i zachowania (JavaScript). Tak jak za wizualne ostylowanie dokumentu odpowiedzialne są dołączane pliki CSS, tak za wszystkie akcje użytkownika powinny odpowiadać zewnętrzne skrypty, których wywołania nie będą opisane wewnątrz zawartości dokumentu. Unikniemy tym samym dodawania wszelakich atrybutów "onclick" czy "onmouseover" do tagów XHTML.

jQuery wspiera takie podejście. Obsługę zdarzeń deklarujemy w kodzie JavaScript, a elementy XHTML wybieramy na podobnej zasadzie, jak ma to miejsce w CSS. Zanim przejdziemy do konkretnych przykładów prezentujących bogate możliwości jQuery, pozwól, że zaczniemy od podstaw.

Oddaję DOM do dyspozycji

Najprostsze wywołanie jQuery przedstawia się następująco:

[+]
 
HTML
Pobierz 
 1. <html>
 2. <head>
 3. <script type="text/javascript"src="jquery.js"></script>
 4. <script type="text/javascript">
 5. $(document).ready(function() {alert('Hej, ja działam!');
 6. });
 7. </script>
 8. </head>
 9. <body>
10. <h1>jQuery - przykład 1.1</h1>
11. </body>
12. </html>

W sekcji head dołączamy aktualną wersję biblioteki, dostępną do pobrania ze strony projektu. Tajemniczy symbol dolara, od którego zaczyna się nasz skrypt, jest krótszym zapisem funkcji o nazwie jQuery(). Dzięki niej zwracany jest nam obiekt, z którym możemy coś zrobić. Będzie to najczęściej wykorzystywana przez nas funkcja.

Idąc dalej, metoda ready() wywołana na obiekcie document przyjmuje jako argument funkcję, która wystartuje zaraz po tym, jak drzewo elementów dokumentu (DOM) zostanie załadowane.

Efektem tego będzie wyświetlenie okna powiadomienia z napisem "Hej, ja działam!". Zwróć uwagę, że może to nastąpić wcześniej, niż gdyby funkcja ta miała być wywoływana zdarzeniem onload. Nasze rozwiązanie posiada dużą przewagę nad tym drugim.

Jak może wiesz, funkcje wywoływane zdarzeniem onload (przypisanym zazwyczaj do elementu body) czekają ze swoim startem, aż załadują się wszystkie elementy dołączone do dokumentu (w tym np. elementy graficzne), które mogą pobierać się wystarczająco długo, aby zauważalnie opóźnić załadowanie się skryptów. Zdecydowanie lepiej jest, gdy nasze funkcje wywoływane są od razu po tym, jak DOM jest do dyspozycji (czyli wtedy, kiedy załaduje się sam kod XHTML) - i na to też pozwala jQuery.

Wracając do naszego przykładu, skoro mamy już załadowane drzewo dokumentu, nie sposób z tego nie skorzystać. Zmodyfikujmy więc nieco nasz kod:

[+]
 
JavaScript
Pobierz 
1. $(document).ready(function() {
2. $('h1').click(function() {
3. alert('Hej, ja działam!');
4. });
5. });

Właśnie wybraliśmy element h1, stworzyliśmy na jego podstawie obiekt, a następnie do metody click() przypisaliśmy znajomą już funkcję. Da to taki sam efekt, jak gdybyśmy napisali:

 
 
HTML
Pobierz 
<h1 onclick="alert('Hej, ja działam!')">jQuery - przykład 1.2</h1>

Lepiej jednak pozostawić obsługę zdarzeń jQuery. Nasz skrypt przechwytuje zdarzenie onclick odnoszące się do elementu h1 i kiedy ono nastąpi, wywołuje zdefiniowaną funkcję.

Prostota i bogactwo możliwości

Filozofia jQuery opiera się na zasadzie "znajdź element i zrób coś z nim". Ten styl pisania kodu jest tak intuicyjny, że sposób, w jaki dochodzimy do pewnych rozwiązań, wydaje się w pełni naturalny. Prześledźmy poniższy przykład:

[+]
 
JavaScript
Pobierz 
1. $(document).ready(function() {
2. $('#owoce tr:odd td').addClass('zebra');
3. });
[+]
 
HTML
Pobierz 
 1. <h1>jQuery - przykład 2.1</h1>
 2. <table id="owoce">
 3. <tr>
 4. <th>owoc</th>
 5. <th>sztuk</th>
 6. </tr>
 7. <tr>
 8. <td>jabłko</td>
 9. <td>3</td>
10. </tr>
11. <tr>
12. <td>mango</td>
13. <td>12</td>
14. </tr>
15. <tr>
16. <td>banan</td>
17. <td>7</td>
18. </tr>
19. <tr>
20. <td>kiwi</td>
21. <td>20</td>
22. </tr>
23. <tr>
24. <td>gruszka</td>
25. <td>15</td>
26. </tr>
27. </table>

Wybraliśmy tutaj wszystkie komórki (td) z nieparzystych wierszy (tr:odd) należących do tabeli o identyfikatorze "owoce", a następnie nadaliśmy każdej z nich klasę "zebra", dla której w CSS odnosi się reguła:

[+]
 
CSS
Pobierz 
1. td.zebra {
2. background-color: #efe;
3. }

Prawda, że proste? Gwoli wyjaśnienia, addClass() jest jedną z metod jQuery, a jej zadanie polega na przypisaniu danemu elementowi klasy CSS. Więcej o metodach dowiesz się w dalszej części artykułu. Warto zwrócić uwagę, że wybrane wiersze tabeli nie są wizualnie nieparzyste, lecz mają nieparzyste indeksy w kolekcji zgromadzonych przez jQuery pasujących elementów (skrypt oznaczył pierwszy wiersz indeksem 0, drugi - 1, trzeci - 2, itd.).

Przeglądarka na bieżąco aktualizuje zmiany w DOM. Innymi słowy, po załadowaniu dokumentu, tabela została zmodyfikowana w sposób zaprezentowany na poniższym listingu:

[+]
 
HTML
Pobierz 
 1. <table id="owoce">
 2. <tr>
 3. <th>owoc</th>
 4. <th>sztuk</th>
 5. </tr>
 6. <tr class="zebra">
 7. <td>jabłko</td>
 8. <td>3</td>
 9. </tr>
10. <tr>
11. <td>mango</td>
12. <td>12</td>
13. </tr>
14. <tr class="zebra">
15. <td>banan</td>
16. <td>7</td>
17. </tr>
18. <tr>
19. <td>kiwi</td>
20. <td>20</td>
21. </tr>
22. <tr class="zebra">
23. <td>gruszka</td>
24. <td>15</td>
25. </tr>
26. </table>
26 listopada 2008
1 2 3 4 »

Powiązane publikacje

Kiedy nie używać JavaScriptu?

Kiedy nie używać JavaScriptu?

jQuery dla zaawansowanych

jQuery dla zaawansowanych

Framework Ext JS - Nowoczesne interfejsy z wykorzystaniem JavaScript

Framework Ext JS - Nowoczesne interfejsy z wykorzystaniem JavaScript

JavaScript nas kręci

JavaScript nas kręci

 
jQuery - od czego zacząć

jQuery - od czego zacząć

 
Skomentuj
ten artykuł

Komentarzy: 1

Kod obrazkowy
(Kliknij, aby zmienić)
 
Przejdż do tego postu na forum wtorek, 10.02.2009 14:38dart

Proponuję poprawić:
#stopka
i:
"element oznaczony klasą "stopka"
Pozdrawiam

Zobacz wszystkie komentarze »

Autor

Piotr Arendt

Piotr Arendt zajmuje się zawodowo kodowaniem strony użytkownika serwisów internetowych.

Jest entuzjastą dopracowanych aplikacji: schludnego kodu, przemyślanych interfejsów użytkownika i bogatego user experience. Prywatnie miłośnik zen, minimalizmu i nastrojowej muzyki.

Zobacz mnie na GoldenLine

Artykuły tego autora:

Pozostałe publikacje

10 świeżych skryptów jQuery

10 świeżych skryptów jQuery

jQuery może i jest za ciężkie, ale nie można mu odmówić mu popularności. Przedstawiamy 10 przydatnych skryptów do wykorzystania na stronach.

Newsletter

Jesli chcesz być na bieżąco z tym co się dzieje na stronie magazynu INTERNET Maker zapisz się do naszego newslettera.