Artykuł
11/21/2011

JQuery - Selektory

Autor: Artur Jankowski

Opublikowano: 2011-11-14

Z racji, iż jest to pierwszy artykuł z krótkiej serii o JQuery, należy napisać kilka zdań o tym niezastąpionym i najbardziej popularnym na dzisiejszych stronach internetowych frameworku.

Więc cóż to takiego jest? Jest to biblioteka JavaScript, która udostępnia funkcje, możliwości na potrzeby często spotykanych zadań. Większość z nich uzyskujemy przy minimalnym wkładzie i wysiłku. Właśnie ten cel przyświecał jego twórcy. Mały wkład pracy a wielkie osiągi.

Cechy charakteryzujące JQuery to jego lekkość, gdyż cała biblioteka w wersji min zajmuje zaledwie70 KB. Zapewne część z was zadaje sobie pytanie, co właściwie oznacza to min. Po otworzeniu takiego pliku zobaczycie jeden wielki bałagan. Jest to plik skompresowany pod kątem białych znaków. Celem jest tutaj zmniejszenie objętości pliku kosztem jego czytelności. Z kolei dla tych, którzy chcieliby mieć bibliotekę JQuery w wersji czytelnej informuję, że jest ona możliwa do ściągnięcia. Oficjalna strona JQuery, gdzie owe pliki możecie ściągnąć, jak również dowiedzieć się newsów oraz przejrzeć dokumentację i tutorial znajdziecie pod adresem http://jquery.com/.

Biblioteka JQuery oferuje nam wiele funkcji, funkcjonalności, a najważniejsze z nich to:

uzyskanie dostępu do elementów dokumentu,
zmiana zawartości dokumentu,
modyfikowanie wyglądu stron internetowych,
animacje,
wspieranie obsługi asynchronicznych odwołań do serwera, czyli w skrócie AJAX,
wiele innych funkcji, które narastają z każdym dniem, gdyż rozszerzalna natura tej biblioteki umożliwia nam dodanie do niej własnych funkcjonalności.

JQuery – aby zacząć

Aby móc cieszyć się potęgą JQuery, możemy dodać jeden wpis w sekcji <head> naszego dokumentu HTML:

<script type="text/javascript" src="{ścieżka do pliku}/jquery-1.4.2.min.js"></script>

Następnie, poniżej możemy już pisać nasze skrypty. Jednak dla czytelności kodu i dobrej praktyki oddzielenia kodu HTML od skryptów polecam dołączenie kolejnego pliku o rozszerzeniu js, w którym będziemy umieszczać nasze skrypty.

<head>
<script type="text/javascript" src="{ścieżka do pliku}//jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{ścieżka do pliku}//moje_skrypty.js"></script>
</head>

A zatem przystąpmy do praktyki. Nasz plik html wygląda następująco:

<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>JQuery</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/my_scripts.js"></script>
</head>
<body>
<p id="queen_more">Queen</p>
<div id="queen_info">
 brytyjski zespół rockowy, utworzony w 1970 r. w Londynie przez Briana May, Rogera Taylora i Freddiego Mercury'ego. Basista John Deacon dołączył do grupy rok później.
Muzyka Queen odznacza się różnorodnością brzmienia, sprawiającą, że zespół trudno jest przypisać do konkretnego stylu. Większość utworów nosi cechy rocka i jego odmian (hard rock, glam rock, rock progresywny) oraz, w pewnym stopniu, muzyki pop. Charakterystyczną cechą zespołu są też wielowarstwowe aranżacje, harmonie wokalne oraz aktywny udział publiczności podczas koncertów.
W 2001 r. grupa Queen została wprowadzona do Rock and Roll Hall of Fame w USA, a 11 listopada 2004 r. do Hall of Fame w Wielkiej Brytanii. W 2007 r. grupa Queen została wybrana najlepszą brytyjską grupą wszechczasów przez słuchaczy BBC Radio 2.
</div>
</body>
</html>

Natomiast plik my_scripts.js, w którym trzymamy nasze skrypty JQuery, wygląda tak:

$(document).ready(function()
{
    $('#queen_more').click(function(){
        $('#queen_info').toggle();
    });
});

