$(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 jakotype="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
orazselect
: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 :text
- Wybiera pola wejściowe oznaczone jako
type="text"
type="submit"
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:
- Wybierz wszystkie elementy
div
o klasiemodule
. - 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? - Wybierz etykietę dla pola wejściowego wyszukiwania korzystając z selektora atrybutu.
- Sprawdź ile elementów na stronie jest ukrytych (wskazówka:
.length
). - Sprawdź ile elementów graficznych na stronie ma atrybut
alt
- 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:
- Wybierz wszystkie elementy graficzne znajdujące się na stronie. Zapisz atrybut
alt
każdego z nich. - Wybierz za pomocą selektora pole tekstowe wyszukiwarki, następnie przejrzyj kod aż do formularza i dodaj do niego klasę.
- Zaznacz pozycję z listy
#myList
o klasiecurrent
. Usuń tę klasę, a następnie dodaj klasęcurrent
do kolejnej pozycji na liście. - Wybierz element select wewnątrz elementu
#specials
. Przejrzyj kod aż do przyciskusubmit
. - 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:
- Dodaj pięć nowych pozycji na koniec nieuporządkowanej listy
#myList
. Wskazówka:for (var i = 0; i<5; i++) { ... }
- Usuń z listy nieparzyste pozycje
- Dodaj jeszcze jeden nagłówek
h2
i dodatkowy akapit do ostatniego elementudiv.module
- Dodaj jeszcze jedną opcję do elementu
select
. Nadaj jej wartość"Środa"
- Dodaj do strony nowy element
div.module
za ostatnim takim elementem. Wewnątrz niego umieść kopię jednego z istniejących elementów graficznych.
Błedy w JavaScripcie,
brak pełnych kodów [skrót od ready i sama zmienna, która nie jest akceptowalna] itp itd