jQuery


Biblioteka jQuery
Rozszerzeniem możliwości języka JavaScript jest popularna biblioteka jQuery. Jest ona do
pobrania ze strony www.jquery.com. Po pobraniu należy zapisać ją w katalogu gdzie będzie
zapisana strona z niej korzystająca. Zawiera ona gotowe funkcje i konstrukcje językowe
usprawniające tworzenie dynamicznych stron WWW. Aby używać jej możliwości należy
dołączyć pobrany plik tj. jquery.js do własnej strony.

Pobieranie elementów strony
Selektor identyfikatorów.
Załóżmy, że mamy kod HTML:

Komunikat specjalny


Aby pobrać taki element przy użyciu modelu DOM, możesz użyć poznanej funkcji:
var messagePara = document.getElementById(  message );
Metoda oparta na jQuery ma postać:
var mesagePara = $( #message );
Otrzymujemy wtedy obiekt, który zawiera odwołanie do znalezionej zawartości.
Selektor elementów.
JQuery udostępnia zamiennik metody getElementsByTagName(). Aby pobrać wszystkie
znaczniki przy użyciu modelu DOM, możesz użyć poznanej funkcji:
var linksList = document.getElementsByTagName(  a );
Metoda oparta na jQuery ma postać:
var linksList = $( a );
Otrzymujemy wtedy listę wyszukanych elementów.
Selektory klas
Jeżeli w CSS mamy zdefiniową klasę to możemy ją wyszukać przy użyciu selektora:
$( .submenu );
Gdzie submenu jest nazwą klasy zdefiniowaną w CSS.
Selektory potomków
Mamy listę odnośników:

Aby wyszukać odnośniki w tej liście (są to potomkowie listy) to należy użyć selektora
potomków:
$( #navBar a );
W selektorze podajemy nazwę identyfikatora rodzica, spację i nazwę znacznika potomka.
W efekcie otrzymamy listę potomków podanego elementu.
Selektory dziecka
Dziecko jest bezpośrednim potomkiem jakiegoś znacznika.
Aby wyszukać dzieci danego znacznika należy podać nazwę rodzica, znak > i nazwę dziecka:
$( body > p );
W efekcie otrzymamy listę akapitów

zawartych bezpośrednio w .
Selektor przyległego brata
Brat jest dzieckiem tego samego rodzica.
Służy do pobrania znacznika, który występuje bezpośrednio po jakimś znaczniku.
Aby wyszukać przyległego brata podajemy nazwy sąsiednich znaczników rozdzielone
znakiem plus +.
$( h1 + div );
W efekcie otrzymamy dostęp do elementu wskazanego drugim znacznikiem.
Selektory atrybutów
Umożliwiają wybór elementów o określonych atrybutach np. pobrać znaczniki z
atrybutem alt. Aby to zrobić należy użyć zapisu:
$( img[alt] );
Dostępnych jest wiele różnych selektorów atrybutów:
- Wersja [atrybut] pobiera elementy z danym atrybutem określonym w kodzie HTML.
$(a[href])
Pobiera wszystkie znacznik z atrybutem href.
- Wersja [atrybut=wartość] pobiera elementy, które posiadają atrybutem z określoną
wartością.
$( input[type=text] )
Pobiera wszystkie pola tekstowe w formularzu.
- Wersja [atrybut^=wartość] pobiera elementy, które posiadają atrybut rozpoczynający
się od podanej wartości.
$( a[href^=http://] )
Pobiera wszystkie odnośniki rozpoczynające się od http://.
- Wersja [atrybut$=wartość] pobiera elementy, które posiadają atrybut kończący się
podaną wartością.
$( a[href$=.pdf] )
Pobiera wszystkie odnośniki do plików kończących się na pdf.
- Wersja [atrybut*=wartość] pobiera elementy, które posiadają atrybut zawierający
podaną wartość.
$( a[href*=www] )
Pobiera wszystkie odnośniki zawierające www.
Filtry biblioteki jQuery
Biblioteka jQuery umożliwia filtrowanie pobranych elementów na podstawie określonych cech.
Filtr :even pozwala pobrać wszystkie parzyste elementy z tablicy wyników. Aby pobrać
wszystkie parzyste wiersze tabeli należy użyć zapisu:
$( tr:even )
Podobnie działa filtr elementów nieparzystych :odd.
Wybieranie elementów nie pasujących do podanego selektora :not().
Aby pobrać wszystkie znaczniki oprócz tagów klasy navButton należy zapisać:
$( a:not(.navButton) );
Aby znalezć wszystkie odnośniki, które nie rozpoczynają się od członu http:// należy użyć
kodu:
$( a:not([href^=http://]) );
Filtr: :has() znajduje elementy zawierające podany selektor.
Jeżeli chcemy pobrać wszystkie znaczniki

  • , które zawierają element to zapisujemy:
    $( li:has(a) );
    Filtr: :contains() wyszukuje elementy zawierające określony tekst.
    Aby znalezć wszystkie odnośniki z napisem  kliknij to możemy zapisać to tak:
    $( a:contains(kliknij) );
    Filtr: :hidden wyszukuje ukryte elmenty.
    Są to znaczniki mające właściwość CSS display o wartości none (co powoduje, że nie są
    widoczne na stronie), ukryte za pomocą funkcji hide() biblioteki jQuery i ukryte pola
    formularzy. Załóżmy, że mamy ukryte kilka znaczników
    . Za pomocą biblioteki jQuery
    możesz je wyświetlić:
    $( div:hidden ).show();
    Filtr: :visible to przeciwieństwo filtra :hidden.
    Pętle automatyczne
    W modelu DOM po pobraniu kolekcji węzłów trzeba zwykle utworzyć pętlę, przejść w niej po
    wszystkich znalezionych elementach i wykonać na nich określone operacje.
    W bibliotece jQuery wywołanie funkcji dla kolekcji oznacza wykonanie jej w pętli dla
    wszystkich elementów kolekcji.
    $( #slideshow img ).hide();
    Zapis ten umożliwia pobranie wszystkich rysunków ze znacznika o identyfikatorze slideshow
    a następnie ich ukrycie.
    Aańcuchy funkcji
    Często program ma wykonać kilka operacji na kolekcji elementów. W bibliotece jQuery można
    użyć tzw. łańcucha funkcji.
    $( #popUp ).width(300).height(300);
    Kod ten możliwi określenie równocześnie szerokości i wysokości dla kolekcji elementów.
    Dodawanie treści do stron
    Mamy przykładową stronę:


    Błędy:




    Funkcja .html() pozwala pobrać kod HTML danego elementu, a także zastąpić go innym.
    alert( $( #errors ).html());
    Kod ten wyświetla okienko dialogowe z tekstem 

    Błędy:

     .
    Aby zastąpić bieżącą zawartość określonego elementu , należy przekazać nowy tekst do
    funkcja .html()
    $( #errors ).html(

    Formularz zawiera błędy

     );
    Ten skrypt zastępuje cały kod HTML elementu o identyfikatorze errors. Po jego użyciu
    uzyskamy:


    Formularz zawiera błędy




    Funkcja append()dodaje kod HTML jako ostatnie dziecko pobranego znacznika.
    W naszym przykładzie użycie istrukcji:
    $( #errors ).append(

    Formularz zawiera błędy

     );
    Doda podany kod HTML na końcu znalezionego elementu:


    Błędy:


    Formularz zawiera błędy




    Funkcja prepend()dodaje kod HTML bezpośrednio przed pobranym elementem.
    W naszym przykładzie użycie istrukcji:
    $( #errors ).prepend(

    Formularz zawiera błędy

     );
    Doda podany kod HTML na początku znalezionego elementu:


    Formularz zawiera błędy


    Błędy:




    Dodanie kodu HTML bezpośrednio przed lub poza (before(), after()) pobranym
    elementem. Powszechną praktyką jest sprawdzenie, czy pole przesyłanego formularza nie
    jest puste. Jeżeli jest puste to nastąpi wyświetlenie stosownego komunikatu przed lub za
    pustym polem.

    Aby wyświetlić informację pod polem można użyć instrukcji .after():
    $( userName ).after( Podaj nazwę  );
    Kod HTML będzie wyglądał tak:

    Podaj nazwę
    Zastępowanie i usuwanie pobranych elementów
    Jeżeli chcemy usunąć jakiś element możemy użyć funkcji .remove().
    Jeżeli element ma identyfikator popup to możemy go usunąć instrukcją:
    $( #popup ).remove();
    Jeżeli chcemy zastąpić jakiś element możemy użyć funkcji .replace().
    Strona zawiera zdjęcia sprzedawanych towarów. Kiedy użytkownik kliknie fotografię, to skrypt
    doda towar do koszyka. Można wtedy zastąpić znacznik tekstem np.  dodano do
    koszyka . Załóżmy, że chcesz zastąpić tekstem znacznik o identyfikatorze produkt101:
    $( #produkt101 ).replace(

    Dodano do koszyka

     );
    Manipulowanie atrybutem class znaczników
    Dodanie klasy do elementu  addClass()
    Aby dodać klasę externalLink do wszystkich odnośników prowadzących poza witrynę, można
    użyć kodu:
    $( a[href^=http://] ).addClass( externalLink );
    Ten kod pobiera elementy HTML podobne do poniższego:

    I przekształca je na następującą postać:

    Aby funkcja była przydatna, trzeba wcześniej przygotować w arkuszu styl klasy CSS. Kiedy
    kod JavaScript doda nazwę klasy, przeglądarka zastosuje do odpowiednich elementów
    właściwości zdefiniowanego wcześniej stylu CSS.
    Usunięcie klasy z wybranego elementu  removeClass()
    Aby usunąć klasę highlight z elementu
    o identyfikatorze alertBox, możemy użyć
    następującego kodu:
    $( #alertBox ).removeClass( highlight );
    Przełączenie klasy z wybranego elementu  toggleClass()
    Funkcja dodaje klasę, jeżeli jej nie ma i usuwa jeżeli jest. Jest wykorzystywana do
    programowania akcji typu włącz  wyłącz (przykłady pózniej).
    Wczytywanie i modyfikowanie właściwości CSS
    Aby odczytać aktualną wartości właściwości CSS należy przekazać jej nazwę do funkcji
    css():
    var bgColor = $( #main ).css( background-color );
    Funkcja przypisze zmiennej bgColor łańcuch znaków określający kolor tła element. Zwróci
    wartość  transparent jeśli nie ma ustalonego koloru lub kolor zapisany jako wartość RGB np.
     rgb( 255, 255, 0)
    Funkcja css() umożliwia również ustawienie wartości własności CSS elementu. W tym celu
    należy jej przekazać dwa argumenty: nazwę właściwości CSS i jej wartość:
    $( body ).css( font-size , 200% );
    Możliwa jest zmiana wielu właściwości CSS. Aby to uczynić należy do funkcji css() przekazać
    listę właściwości i ich wartości zawartą w nawiasy klamrowe:
    $( #highlightedDIV ).css({
     background-color :  #FF0000 ,
     border :  2px solid #FE0037
    });
    Wczytywanie, ustawianie atrybutów HTML
    Możliwe jest zarządzanie atrybutami w kodzie HTML.
    Funkcja attr() pozwala pobrać wartość określonego atrybutu HTML.
    Aby sprawdzić, na jaki plik graficzny wskazuje dany tag , należy przekazać do
    wspomnianej funkcji łańcuch znaków  src
    var imageFile = $( #banner img ).attr( src );
    Aby ustawić wartość atrybutu, należy przkazać do funkcji attr() także drugi argument. Jeśli
    chcesz wyświetlić nowy rysunek, możesz zmienić właściwość src znaczniak :
    $( #banner img ).attr( src ,  images/newImage.png );
    Można także usunąć atrybut ze znacznika. Służy do tego funkcja removeAttr():
    $( body ).removeAttr( bgColor );
    Obsługa wszystkich pobranych elementów.
    Przechodzenie w pętli po zbiorze znalezionych elementów i wykonywanie dla nich serii tych
    samych zadań to standardowa operacja (pętle automatyczne). W jQuery można ją
    przeprowadzić za pomocą funkcji .each().
    $( selektor ).each();
    Aby użyć funkcji each(), należy przekazać do niej argument specjalnego rodzaju  tzw.
    funkcję anonimową, która zawiera opis czynności realizowanych dla każdego znalezionego
    elementu. Funkcja anonimowa nie posiada unikalnej nazwy i ma postać:
    function(){
    // kod funkcji
    }
    Jej kod należy umieścić jako argument funkcji .each():
    $( selektor ).each(
    function(){
    // kod funkcji
    }
    );
    Może to skrótowo wyglądać tak:
    $( selektor ).each( function(){
    // kod funkcji
    });
    Słowo kluczowe this
    W czasie korzystania z funkcji .each() programista chce móc pobierać i ustawiać atrybuty
    poszczególnych elementów. Dostęp do aktualnie przetwarzanego elementu zapewnia słowo
    kluczowe this. Przy pierwszym uruchomieniu pętli słowo this odpowiada pierwszemu
    elementowi kolekcji, przy drugim uruchomieniu  drugiemu itd.
    W bibliotece jQuery ma ono konstrukcję:
    $(this)
    Przykład tworzenia listy odnośników zewnętrznych w ramce z bibliografią na dole strony.
    Strona zawiera znacznik
    przeznaczony na odnośniki zewnętrzne:

    Strony wymienione w artykule





    Pierwszy krok to pobranie wszystkich odnośników zewnętrznych:
    $( [href^=http://] )
    Aby przejść po pętli dla wszystkich odnośników, używamy funkcji each():
    $( [href^=http://] ).each();
    Następnie należy dodać funkcję anonimową:
    $( [href^=http://] ).each( function(){
    });
    Przy każdym przetworzeniu pętli musimy mieć dostęp do atualnie przetwarzaniego elementu.
    Umożliwia to konstrukcjia $(this):
    $( [href^=http://] ).each( function(){
    var extLink = $(this).attr( href );
    });
    Następnie wystarczy dodać nowy element listy do znacznika