Umieszczony powyżej kod, po kliknięciu w tekst „Queen”, zwija lub rozwija tekst, znajdujący się pod nim, w sposób przyjemny dla oka. Zatem przejdźmy teraz do analizy kodu, który jest przyczyną całego zamieszania.

A zaczęliśmy od bazowej funkcji jQuery $(). Jest ona podstawowym budulcem, z jakim będziemy mieli do czynienia pracując z jQuery. Wyszukuje ona wybrane przez nas części dokumentu drzewa DOM i pozwala nam wchodzić z nimi w różnego rodzaje interakcje.

Zatem $(document) to pobranie odnośnika do dokumentu html.

Idąc dalej tym tropem napotykamy funkcję ready(),jako argument przyjmuje ona nazwę funkcji, która ma zostać wywołana, lub po prostu funkcję anonimową, zwaną czasem również funkcją lambda. Ale co robi sama funkcja ready()? Czeka ona na załadowanie jedynie drzewa DOM, w przeciwieństwie do takiego wpisu <body onload=”moja_funkcja();”>, który to wywoła funkcję moja_funkcja() po załadowaniu całego dokumentu wraz ze wszystkimi obrazkami na stronie.

Ogólnie rzecz biorąc, tak w większości przypadków powinien wyglądać nasz szablon na skrypty jQuery.

