Rozdział 3. Podstawy biblioteki jQuery

$(document).ready()

Swobodne manipulowanie zawartością strony możliwe jest dopiero wówczas, gdy nasz dokument jest „gotowy”. Biblioteka jQuery wykrywa ten stan gotowości za pomocą konstrukcji $(document).ready(). Umieszczony wewnątrz niej kod zostawnie wykonany wtedy, gdy strona będzie gotowa do wykonania kodu JavaScript.

Przykład 3.1. Blok $(document).ready()

$(document).ready(function() {
    console.log('gotowy!');
});

Czasem można spotkać się ze skróconą wersją bloku $(document).ready() — nie zalecam jednak jej stosowania kiedy piszesz kod dla kogoś niezaznajomionego ze specyfiką biblioteki jQuery.

Przykład 3.2. Skrócona wersja $(document).ready()

$(function() {
    console.log('gotowy!');
});

Do funkcji $(document).ready() można również zamiast funkcji anonimowej przekazać funkcję nazwaną.

Przykład 3.3. Przekazywanie nazwanej funkcji zamiast funkcji anonimowej

function gotowaFn() {
    // kod, który zostanie wykonany jak tylko dokument będzie gotowy
}

$(document).ready(gotowaFn);

Wybieranie elementów — selektory jQuery

Podstawą pracy z jQuery jest „wybieranie elementów i wykonywanie na nich operacji”. Biblioteka jQuery obsługuje większość selektorów CSS 3, a także pewną liczbę niestandardowych selektorów. Pełen wykaz dostępnych selektorów można znaleźć na stronie http://api.jquery.com/category/selectors/.

Oto kilka powszechnie stosowanych sposobów wybierania elementów.

Przykład 3.4. Wybieranie elementów wg identyfikatora

$('#mojIdentyfikator'); // pamiętaj, że identyfikatory nie mogą się powtarzać w obrębie dokumentu

Przykład 3.5. Wybieranie elementów wg nazwy klasy

$('div.mojaKlasa'); // kod będzie wydajniejszy, jeśli podamy typ elementu

Przykład 3.6. Wybieranie elementów wg atrybutu

$('input[imie_i_nazwisko= imie]'); // uwaga — to bardzo wolny sposób

Przykład 3.7. Wybieranie elementów za pomocą złożonego selektora CSS

$('#spis ul.ludzie li');

Przykład 3.8. Pseudoselektory

$('a.zewnetrzny:first');
$('tr:odd');
$('#mojFormularz :input');   // wybieramy wszystkie pola wejściowe formularza
$('div:visible');
$('div:gt(2)');        // wybieramy wszystkie elementy div za wyjątkiem trzech pierwszych
$('div:animated');     // wszystkie elementy div, które są aktualnie animowane

Oto kod jQuery, który sprawdza widoczność elementu (wyjaśnienia w komentarzach):

jQuery.expr.filters.hidden = function( elem ) {
    var width = elem.offsetWidth, height = elem.offsetHeight,
        skip = elem.nodeName.toLowerCase() === "tr";

    // does the element have 0 height, 0 width,
    // and it's not a <tr>?
    return width === 0 && height === 0 && !skip ?

        // then it must be hidden
        true :

        // but if it has width and height
        // and it's not a <tr>
        width > 0 && height > 0 && !skip ?

            // then it must be visible
            false :

            // if we get here, the element has width
            // and height, but it's also a <tr>,
            // so check its display property to
            // decide whether it's hidden
            jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
    return !jQuery.expr.filters.hidden( elem );
};

Wybór selektorów

Jednym ze sposobów na poprawienie wydajności kodu JavaScript jest wybór odpowiednich selektorów. Jeśli jesteśmy zbyt mało szczegółowi, znalezienie żądanych elementów może okazać się bardzo żmudne (przykład: uwzględnienie elementu div podczas wybierania elementów wg nazwy klasy). Ogólna zasada brzmi: jeśli tylko możesz, staraj się podpowiedzieć jQuery gdzie mogą znajdować się szukane przez ciebie elementy. Z drugiej strony nie należy jednak popadać w przesadę. Jeśli posługując się selektorem #mojaTablica th.special zaznaczymy potrzebne nam elementy, nie ma sensu korzystać ze zbyt szczegółowego selektora #mojaTablica thead tr th.special.

