AJAX, jQuery

AJAX Kurs od podstaw - jQuery

Podstawy c.d.

Obsługa zdarzenia onclick elementu p

Wspomniana na początku separacja zachowania (tj. JavaScript) od struktury (tj. HTML) polega na tym, że wewnątrz elementu body nie występują żadne zdarzenia JavaScript. Zdarzenie onclick akapitu p, które w tradycyjnym dokumencie HTML/JavaScript opisalibyśmy jako:

JavaScript

<p onclick="alert('Witaj')">Lorem</p>

przy użyciu jQuery definiujemy stosując selektor 'p' oraz metodę click(), w której umieszczamy wywołanie funkcji alert():

[+]

HTML

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

Listing zwinięty - 16 linii

Składnia jQuery

Zagadkowo wyglądający $ w kodzie powyższych przykładów jest aliasem do funkcji o nazwie jQuery(). Powyższy przykład możemy zapisać jako:

[+]

HTML

 1. <html>
 2.    <head>
 3.       <title>Przykład 1-3</title>
 4.       <script type="text/javascript" src="jquery-1.2.3.js"></script>
 5.       <script type="text/javascript">
 6.       jQuery(document).ready(function(){
 7.          jQuery('p').click(function(){
 8.             alert('Witaj');
 9.          });
10.  
11.       });
12.       </script>
13.    </head>
14. <body>
15. <p>Lorem ipsum dolor sit amet!</p>
16. </body>
17. </html>

Listing zwinięty - 17 linii

W odróżnieniu od Pascala czy C++ w języku JavaScript znak $ jest dozwolony w identyfikatorach funkcji.

Analizując składnię powyższego przykładu powiemy, że w skrypcie występuje funkcja jQuery() wywołana z parametrem document:

JavaScript

jQuery(document)

Funkcja ta zwraca obiekt, na rzecz którego wywołujemy metodę ready:

[+]

JavaScript

1. jQuery(document).ready(
2.    ...
3. );

Listing zwinięty - 3 linii

Parametrem metody ready() jest funkcja anonimowa, tj. taka, która nie otrzymała nazwy. Jej definicja występuje w miejscu wywołania:

[+]

JavaScript

1. function(){
2. }

Listing zwinięty - 2 linii

W treści funkcji może występować dowolny kod. W powyższym przykładzie było to wywołanie funkcji jQuery() z parametrem 'p'. Zwróconemu obiektowi wywołaliśmy metodę click(), której parametrem jest funkcja anonimowa wywołująca okno dialogowe alert():

[+]

JavaScript

1. jQuery('p').click(function(){
2.    alert('Witaj');
3. });

Listing zwinięty - 3 linii

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?

AjaXplorer

jQuery - od czego zacząć

AJAX Kurs od podstaw - wymiana fragmentu strony

AJAX Kurs od podstaw - wyszukiwarka

AJAX Kurs od podstaw - interaktywne aplikacje WWW

Skomentuj
ten artykuł

Komentarzy: 6

Saturday, 24.04.2010 08:43Mex

@butterflydaniel
Klasy zaczynaj od liter a nice cyfer

Saturday, 9.01.2010 19:18ms

a gdzie tu AJAX?

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. );

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.

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

Wednesday, 27.08.2008 00:54jj

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

» Efektowna wyszukiwarka Google na twojej...
[INTERNET Maker]
» Ćwiczenia w programowaniu aplikacji...
[INTERNET Maker]
» MathML - matematyka na stronach WWW
[INTERNET Maker]
» Propel - porady jak rozwiązać podstawowe...
[INTERNET Maker]
» Poznaj Yahoo! API
[INTERNET Maker]

Pozostałe publikacje

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

» Plik jquery-1.2.3.js (94,50 kB)
» Plik jquery-1.2.3.min.js (52,81 kB)

Polecamy:

Na skróty:

Nasze serwisy:

AJAX, jQuery

AJAX Kurs od podstaw - jQuery

Podstawy c.d.

Obsługa zdarzenia onclick elementu p

Składnia jQuery

Autor

Włodzimierz Gajda

Pozostałe publikacje

Jak działa AJAX?

Załączniki

Newsletter