Newsletter

Grupa MagazynyInternetowe

Online: 972

Wyszukiwarka

AJAX, jQuery

AJAX Kurs od podstaw - jQuery

AJAX Kurs od podstaw - jQuery Biblioteka jQuery pozwala na operowanie drzewem DOM dokumentu przy użyciu zestawu selektorów. Elementy HTML wskazane odpowiednimi selektorami wzbogacamy o obsługę zdarzeń, wykorzystując do tego zestaw metod. Dzięki temu osiągamy pełną separację kodu HTML od JavaScriptu, a implementacja takich rozwiązań jak ajaksowe menu bez przeładowania lub ajaksowa wyszukiwarka bez przeładowania zajmuje zaledwie kilka linijek kodu.

Włodzimierz Gajda

1 2 3 4 5 6 7 »

Cechy jQuery, Podstawy

Cechy jQuery

Zasadniczą zaletą biblioteki jQuery jest oddzielenie struktury dokumentu (tj. XHTML) od zachowania (tj. JavaScript). Strona WWW, która stosuje jQuery nie zawiera w kodzie HTML żadnych zdarzeń, a jedynie elementy XHTML ewentualnie wzbogacone o identyfikatory oraz klasy. Obsługę zdarzeń elementów HTML definiujemy całkowicie w Java-Scripcie, wykorzystując do tego funkcje i metody biblioteki jQuery.

Pierwszym etapem pracy jest wskazanie o który element HTML chodzi. Zadanie to realizujemy przy użyciu selektorów. Szczególnie wygodne są selektory, których składnia jest identyczna ze składnią selektorów CSS. Dzięki temu korzystanie z jQuery jest wygodne i naturalne.

Po wybraniu elementów odpowiednim selektorem przechodzimy do zdefiniowania zachowania elementu. Do tego służą metody klasy jQuery. Zapewniają one łatwy dostęp do zawartości, atrybutów oraz zdarzeń elementu lub elementów wybranych przy użyciu selektora. Co ciekawe, w przypadku gdy selektor pasuje do wielu elementów, wszystkie pasujące elementy będą przetwarzane iteracyjnie.

Warto zwrócić uwagę na fakt, że asynchroniczne pobieranie dokumentów przy użyciu Ajaksa sprowadza się do wywołania jednej metody, load(), której parametrem jest adres URL pobieranego dokumentu.

Naukę jQuery podzielimy na kilka następujących części:

  • uruchomienie i analiza pierwszego skryptu,
  • selektory CSS,
  • wymiana treści i wyglądu,
  • zdarzenia,
  • zagadnienia dodatkowe.

Całość zakończy się omówieniem dwóch przykładów praktycznych: menu, które działa bez przeładowania dokumentu, oraz wyszukiwarki.

Prezentowany opis nie wyczerpuje wszystkich możliwości jQuery. Pełna dokumentacja, tutoriale, przykłady oraz najnowszą wersję biblioteki jQuery znajdziemy na stronie http://jquery.com.

Podstawy

Pierwszy dokument HTML stosujący jQuery

Biblioteka jQuery jest dołączana do stron WWW jako zewnętrzny plik JavaScript, a zatem nie wymaga instalacji żadnego oprogramowania. Po dołączeniu do dokumentu HTML pliku jquery-1.2.3.js uzyskujemy dostęp do obiektów i metod biblioteki jQuery.

Zasadniczą rolę odgrywa metoda ready() klasy jQuery. Jest ona wywoływana po kompletnym załadowaniu strony, a zatem w jej treści możemy operować pełnym modelem DOM dokumentu. Wewnątrz funkcji ready() definiujemy anonimową funkcję, która zostanie wywołana po zakończeniu ładowania dokumentu. W treści anonimowej funkcji możemy umieścić dowolny kod, np. wywołanie okna informacyjnego alert():

[+]
 
HTML
Pobierz 
 1. <html>
 2.    <head>
 3.       <title>Przykład 1-1</title>
 4.       <script type="text/javascript" src="jquery-1.2.3.js"></script>
 5.       <script type="text/javascript">
 6.       $(document).ready(function(){
 7.          alert('Witaj');
 8.       });
 9.       </script>
10.    </head>
11. <body>
12. <p>Lorem ipsum dolor sit amet!</p>
13. </body>
14. </html>
27 sierpnia 2008
1 2 3 4 5 6 7 »

1. Cechy jQuery, Podstawy
2. Podstawy c.d.
3. Selektory CSS
4. Zmiana treści i wyglądu, Zdarzenia
5. Zagadnienia dalsze
6. Menu
7. Menu c.d., Wyszukiwarka

Powiązane publikacje

