Pobieranie referencji do obiektów za pomocą jQuery

Zgodnie z tytułem dzisiejszego wpisu, przedstawię dziś pobieranie referencji do obiektów za pomocą jQuery za pomocą selektorów CSS. W związku z tym, na początek przyjrzymy się jak z tej możliwości korzystać, a następnie przejdziemy do opisu różnego rodzaju selektorów oferowanych nam przez CSS3, a które stosować możemy do wyszukiwania elementów w drzewie obiektów DOM. Jest to już przedostatni wpis z cyklu MCSD 70-480, zapraszam więc niniejszym do lektury.

Wyszukiwanie elementów w jQuery

Na początek przyjrzyjmy się więc samej bibliotece jQuery oraz temu jak można za jego pomocą wyszukiwać elementy. Spójrzmy na prosty przykład:

<div id="container">
    <p>tekst</p>
    <p class="paragraph">drugi tekst</p>
</div>

Mając tak zdefiniowany kod HTML, możemy teraz w prosty sposób odwołać się do elementu <div> za pomocą jego identyfikatora:

$('#container')

Podobnie możemy wyszukać wszystkie elementy których klasa to ‘paragraph’:

$('.paragraph')

Możemy także znaleźć poprostu wszystkie elementy <p>:

$('p')

Prawda, że proste? Dzięki takiemu sposobowi selekcji, możemy teraz łatwo przypisywać akcje lub manipulować elementami DOM. Spójrzmy na taki przykład:

$('p').click(function () {
    alert('kliknięcie!');
});

Wystarczyło wywołać na rzecz takiego selektora funkcję ‘click’ aby móc przypisać wszystkim zwracanym przez niego elementom obsługę zdarzenia kliknięcia!

To tyle podstaw stosowania selektorów w jQuery, w kolejnym paragrafie opiszę podstawowe grupy selektorów.

Podstawowe selektory CSS

Na początek spójrzmy na najbardziej podstawowe selektory CSS, z których korzystać można do wyszukiwania elementów w dokumencie DOM za pomocą biblioteki jQuery (część z nich pokazałem już w przykładach w poprzednim paragrafie):

* - powoduje wyszukanie wszystkich elementów
#id - wyszukanie elementu po jego identyfikatorze (zwracany jest zawsze jeden element, ponieważ w dokumencie DOM nie może występować więcej niż jeden element o tym samym “id”)
.class - wyszukiwanie elementów na podstawie klasy CSS; zwracane są wszystkie elementy posiadające tę klasę
.class1, .class2 - w ten sposób można wyszukać wszystkie elementy posiadające ustawioną klasę “class1” lub “class2”
element - wyszukiwanie wszystkich elementów po ich nazwie; na przykład” “p”, “div” czy “a”
element1, element2 - pobieranie wszystkich elementów podanych elementów po ich nazwie

Kolejna grupa selektorów pozwala na wyszukiwanie elementów na podstawie wartości ich atrybutów. Na początek opiszę sposób ich wykorzystania. Generalnie zapis jest taki:

$('[href]')

Powyższy zapis powoduje wyszukanie wszystkich elementów zawierających atrybut “href”. Jak widać, stosujemy nazwę atrybutu w nawiasach klamrowych. Oprócz tego możemy być bardziej precyzyjni:

$("[href='index.html']")

W powyższy sposób wyszukujemy wszystkie elementy, które mają ustawioną wartość atrybutu “href” na “index.html”. Teraz możemy być jeszcze bardziej precyzyjni… :

$("a[href='index.html']")

To może nie jest najszczęśliwszy przykład, bo wychodzi na to samo co we wcześniejszym przykładzie ;) Pokazuje to jednak, że możemy dodatkowo ograniczyć selekcje tylko do konkretnych elementów posiadających daną wartość wybranego przez nas atrybutu.

Operatory porównania

Powyżej szukaliśmy elementów, których wartość podanego atrybutu równa się podanej wartości. Oprócz tego możemy stosować następujące operatory porównania:

= - zwykły znak równości
!= - wszystkie elementy, których podany atrybut jest różny od podanej wartości
$= - elementy, których wartość kończy się podaną wartością; np. “[href$=’.png’]” czyli wszystkie linki do plików PNG
^= - podobny do poprzedniego z tym, że dotyczy wyszukiwania elementów zaczynających się na podaną wartość
~= - wszystkie elementy posiadające atrybut zawierający podane słowo
*= - wszystkie element posiadające atrybut zawierający podany ciąg znaków

