AJAX Kurs od podstaw - jQuery

Zagadnienia dalsze

Automatyczna iteracja

Jak już zostało powiedziane, selektor jQuery obejmuje swoim działaniem wszystkie wybrane elementy. Jeśli użyjemy selektora li:

[+]

[-]

 

 

 

 1. $(document).ready(function(){
 2.    $('li').css('color', 'blue');
 3. });
 4. ----------------------------
 5. <ul>
 6.    <li>one</li>
 7.    <li>two</li>
 8.    <li>three</li>
 9.    <li>four</li>
10. </ul>

Listing zwinięty - 10 linii

to przetwarzaniu będą podlegały wszystkie elementy listy. Każdy z nich stanie się niebieski. Nie wpisujemy ręcznie żadnej iteracji (np. pętli for). Jest ona wykonywana podobnie jak w CSS automatycznie dla wszystkich elementów pasujących do selektora.

Kaskada

Większość metod jQuery zwraca w wyniku obiekt jQuery. Pozwala to na tworzenie kaskadowych wywołań metod:

[+]

[-]

 

 

JavaScript

 1. $(document).ready(function(){
 2.    $('li').css('color', 'yellow').append('- read more').css('background',
    'black');
 3. });
 4. ----------------------------
 5. <ul>
 6.    <li>one</li>
 7.    <li>two</li>
 8.    <li>three</li>
 9.    <li>four</li>
10. </ul>

Listing zwinięty - 10 linii

Powyższy kod jQuery możemy równoważnie zapisać jako trzy osobne wywołania:

[+]

[-]

 

 

JavaScript

1. $('li').css('color', 'yellow');
2. $('li').append(' - read more');
3. $('li').css('background', 'black');

Listing zwinięty - 3 linii

Odczyt atrybutów

Dostęp do atrybutów zapewnia metoda attr(), której parametrem jest nazwa atrybutu HTML:

[+]

[-]

 

 

JavaScript

 1. $(document).ready(function(){
 2.    $('input').focus();
 3.    $('input').keyup(function(){
 4.       $('div').html($('input').attr('value'));
 5.    });
 6. });
 7. ----------------------------
 8. <form action="#" method="post">
 9.       <input type="text" name="imie" value="" />
10. </form>
11. <div></div>

Listing zwinięty - 11 linii

Wywołanie:

 

 

JavaScript

$('input').attr('value')

odczytuje atrybut value elementu input:

 

 

HTML

<input name="" value="" />

Pierwsza instrukcja:

 

 

JavaScript

$('input').focus();

uruchamia zdarzenie onfocus dla elementu input. Dzięki niej bezpośrednio po otworzeniu dokumentu w przeglądarce kursor będzie znajdował się w polu edycyjnym formularza.

Ajax, czyli asynchroniczne ładowanie pliku

Do załadowania zewnętrznego pliku służy load():

[+]

[-]

 

 

 

1. $(document).ready(function(){
2.    $('#content').load('lorem.html');
3. });
4. ----------------------------
5. <div id="content"></div>

Listing zwinięty - 5 linii

Działa ona w oparciu o obiekt XMLHttpRequest. Dokument, którego adres URL jest podany jako parametr jest pobierany asynchronicznie w tle (Ajax).

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