Jak działa AJAX?

Jak działa AJAX?

AjaXplorer

AjaXplorer

jQuery - od czego zacząć

jQuery - od czego zacząć

AJAX Kurs od podstaw - wymiana fragmentu strony

AJAX Kurs od podstaw - wymiana fragmentu strony

 
AJAX Kurs od podstaw - wyszukiwarka

AJAX Kurs od podstaw - wyszukiwarka

AJAX Kurs od podstaw - interaktywne aplikacje WWW

AJAX Kurs od podstaw - interaktywne aplikacje WWW

 
Skomentuj
ten artykuł

Komentarzy: 6

Kod obrazkowy
(Kliknij, aby zmienić)
 
Przejdż do tego postu na forum Saturday, 24.04.2010 08:43Mex

@butterflydaniel
Klasy zaczynaj od liter a nice cyfer

Przejdż do tego postu na forum Saturday, 9.01.2010 19:18ms

a gdzie tu AJAX?

Przejdż do tego postu na forum Tuesday, 25.08.2009 11:34friv

Mała sugestia dotycząca tego menu ajaxowego:
zamiast przygotowywać 4 pliki:
1. abba.html
2. fragment-abba.html
3. ac_dc.html
4. fragment-ac_dc.html
a podczas ładowania treści dołączać do adresu słowo fragment:
3. $('#content').load(
4. 'fragment-' + $(this).attr('href')
5. );
wystarczy mieć 2 strony(abba.html, ac_dc.html), w których żądana treść będzie w odpowiednim znaczniku (np. div z jakimś id, np. "tresc").
Wtedy w funkcji load można podać jaki znacznik ma być odczytany(nie trzeba ładować całej strony, można fragmenty):
3. $('#content').load(
4. $(this).attr('href')+" div#tresc"
5. );

Przejdż do tego postu na forum Friday, 23.01.2009 00:26butterflydaniel

Swietny tutorialik, po przeczytaniu od razu zabralem sie za pisanie kodu, lecz natknelem sie na dosc ciekawy problem i nie mam pojecia dlaczego to tak dziala, a wlasciwie nie dziala

mamy plik d.html

<html>
<head>
<title>Przykład 1-1</title>
<script type="text/javascript" src="./JQ.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#111 .b').click(function(){
$('#111').load('z.html');
});
$('#222 .c').click(function(){
alert('cos tam');
});
});
</script>
</head>
<body>
<p id="111">
<a class="b">klasa b</a>
</p>
<p id="222">
<a class="c">klasa c</a>
</p>
</body>
</html>

oraz plik z.html

<p id="222"><a class="c">klasa c</a></p>

Dlaczego po wczytaniu z.html do <p id="1111"> , wpisany tag nie jest obslugiwany przez jQuery?

W pliku glownym jest identyczny tag jak z pliku z.html i jest on caly czas obslugiwany przez jQuery.

Przejdż do tego postu na forum Thursday, 28.08.2008 09:55gajdaw

CYTAT(jj @ 27.08.2008)
Nie wiedziałem jak się skontaktować, dlatego piszę tutaj... Panie Włodzimierzu, informuję że od kilku tygodni na gajdaw.pl nie działają css-y i obrazki... URL-e z kodu strony zwracają Access Forbidden + 404.

Serdecznie pozdrawiam i dziękuję za pańskie świetne artykuły.



Serdeczne dzięki za info.
W związku z ogromnym transferem jaki generowała witryna gajdaw.pl podjąłem różne działania zapobiegawcze.

W celu ochrony pasma m.in. blokuję żądania z niewypełnionym polem referer.
(Kilku wesołych allegrowiczów wstawiało sobie różne moje obrazki do aukcji :-))

Chętnie porozmawiam o szczegółach problemów.
Może coś wspólnie wymyślimy?

Proszę o list na gajdaw@kul.lublin.pl

pzdr,
gajdaw

Przejdż do tego postu na forum Wednesday, 27.08.2008 00:54jj

Nie wiedziałem jak się skontaktować, dlatego piszę tutaj... Panie Włodzimierzu, informuję że od kilku tygodni na gajdaw.pl nie działają css-y i obrazki... URL-e z kodu strony zwracają Access Forbidden + 404.

Serdecznie pozdrawiam i dziękuję za pańskie świetne artykuły.

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

Pozostałe publikacje

Jak działa AJAX?

Jak działa AJAX?

Strony dynamicznie wymieniające dane z serwerem od kilku lat zdobywają coraz większą popularność. Przyjrzyjmy się jak działają teraz i co będą potrafiły po wejściu HTML-a 5.

Załączniki

Newsletter

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