AJAX Kurs od podstaw - jQuery

Zmiana treści i wyglądu, Zdarzenia

Zmiana treści i wyglądu

Dostęp do treści elementu

Dostęp do treści elementu zapewnia metoda html(). Wywołana bez parametru zwraca bieżącą treść elementu. Wywołana z parametrem ustala nową treść.

Jeśli metodę html() wywołamy na rzecz klikniętego akapitu, wówczas kliknięcie akapitu będzie powodowało zmianę treści elementu:

[+]

[-]

 

 

 

1. $(document).ready(function(){
2.    $('p').click(function(){
3.       $(this).html('one, two, ...');
4.    });
5. });
6. ----------------------------
7. <p>Lorem</p>

Listing zwinięty - 7 linii

Dostęp do klikniętego akapitu wewnątrz metody click umożliwia this - referencja do obiektu, który wygenerował zdarzenie.

Zmiana stylu

Styl elementu zmienimy metodą css(), która pobiera dwa parametry: nazwę właściwości oraz wartość:

[+]

[-]

 

 

 

1. $(document).ready(function(){
2.    $('p').click(function(){
3.       $(this).css('color', 'yellow');
4.    });
5. });
6. ----------------------------
7. <p>Lorem</p>

Listing zwinięty - 7 linii

Wadą powyższego rozwiązania jest połączenie dwóch języków: CSS oraz JavaScript. Wygodniej będzie do zmiany formatu wykorzystać klasy CSS oraz metody addClass() i removeClass().

Dodanie i usunięcie klasy

Każdy element wybrany selektorem możemy dynamicznie wzbogacić o klasę. Umożliwia to metoda addClass(). Poniższy przykład jest rozbity na trzy języki: CSS, JavaScript oraz HTML:

[+]

[-]

 

 

 

 1. .inny {
 2.    color: yellow;
 3. } ----------------------------
 4. $(document).ready(function(){
 5.    $('p').click(function(){
 6.       $(this).addClass('inny');
 7.    });
 8. });
 9. ----------------------------
10. <p>Lorem</p>

Listing zwinięty - 10 linii

Aby usunąć klasy wywołujemy removeClass():

[+]

[-]

 

 

 

 1. .inny {
 2.    color: yellow;
 3. } ----------------------------
 4. $(document).ready(function(){
 5.    $('p.inny').click(function(){
 6.       $(this).removeClass('inny');
 7.    });
 8. });
 9. ----------------------------
10. <p>Lorem</p>

Listing zwinięty - 10 linii

Zdarzenia

Biblioteka jQuery zapewnia dostęp do pełnego zestawu zdarzeń HTML. Na przykład obsługę zdarzeń onmouseover oraz onmouseout zdefiniujemy metodami mouseover() oraz mouseout():

[+]

[-]

 

 

 

 1. .inny {
 2.    color: yellow;
 3. } ----------------------------
 4. $(document).ready(function(){
 5.    $('p').mouseover(function(){
 6.       $(this).addClass('inny');
 7.    });
 8.    $('p').mouseout(function(){
 9.       $(this).removeClass('inny');
10.    });
11. });
12. ----------------------------
13. <p>Lorem</p>

Listing zwinięty - 13 linii

zaś zdarzenie ondblclick metodą dblclick():

[+]

[-]

 

 

JavaScript

1. $(document).ready(function(){
2.    $('p').dblclick(function(){
3.       $(this).css('text-decoration', 'underline');
4. });
5. });
6. ----------------------------
7. <p>Lorem</p>

Listing zwinięty - 7 linii

Duża część funkcji odpowiedzialnych za zdarzenia może być wywoływana na dwa sposoby. Pierwszym sposobem jest wywołanie z parametrem, którym jest funkcja:

[+]

[-]

 

 

JavaScript

1. $('p').click(function(){
2.    ...
3. });

Listing zwinięty - 3 linii

Takie wywołanie definiuje funkcję obsługi zdarzenia. Drugi sposób wywołania to wywołanie bezparametrowe: $('p').click();. Powoduje ono uruchomienie zdarzenia (ang. trigger).

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