Blog Leszczynowa

AJAX, jQuery

AJAX Kurs od podstaw - jQuery

« 1 2 3 4 5 6 7 »

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
Pobierz 
<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
Pobierz 
 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>

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
Pobierz 
 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>

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
Pobierz 
jQuery(document)

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

[+]
 
JavaScript
Pobierz 
1. jQuery(document).ready(
2.    ...
3. );

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

[+]
 
JavaScript
Pobierz 
1. function(){
2. }

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
Pobierz 
1. jQuery('p').click(function(){
2.    alert('Witaj');
3. });
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

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: 5

Kod obrazkowy
(Kliknij, aby zmienić)
 
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

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.

Załączniki

Newsletter

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