Kurs jQuery. Część 2: Podstawy interakcji z użytkownikiem. Selektory, zdarzenia i modyfikacje kodu strony

W pierwszym odcinku kursu jQuery zapoznaliśmy się z podstawowymi cechami tego frameworka i jego najważniejszymi zaletami. Jedną z nich było wykorzystanie zasad tworzenia kodu znanych już deweloperom z arkuszy stylów (CSS). Zagadnieniu temu warto przyjrzeć się bliżej. Biblioteka jQuery obsługuje bowiem wyszukiwanie za pomocą składni CSS 3, zapewniając tym samym dużą elastyczność i zwięzłość projektowanych rozwiązań. Przypisywanie zdarzeń w sposób niezależny od przeglądarki pozwala ponadto odseparować skrypt od danych HTML. Spójrzmy więc, jak te cechy jQuery mogą pomóc nam w manipulowaniu elementami dokumentu HTML w reakcji na określone działania użytkownika.

Spis treści
Wprowadzenie Chirurgiczna precyzja czy pełna elastyczność? Krótkie przypomnienie selektorów CSS Przykłady użycia selektorów złożonych Selektory w praktyce Bo wszystko zdarzyć się może... Łatwa separacja wyglądu od zachowań, czyli czysty kod HTML Programowe wywoływanie zdarzeń Własne zdarzenia Proste modyfikacje kodu HTML strony Zmiana wyglądu, czyli style i klasy CSS Odczyt i zmiana atrybutów Odczyt i zmiana tekstu, kodu HTML lub wartości pola Na zakończenie – przykład praktyczny Podsumowanie

Spis treści

Wprowadzenie
Chirurgiczna precyzja czy pełna elastyczność?

Bo wszystko zdarzyć się może...

Proste modyfikacje kodu HTML strony

Na zakończenie – przykład praktyczny
Podsumowanie

Wprowadzenie

Wyszukiwanie elementów za pomocą składni CSS to bardzo wygodne rozwiązanie, pozwala bowiem skorzystać ze znanych już i dobrze udokumentowanych zasad. Umożliwiają one odnajdywanie zarówno pojedynczych obiektów, jak i całych ich grup – dzięki zastosowaniu złożonych poleceń. Twórcy biblioteki jQuery nie poprzestali jednak na wdrożeniu standardowych rozwiązań. Zdefiniowali także kilka rozszerzeń, które choć zgodne są z ogólną semantyką CSS, nie znajdziemy ich jednak w opisie standardu. Ich zadaniem jest po prostu ułatwienie pracy programiście – na przykład pseudoklasa :animated dopasowuje się do tych elementów dokumentu, które są w danym momencie animowane.

Ponieważ dynamiczny interfejs strony WWW bazuje na zdarzeniach, jQuery także w tym wypadku stara się pomóc deweloperowi. Przede wszystkim zapewnia jedną składnię definiowania i usuwania zdarzeń, niezależną od przeglądarek internetowych. Dodatkowo umożliwia określanie wielu zdarzeń dla tego samego elementu bez efektu nadpisywania oraz definiowanie własnych typów, które później wywołuje się programowo.

Kod zdarzenia najczęściej powoduje zmianę struktury dokumentu HTML lub dodanie nowych właściwości CSS. Biblioteka udostępnia więc również metody służące do łatwego pobierania i modyfikacji atrybutów HTML, zawartości znacznika czy klas i właściwości CSS. Wszystkie powyższe cechy jQuery przedstawimy już za chwilę, na praktycznych przykładach.

«poprzednia 1 2 3 4 ... 7 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

7 skomentuj »

Komentarze

#1 adamkk 2009-08-19 12:59:27 0
albo mi się wydaje albo macie na stronie jakieś skopane fonty, słabo się to czyta
IP: 193.178.143.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)
#2 jakubek 2009-08-20 08:11:39 0
wydaje ci się (chyba że wcześniej było nie tak a teraz poprawiono). pobaw się konfiguracją przeglądarki - u mnie czyta się super! pozdro
IP: 94.254.250.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)
#3 adminik 2009-08-25 01:39:16 0
Złe jest to że niema tabulacji w boxach z kodem.

Oprócz tego całkiem całkiem.
IP: 83.7.12.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.39 Safari/530.5
#4 starr 2009-09-27 13:23:51 0
próbował ktoś replikować kody html na których działają przykładowe skrypty? Ciekawe dlaczego zgodnie z przykładem formatowana jest tylko pierwsza tabela?
IP: 84.40.188.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
#5 wcz_e 2010-07-17 14:50:19 0
W "Listing 4 – Tabela HTML z sumowaniem i edycją wartości na żywo" jest błąd ->

"

$('table.test > tbody

td:nth-child(2)').one('click', klik);

});

"
IP: 83.10.119.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4
#6 sdf 2010-09-15 01:57:10 0
ostatni przykład niestety nie dziala
IP: 217.113.228.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Safari/533.4
#7 mariobedi 2012-05-10 18:43:31 0
działa, ale jak kod jest zapisany w jednej linii

$('table.test > tbody td:nth-child(2)').one('click', klik);
IP: 77.255.130.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.