Selektory zależne

Zanim przejdziemy do pseudo-klas i pseudo-elementów, wspomnieć jeszcze muszę o selektorach “zależnych”. Myślę, że jak je wymienię i opatrzę każdy z nich opisem to wszystko stanie się jasne:

rodzic > potomek - przykład: “div > p” czyli wszystkie elementy <p>, które są bezpośrednim potomkiem elementu <div>
rodzic potomek - przykład: “div p” czyli wszystkie elementy <p>, które są potomkami jakiegokolwiek elementu <div> (nie ważne, w którym “pokoleniu”)
element + następnik - przykład “div + p” czyli każdy element <p> znajdujący się obok elementu <div>
element ~ rodzeństwo - przykład “div ~ p” czyli wszystkie elementy <p>, które są rodzeństwem elementu <div> (a więc takie, które mają wspólnego rodzica)

Stosowanie pseudo-klas i pseudo-elementów

Pseudo-klasy w selektorach CSS, są to dodatkowe “podselektory” pozwalające na wyszukiwanie na podstawie stanu lub typu selektora, z którym są skorelowane. Najlepiej spojrzeć na przykład:

$("a:visited")

Pseudo-klasy i pseudo-elementy

Użyta została tutaj pseudo-klasa “visited”, pozwalająca ograniczyć wyszukiwanie elementów “a” tylko do tych, które zostały już odwiedzone. Jak widać, do deklaracji selektora wraz z pseudo-klasą wykorzystuje się dwukropek. Poniżej lista najważniejszych pseudo-klas wraz z opisem:

:link - pseudo-klasa elementu <a>; oznacza nie odwiedzony jeszcze link
:visited - pseudo-klasa elementu <a>; oznacza odwiedzony już link
:active - pseudo-klasa elementu <a>; oznacza aktywny link
:hover - oznacza link, na który najechał wskaźnik myszy (nie jest selektorem ale wymieniam bo jest jedną z pseudo-klas)
:focus - znajduje element, na którym ustawiony jest obecnie “wybrany/aktywny”
:first-child - znajduje pierwsze “dziecko” danego elementu
:lang(język) - znajduje każdy element, którego atrybut “lang” ustawiony jest na podany język

Pseudo-elementy, w przeciwieństwie do pseudo-klas, nie dotyczą stanu elementu tylko jego treści. Pseudo-elementami są: :after, :before, :first-line, :first-letter. Jako, że ten wpis dotyczy selektorów jQuery, to ich opis dzisiaj pominę. Wrócimy do nich jeszcze w kolejnym wpisie.

Selektory

Będąc przy pseudo-klasach, należy wspomnieć jeszcze o selektorach, podobnych do pseudo-klas, ponieważ używających ich składni z dwukropkiem. Poniżej cztery najbardziej podstawowe z nich:

:first - pozwala znaleźć elementy danego typu występujący w dokumencie jako pierwszy
:last - znajduje ostatnie wystąpienie elementu danego typu
:even - znajduje wszystkie parzyste elementy danego typu (przydatne na przykład przy wierszach tabeli)
:odd - znajduje wszystkie nieparzyste elementy danego typu

Kolejna grupa takich selektorów dotyczy kontrolek formularzy. Spójrzmy jakie mamy możliwości:

:input - po prostu wszystkie “inputy”
:text - wszystkie “inputy” typu “text”
:password - kontrolki typu “password”
:radio - kontrolki typu “radio”
:checkbox - kontrolki typu “checkbox”
:submit - przyciski zatwierdzające formularz
:reset - kontrolki typu “reset”
:button - wszystkie przyciski
:image - kontrolki typu “image”
:file - kontrolki ładowania plików
:enabled - wszystkie włączone kontrolki formularza
:disabled - wszystkie wyłączone kontrolki formularza
:checked - wszystkie “checkboxy” z zaznaczonym “ptaszkiem”
:selected - wszystkie wybrane kontrolki formularza

Zamiast stosować powyższe selektory, można oczywiście także skorzystać z tych, które poznaliśmy wcześniej w tym artykule. Można na przykład zamiast stosować selektor “:text”, użyć zapisu “input[type=text]”. Myślę więc, że mechanizm ten jest całkiem elastyczny.

Oczywiście to nie wszystkie dostępne selektory, ja jednak poprzestanę na tych, po więcej odsyłam na stronę poświęconą temu zagadnieniu w portalu w3schools.com.