$(document).ready(function()
{
//nasz kod
}

Ale jeszcze nie koniec opisu naszego skryptu. Nieco wyżej wspomniałem o funkcjach anonimowych. Owe funkcje często są wykorzystywane w jQuery. Część z Was na pewno zadaje sobie pytanie, dlaczego? Czy nie lepiej zdefiniować tę funkcję poprzez dodanie jej nazwy do funkcji, która tego wymaga? Odpowiedź brzmi, że można tak i tak. Ale jeśli funkcja ma być wykonana tylko raz, to po co sobie zawracać tym głowę.

Selektory

W końcu przyszła kolej na poznanie potęgi jQuery, czyli właśnie selektorów.

Aby je poznać, przyjrzyjmy się najpierw tej funkcji: $('#queen_more'). Zwróćcie uwagę na znak „#”. Nasz dokument wyglądał tak:

<p id="queen_more">Queen</p>

Nie ma tu tego znaku, a mimo to funkcja zwraca nam część dokumentu, której identyfikator jest równy „queen_more”. Przyszedł zatem czas na wyjaśnienie pewnych rzeczy, dotyczących selektorów w jQuery. JQuery ma parę wyspecjalizowanych selektorów, które mają nam pomóc w przeszukiwaniu dokumentu i znajdowaniu, wybranych przez nas, ich części.

$(‘div’)	pobiera wszystkie divy z dokumentu
$(‘.klasa’)	pobiera wszystkie elementy, które posiadają klasę „klasa”
$(‘#identyfikator’)	pobiera jeden element z dokumentu o identyfikatorze „identyfikator”

Część z was zapewne spostrzegła tu analogię do selektorów z CSS. Otóż jQuery obsługuje prawie wszystkie selektory w specyfikacji CSS od wersji 1 do 3. Ułatwia to nam, bez uczenia się nowych wyrażeń, wybranie elementów dokumentu.

Zatem $('#queen_more') to pobranie elementu drzewa DOM o identyfikatorze “queen_more”.

Click to po prostu zdarzenie kliknięcia na wybrany element, który jako argument przyjmuje funkcję, która ma się wykonać w przypadku jego wystąpienia. Więcej o zdarzeniach dowiecie się w kolejnym wpisie z serii jQuery.

Ostatnia rzecz, która została nam do opisania to:

$('#queen_info').toggle();

Jedyna rzecz, której jeszcze nie wiemy w powyższej linii, to działanie funkcji toggle(). Toggle (z angielskiego przełączać) działa na pobranych elementach, w tym przypadku na elemencie <div> o identyfikatorze „queen_info” i ukrywa go na przemian z jego pokazaniem.

Doszliśmy zatem do końca naszego przykładu, ale nie do końca naszej lekcji. To co nam jeszcze zostało to:

budowanie rozbudowanych selektorów,
selektory atrybutów,
selektory jQuery,
selektory formularzy.

Opiszę to na prostych i krótkich przykładach, aby oszczędzić wam czasu.

Zatem zaczynajmy!

Rozbudowane selektory

Jest to nic innego jak łączenie wszystkich selektorów w jeden, znanych nam do tej pory, i tych, które jeszcze poznamy.

<div class="klasa">
<p>Lorem</p>
<p>ipsum </p>
<p>dolor </p>
</div>

$(document).ready(function()
{
    $('div.klasa > p').addClass('sample_class');
})

Podany powyżej przykład wyszukuje wszystkie elementy <p>, ale tylko te, które znajdują się w elemencie <div> o klasie „klasa”. Dla wyszukanych elementów, dzięki funkcji addClass, dodawana jest klasa „sample_class”, która zdefiniowana jest w dokumencie html lub w Kaskadowym Arkuszu Stylów. Jeśli jednak będziemy chcieli pobrać wszystkie elementy <p> ze wszystkich elementów <div>, oprócz tych, które posiadają klasę „klasa” zrobimy to następująco:

$('div:not(.klasa) > p').addClass('yellow_backgraound');

Selektory atrybutów

Aby dokonać wyboru elementów, po wartościach ich atrybutów, warto zapoznać się z wyrażeniami regularnymi. I tak, aby odnaleźć wartości znajdujące się na początku, użyjemy znaku „^”, na końcu „$”, z kolei „*” użyjemy do znalezienia wartości, znajdujących się w dowolnym miejscu łańcucha.

$(‘a[href^=https://www.microsoft.com]’) 
$(‘a[href$=.com]’)
$(‘a[href*=microsoft]’)

Należy zwrócić uwagę na to, że całe wyrażenie, filtrujące po atrybutach, musi znajdować się w nawiasach „[]” tuż po elemencie dla jakiego je wyszukujemy.

Selektory jQuery

Rozpoczynają się one od znaku „:”, np.:

:first	pierwszy element z wyszukanego zbioru
:last	ostatni element z wyszukanego zbioru
:eq(indeks)	konkretny element z wyszukanego zbioru (indeksowanie od 0)
:odd	nieparzyste elementy z wyszukanego zbioru
:even	parzyste elementy z wyszukanego zbioru
:contains(tekst)	element, zawierający podany tekst
:hidden	elementy ukryte oraz pola typu <input type=”hidden”/>
:visible	elementy widoczne

Napiszmy teraz przykład, który dla parzystych wierszy w tabeli doda klasę „evenClass”, a dla nieparzystych „oddClass”. Pamiętajmy, że indeksowanie zaczyna się od 0, więc wiersz pierwszy będzie miał indeks 0, w związku z czym zaliczany jest on do parzystych.

$(document).ready(function()
{
$(‘tr:odd’).addClass(‘oddClass’);
$(‘tr:even).addClass(‘evenClass’);

}

Selektory formularzy

Jak sama nazwa wskazuje, selektory formularzy mają na celu usprawnić nam pracę z formularzem dokumentu. Oczywiście można je łączyć z innymi selektorami w celu stworzenia bardziej precyzyjnego zapytania. Korzystanie z nich jest takie same, jak w przypadku wcześniej omówionych przykładów. Poniższa tabela pokazuje część omawianych tu selektorów:

:text	element input z atrybutem type, ustawionym na „text” <input type=”text”>
:submit	element input z atrybutem type, ustawionym na „submit” <input type=”submit”>
:checkbox	element input z atrybutem type, ustawionym na „checkobx” <input type=”checkobx”>
:radio	element input z atrybutem type, ustawionym na „radio” <input type=”radio”>
:input	elementy typu input
:checked	zaznaczone pola wyboru
:selected	wybrane elementy opcji wyboru

$(':checkbox').each(function(){
$(this).attr({checked:true})
});

Powyższy przykład wybiera wszystkie uprzednio zaznaczone pola wyboru formularza.

Podsumowanie

Z tego artykułu dowiedzieliśmy się:

co to jest jQuery,
jak używać jQuery,
jakie znaczenie mają selektory w jQuery.

Mam nadzieję, że niniejszy artykuł przybliżył Wam tematykę jQuery i zachęcił do indywidualnego dokształcania się w tematyce tego frameworka.

Share via