W bibliotece jQuery znajdziemy wiele selektorów opartych na atrybutach, które pozwolą nam, przy pomocy uproszczonych wyrażeń regularnych, dokonać wyboru w oparciu o treść dowolnych atrybutów.

// znajdź wszystkie elementy <a>, których atrybut rel
// kończy się na „cosTam”
$("a[rel$='cosTam']");

Jeśli koniecznie musimy użyć takich selektorów, mogą się one okazać przydatne, lecz są jednocześnie bardzo wolne — zdarzyło mi się kiedyś napisać oparty na atrybucie selektor, przez który strona odmówiła posłuszeństwa na dobrych kilka sekund. O ile to tylko możliwe, staraj się wybierać elementy wg nazw, identyfikatrów lub klas.

Chcesz dowiedzieć się więcej? Paul Irish utworzył świetną prezentację na temat poprawiania wydajności JavaSciriptu, w której znajdziesz kilka slajdów poświęconych wydajności selektorów.

Czy udało mi się wybrać jakieś elementy?

Kiedy już dokonałeś zaznaczenia, na pewno chciałbyś wiedzieć, czy masz na czym pracować. Możliwe, że będziesz chciał sprawdzić to w poniższy sposób:

if ($('div.foo')) { ... }

Nic to nie da. Jeśli dokonujesz wyboru przy pomocy konstrukcji $(), zawsze zwracany jest obiekt, co z kolei oznacza, że za każdym razem zwracana jest wartość true. Nawet jeśli nie udało ci się wbrać żadnych elementów, kod wewnątrz instrukcji if i tak zostanie wykonany.

Zamiast tego powinnyśmy sprawdzić własność length dokonanego wyboru — dowiemy się wówczas ile elementów zostało wybranych. Jeśli liczba elementów wynosi zero, to sprawdzając własność length przy pomocy wyrażenia logicznego otrzymamy fałsz (false).

Przykład 3.9. Sprawdzamy, czy udało nam się wybrać jakieś elementy

if ($('div.foo').length) { ... }

Zapisywanie wyborów

Każde zaznaczenie wymaga wykonania wielu linijek kodu, który nie jest przechowywany przez jQuery w pamięci podręcznej. Jeśli wybrałeś elementy, które mogą być przydatne w przyszłości, powinieneś zapisać swój wybór w zmiennej zamiast wykonywać ten sam kod wielokrotnie.

Przykład 3.10. Przechowywanie zaznaczeń w zmiennej

var $divy = $('div');

Kiedy już zapiszesz efekt wyboru w zmiennej, możesz wywołać na niej metody jQuery. Efekt będzie identyczny jak w przypadku wywoływania tych samych metod na oryginalnym selektorze.

Dopracowywanie i filtrowanie wyborów

Czasem może się zdarzyć, że wybrany zbiór zawiera więcej elementów niż potrzeba — wówczas możemy go dopracować. W bibliotece jQuery znajdziemy kilka metod, które pozwolą nam wybrać tylko żądane przez nas elementy.

Przykład 3.11. Dopracowywanie wyborów

$('div.foo').has('p');          // elementy div.foo, które zawierają akapity
$('h1').not('.bar');            // elementy h1, które nie mają klasy bar
$('ul li').filter('.current');  // pozycje z nieuporządkowanej listy o klasie current
$('ul li').first();             // pierwsza pozycja z nieuporządkowanej listy
$('ul li').eq(5);               // szósta pozycja

Wybieranie elementów formularza

W bibliotece jQuery znajdziemy kilka pseudoselektorów, które ułatwiają znajdowanie elementów formularzy. Pseudoselektory te są szczególnie przydatne, ponieważ za pomocą standardowych selektorów CSS trudno rozróżnić elementy na podstawie ich stanu czy typu.

:button

Wybiera elementy button oraz elementy oznaczone jako type="button"

:checkbox

Oznacza pola wejściowe oznaczone jako type="checkbox"

