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 jako type="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 oraz select

: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 type="submit"

:text

Wybiera pola wejściowe oznaczone jako type="text"

Przykład 3.12. Korzystanie z pseudoselektorów związanych z formularzami

$('#mojFormularz :input'); // pozyskuje wszystkie elementy, które akceptują dane wejściowe