:checked

Oznacza wszystkie pola wejściowe, które zostały zaznaczone

:disabled

Wybiera elementy dezaktywowane

:enabled

Wybiera aktywne elementy formularza

:file

Wybiera pola wejściowe oznaczone jako type="file"

:image

Wybiera pola wejściowe oznaczone jako type="image"

:input

Wybiera elementy input, textarea oraz select

:password

Wybiera pola wejściowe oznaczone jako type="password"

:radio

Wybiera pola wejściowe oznaczone jako type="radio"

:reset

Wybiera pola wejściowe oznaczone jako type="reset"

:selected

Wybiera opcje, które zostały zaznaczone

:submit

Wybiera pola wejściowe oznaczone jako type="submit"

:text

Wybiera pola wejściowe oznaczone jako type="text"

Przykład 3.12. Korzystanie z pseudoselektorów związanych z formularzami

$('#mojFormularz :input'); // pozyskuje wszystkie elementy, które akceptują dane wejściowe

Korzystanie z wybranych elementów

Kiedy już dokonaliśmy wyboru elementów, możemy na nim wywołać metody. Ogólnie wyróżnia się dwa typy metod: pobierające i ustawiające. Metody pobierające zwracają własność pierwszego wybranego elementu, a metody ustawiające, jak sama nazwa wskazuje, ustawiają własność wspólną dla wszystkich wybranych elementów.

Łączenie wywołań metod w łańcuchy

Jeśli wywołasz na wyborze metodę, która zwraca obiekt jQuery, możesz kontynuować wywoływanie metod jQuery na tym obiekcie bez potrzeby dodawania średnika po każdej z nich.

Przykład 3.13: Tworzenie łańcucha wywołań

$('#tresc').find('h3').eq(2).html('nowa treść dla trzeciego nagłówka h3!');

Jeśli w twoim łańcuchu znajduje się kilka kroków do wykonania, możesz odnieść wrażenie (podobnie jak każdy, kto przejmie po tobie pracę), że przełamanie łańcucha na kilka linijek zwiększy czytelność kodu.

Przykład 3.14. Formatowanie łańcuchów wywołań

$('#tresc')
    .find('h3')
    .eq(2)
    .html('nowa treść dla trzeciego nagłówka h3!');

Jeśli wewnątrz łańcucha dokonamy zmiany wyboru, możemy skorzystać z dostępnej w bibliotece jQuery metody $.fn.end, która pozwoli nam odzyskać oryginalny wybór.

Przykład 3.15: Przywracamy nasz oryginalny wybór za pomocą metody $.fn.end

$('#tresc')
    .find('h3')
    .eq(2)
        .html('nowa treść dla trzeciego nagłówka h3!'
    .end() // przywraca wybór do wszystkich nagłówków h3 w elemencie #tresc
    .eq(0)
        .html('nowa treść dla pierwszego nagówka h3!');

Metody pobierające i ustawiające

Metody występujące w bibliotece jQuery są „przeciążone”, co oznacza, że metody wykorzystywane do ustawiania wartości oraz metody służące do ich pobierania zazwyczaj noszą taką samą nazwę. Metoda, która ma za zadanie ustawić jakąś wartość nazywana jest metodą ustawiającą. Metodą pobierającą natomiast nazywa się metodę, która ma pobrać — bądź odczytać — jakąś wartość. Metody ustawiające wpływają na wszystkie elementy w wyborze, zaś metody pobierające pobierają żądaną wartość tylko dla pierwszego zaznaczonego elementu.

Przykład 3.16. Metoda $.fn.html pełniąca funkcję metody ustawiającej

$('h1').html('witaj, świecie');
Przykład 3.17: Metoda html pełniąca funkcję metody pobierającej
$('h1').html();

Metoda ustawiająca zwraca obiekt jQuery, dzięki czemu możesz kontynuować wywoływanie metod jQuery na swoim wyborze. Metoda pobierająca zwraca to, co chciałeś aby pobrała — nie możesz więc kontynuować wywoływania metod jQuery na wartości zwróconej przez metodę pobierającą.

CSS, style i wymiary

W bibliotece jQuery można w wygodny sposób pobrać i ustawić własności CSS elementów.

Przykład 3.18. Pobieranie własności CSS

$('h1').css('fontSize'); // zwraca ciąg, np."19px"
$('h1').css('font-size'); // również działa

Przykład 3.19. Ustawianie własności CSS

$('h1').css('fontSize', '100px'); // ustawia pojedynczą własność
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // ustawia dwie własności

Zwróć uwagę na argument, który wykorzystaliśmy w drugiej linijce — jest to obiekt zawierający kilka własności. W ten sposób bardzo często przekazuje się do funkcji wiele argumentów, a duża liczba metod ustawiających w bibliotece jQuery pozwala na jednoczesne ustawianie wielu wartości obiektu.

Wykorzystanie klas CSS przy tworzeniu stylów

Metoda $.fn.css jest bardzo przydatna jako metoda pobierająca. Nie należy jej jednak używać jako metody ustawiającej w ostatecznej wersji kodu, ponieważ nie chcemy, aby w naszym kodzie JavaScript znajdowały się informacje prezentacyjne. W takim wypadku możemy napisać reguły CSS dla klas, które określają różne stany wizualne, a następnie zmienić klasę wybranego elementu.

Przykład 3.20. Korzystanie z klas

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

Klasy mogą również służyć do przechowywania informacji o stanie elementu — na przykład możemy dowiedzieć się, czy dany element został wybrany.

Wymiary elementów

W bibliotece jQuery znajdziemy wiele metod, które pozwolą nam pozyskać, a także zmodyfikować informacje dotyczące wymiarów i pozycji elementu.

Kod z przykładu 3.21 tylko w pobieżny sposób przedstawia funkcjonalność wymiarów w bibliotece jQuery. Aby zasięgnąć szczegółowych informacji na temat metod jQuery dotyczących wymiarów, odwiedź stronę http://api.jquery.com/category/dimensions/.

Przykład 3.21. Podstawowe metody dotyczące wymiarów

$('h1').width('50px');   // ustawia szerokość wszystkich nagłówków h1
$('h1').width();         // pobiera szerokość pierwszego nagłówka h1

$('h1').height('50px');  // ustawia wysokość wszystkich nagłówków h1
$('h1').height();        // pobiera wysokość pierwszego nagłówka h1

$('h1').position();      // zwraca obiekt zawierający informacje na temat
                         // pozycji pierwszego nagłówka h1 względem
                         // jego  pozycjonowanego (przesuniętego) elementu-rodzica

Atrybuty

Atrybuty elementu mogą zawierać informacje ważne dla aplikacji — musimy zatem wiedzieć, w jaki sposób je pobierać i ustawiać.

Metoda $.fn.attr może być wykorzystana zarówno jako metoda pobierająca, jak i ustawiająca. Podobnie jak w przypadku metody $.fn.css, metoda ustawiająca $.fn.attr przyjmuje albo klucz i wartość, albo obiekt zawierający co najmniej jedną parę klucz-wartość.

Przykład 3.22. Ustawianie atrybutów

$('a').attr('href', 'wszystkieMojeHrefySaTerazTakieSame.html');
$('a').attr({
    'title' : 'wszystkie tytuły też są takie same!',
    'href' : 'cosNowego.html'
});

Tym razem rozbiliśmy kod obiektu na kilka linijek. Pamiętaj, że białe znaki nie mają żadnego specjalnego znaczenia w języku JavaScript — możesz ich zatem używać kiedy tylko chcesz, żeby zwiększyć czytelność kodu! Przed utworzeniem wersji produkcyjnej możesz skorzystać z narzędzia do minimalizacji, aby usunąć wszystkie zbędne białe znaki.

Przykład 3.23. Pobieranie atrybutów

$('a').attr('href');  // zwraca href pierwszego elementu a w dokumencie

Przeglądanie elementów

Zestaw wybranych elementów może posłużyć jako punkt wyjścia w celu odnalezienia innych elementów.

Pełną dokumentację dostępnych w bibliotece jQuery metod przeglądania znajdziesz na stronie http://api.jquery.com/category/traversing/.

Przykład 3.24. Poruszanie się po strukturze DOM przy użyciu metod przeglądania

$('h1').next('p');
$('div:visible').parent();
$('input[imie_i_nazwisko=imie]').closest('form');
$('#mojaLista').children();
$('li.selected').siblings();

Możesz także, przy pomocy metody $.fn.each, przejść iteracyjnie przez zestaw wybranych elementów. Metoda ta iteruje przez wszystkie wybrane elementy i dla każdego wykonuje funkcję. Funkcja jako argumenty otrzymuje indeks obecnego elementu i sam element ze struktury DOM. Wewnątrz funkcji element DOM jest domyślnie dostępny poprzez słowo this.

Przykład 3.25. Iterowanie przez zestaw wybranych elementów

$('#mojaLista li').each(function(idx, el) {
    console.log(
        'Element ' + idx +
        'ma następujący html: ' +
        $(el).html()
    );
});

Manipulowanie elementami

Kiedy już dokonałeś wyboru elementów, zaczyna się cała zabawa — elementy możesz zmieniać, przenosić, usuwać, a nawet klonować. Za pomocą prostej składni masz także możliwość utworzenia nowych elementów.

Pełną dokumentację metod manipulacji biblioteki jQuery znajdziesz na stronie http://api.jquery.com/category/manipulation/.

Pobieranie i ustawianie informacji na temat elementów

Istnieje wiele sposobów na zmianę istniejącego elementu. Najczęściej zmieniamy wewnętrzny kod HTML, bądź atrybut elementu — w bibliotece jQuery do tego typu manipulacji dostępne są proste metody, które zapewniają prawidłowe działanie kodu w każdej przeglądarce. Z tych samych metod, w formie metod pobierających, można również skorzystać w celu pobrania informacji na temat elementów. W poniższej sekcji przyjrzymy się kilku przykładom ze szczególnym naciskiem na metody, które mogą zostać wykorzystane do pobrania i ustawienia informacji dotyczących elementów.

$.fn.html

Pobiera lub ustawia treść HTML.

$.fn.text

Pobiera lub ustawia tekst; kod HTML zostanie usunięty.

$.fn.attr

Pobiera lub ustawia wartość danego atrybutu.

$.fn.width

Pobiera lub ustawia szerokość pierwszego zaznaczonego elementu w postaci liczby całkowitej.

$.fn.height

Pobiera lub ustawia wysokość pierwszego zaznaczonego elementu w postaci liczby całkowitej.

$.fn.position

Pobiera obiekt zawierający informacje na temat pozycji pierwszego wybranego elementu względem pierwszego pozycjonowanego przodka. Metoda ta może być wykorzystywana tylko jako metoda pobierająca.

$.fn.val

Pobiera lub ustawia wartości elementów formularza.

Przykład 3.26. Zmieniamy kod HTML elementu

$('#mojDiv p:first')
    .html('Nowy <strong>pierwszy</strong> akapit!');

Przenoszenie, kopiowanie i usuwanie elementów

Istnieje wiele sposobów na przenoszenie elementów w obrębie struktury DOM. Ogólnie wyróżnia się dwa podejścia:

• Umieszczamy wybrane elementy względem innego elementu
• Umieszczamy element względem wybranyych elementów

Przykładowo w biliotece jQuery dostępne są metody $.fn.insertAfter oraz $.fn.after. Metoda $.fn.insertAfter umieszcza wybrane elementy za tym elementem, który przekaże się jej jako argument. Z kolei metoda $.fn.after umieszcza element będący jej argumentem za wybranym elementem. W podobny sposób działa jeszcze kilka innych metod: $.fn.insertBefore i $.fn.before; $.fn.appendTo i $.fn.append, czy $.fn.prependTo oraz $.fn.prepend.

Wybór odpowiedniej metody zależy od wybranych elementów, a także od tego, czy będziesz musiał przechowywać odwołania do elementów dodawanych na stronę. Jeśli potrzebujemy odwołań, zawsze korzystamy z pierwszego sposobu — umieszczamy wybrane elementy względem innego elementu. Wówczas umieszczane przez nas elementy są zwracane. W tym przypadku należy wybrać metody $.fn.insertAfter, $.fn.insertBefore, $.fn.appendTo oraz $.fn.prependTo.

Przykład 3.27. Przenoszenie elementów na różne sposoby

// przenosimy pierwszą pozycję z listy na sam koniec
var $li = $('#mojaLista li:first').appendTo('#mojaLista');

// inny sposób
$('#mojaLista').append($('#mojaLista li:first'));

// zauważ, że nie mamy dostępu
// do przeniesionej pozycji z listy, ponieważ zwracana jest
// sama lista

Klonowanie elementów

Metody takie jak $.fn.appendTo służą do przenoszenia elementów. Zdarza się jednak, że zamiast przenosić element wolelibyśmy go skopiować — w takim wypadku najpierw musimy użyć metody $.fn.clone.

Przykład 3.28. Wykonywanie kopii elementu

// kopiujemy pierwszą pozycję z listy na sam koniec
$('#mojaLista li:first').clone().appendTo('#mojaLista');

Usuwanie elementów

Są dwa sposoby usuwania elementów ze strony: $.fn.remove i $.fn.detach. Jeśli chcesz usunąć wybrane elementy ze strony na stałe, skorzystaj z metody $.fn.remove — metoda ta zwraca usunięte elementy, lecz nie powiązane z nimi dane i zdarzenia.

Jeśli jednak zależy ci na zachowaniu danych i zdarzeń, użyj metody $.fn.detach. Podobnie jak w przypadku $.fn.remove wybrane elementy zostają zwrócone, ale powiązane z nim dane i zdarzenia są zachowane. Dzięki temu będziesz mógł później je przywrócić na stronę.

Jeśli chcesz pozostawić element na stronie, lecz usunąć jego treść, możesz skorzystać z metody $.fn.empty — pozbędziesz się w ten sposób wewnętrznego kodu HTML elementu.

Tworzenie nowych elementów

W bibliotece jQuery znajdziemy banalnie prosty, a zarazem elegancki sposób na utwórzenie nowych elementów — używamy wówczas tej samej metody $(), która służy nam do wybierania elementów.

Przykład 3.29. Tworzenie nowych elementów

$('<p>To jest nowy akapit</p>');
$('<li class="new">nowa pozycja na liście</li>');
Przykład 3.30: Tworzymy nowy element z obiektem atrybutu
$('<a/>', {
    html : 'To jest <strong>nowy</strong> odnośnik',
    'class' : 'new',
    href : 'foo.html'
});

Zwróć uwagę, że w przypadku obiektu atrybutu, którego użyliśmy jako drugiego argumentu, nazwa własności class jest zawarta w cudzysłowie, zaś text i href nie są. Z reguły nazw własności nie trzeba umieszczać w cudzysłowie — chyba że są to słowa zarezerwowane (tak jak, w tym przypadku, słowo class).

Nowoutworzony element nie jest od razu dodawany na stronę — jeśli chcemy, aby element został dodany natychmiast po utworzeniu możemy posłużyć się kilkoma technikami.

Przykład 3.31. Pobieranie nowego elementu na stronę

var $mojNowyElement = $('<p>Nowy element</p>');
$mojNowyElement.appendTo('#tresc');

$mojNowyElement.insertAfter('ul:last'); // akapit zostanie usunięty z elementu #tresc!
$('ul').last().after($mojNowyElement.clone());  // klonujemy akapit — teraz mamy dwa

Ściśle rzecz biorąc, utworzonego elementu nie trzeba przechowywać w zmiennej — aby dodać element do strony wystarczy natychmiast po wywołaniu $() wywołać odpowiednią metodę. Najczęściej jednak warto pozostawić sobie jakiś sposób odwołania się do dodanego elementu, aby nie musieć go później wybierać.

Element może zostać utworzony nawet w trakcie dodawania go na stronę, lecz w takim wypadku nie będziemy mieć do niego żadnego odwołania.

Przykład 3.32. Równoczesne tworzenie i dodawanie elementu na stronę

$('ul').append('<li>pozycja na liście</li>');

var mojePozycje = [], $mojaLista = $('#mojaLista');

for (var i=0; i<100; i++) {
    mojePozycje.push('<li>pozycja ' + i + '</li>');
}

$mojaLista.append(mojePozycje.join(''));

Manipulowanie atrybutami

Biblioteka jQuery umożliwia manipulowanie atrybutami na wiele sposobów. Proste zmiany można wprowadzić bardzo łatwo, ale metoda $.fn.attr pozwala na o wiele bardziej skomplikowane manipulacje. Możemy ustawić albo wartość bezpośrednią, albo wartość zwrotną funkcji. Jeśli korzystamy ze składni funkcji, nasza funkcja przyjmuje dwa argumenty: zaczynający się od zera indeks elementu, którego atrybut jest zmieniany oraz aktualną wartość zmienianego atrybutu.

Przykład 3.33. Manipulowanie pojedynczym atrybutem

$('#mojDiv a:first').attr('href', 'nowaLokalizacja.html');

Przykład 3.34. Manipulowanie wieloma atrybutami

$('#mojDiv a:first').attr({
    href : 'nowaLokalizacja.html',
    rel : 'super-swietny'
});

Przykład 3.35. Korzystamy z funkcji, aby określić nową wartość atrybutu

$('#mojDiv a:first').attr({
    rel : 'super-swietny',
    href : function(idx, href) {
        return '/nowy/' + href;
    }
});

$('#mojDiv a:first').attr('href', function(idx, href) {
    return '/nowy/' + href;
});

Ćwiczenia

Wybieranie elementów

Otwórz w przeglądarce plik /exercises/index.html (dostępny na GitHub), a następnie skorzystaj z pliku /exercises/js/sandbox.js bądź z Firebuga w celu wykonania następujących czynności:

1. Wybierz wszystkie elementy div o klasie module.
2. Zastanów się, jakich trzech selektorów mógłbyś użyć do pobrania trzeciej pozycji z nieuporządkowanej listy #myList. Który z nich jest najlepszy? Dlaczego?
3. Wybierz etykietę dla pola wejściowego wyszukiwania korzystając z selektora atrybutu.
4. Sprawdź ile elementów na stronie jest ukrytych (wskazówka: .length).
5. Sprawdź ile elementów graficznych na stronie ma atrybut alt
6. Wybierz wszystkie nieparzyste wiersze tabeli.

Przeglądanie elementów

Otwórz w przeglądarce plik /exercises/index.html, a następnie skorzystaj z pliku /exercises/js/sandbox.js bądź z Firebuga w celu wykonania następujących czynności:

1. Wybierz wszystkie elementy graficzne znajdujące się na stronie. Zapisz atrybut alt każdego z nich.
2. Wybierz za pomocą selektora pole tekstowe wyszukiwarki, następnie przejrzyj kod aż do formularza i dodaj do niego klasę.
3. Zaznacz pozycję z listy #myList o klasie current. Usuń tę klasę, a następnie dodaj klasę current do kolejnej pozycji na liście.
4. Wybierz element select wewnątrz elementu #specials. Przejrzyj kod aż do przycisku submit.
5. Zaznacz pierwszą pozycję z listy w elemencie #slideshow. Dodaj do niej klasę current, a do elementów siostrzanych klasę disabled.

Manipulowanie elementami

Otwórz w przeglądarce plik /exercises/index.html, a następnie skorzystaj z pliku /exercises/js/sandbox.js bądź z Firebuga w celu wykonania następujących czynności:

1. Dodaj pięć nowych pozycji na koniec nieuporządkowanej listy #myList. Wskazówka:
   

   for (var i = 0; i<5; i++) { ... }
   

2. Usuń z listy nieparzyste pozycje
3. Dodaj jeszcze jeden nagłówek h2 i dodatkowy akapit do ostatniego elementu div.module
4. Dodaj jeszcze jedną opcję do elementu select. Nadaj jej wartość "Środa"
5. Dodaj do strony nowy element div.module za ostatnim takim elementem. Wewnątrz niego umieść kopię jednego z istniejących elementów graficznych.