[HTML|JS|CSS] jQuery : Selektory i Filtry

Najważniejszą przewagą jQuery w stosunku do czystego kodu JavaScript są selektory, czyli konstrukcje pozwalające w łatwy sposób przeszukiwać drzewo DOM. Skrócony zapis (przeważnie do jednej linijki) znacznie poprawia czytelność kodu. Poniżej przedstawione zostaną najważniejsze selektory. Należy pamiętać, że selektor zwracam kolekcję elementów, na której możemy operować.

• wyszukiwanie po id, klasie, typie elementu, z uwzględnieniem kilku kryteriów

    //id
    $('#main_container').css("border","3px solid red");    
    //class
    $('.btn-white').css("border","3px solid red");
    //element
    $('textarea').css("border","3px solid red");
    //multiple elements
    $('textarea, .btn-white').css("border","3px solid red");

• wyszukiwanie po relacjach parent - child, lub ancestor - descendant (potomek może być wiele poziomów niżej w hierarchii, dziecko tylko jeden poziom)..

    // parent > child
    $('.component > div').css("border","3px solid red");
    //ancestor descendant
    $('.component  div').css("border","3px solid red");
    //prev + next
    $('.span3 + .span2').css("border","3px solid red");

Przeszukane kolekcje możemy filtrować zestawem gotowych filtrów, dopisywanych po dwukropku. 

•  na podstawie indeksu

$('.btn-white:first').css("border","3px solid red");
$('.btn-white:last').css("border","3px solid blue");
//tylko nieparzyste
$('.btn-white:odd').css("border","3px solid black");
var n = 1;
//o indeksach mniejszych niz
$('.btn-white:lt('+n+')').css("border","3px solid red");
//o indeksie rownym
$('.btn-white:eq('+n+')').css("border","3px solid red");
//o indeksie rozne od parzystych
$('.btn-white:not(:even)').css("border","3px solid blue")
//o indeksach wiekszych niz
$('.btn-white:gt('+n+')').css("border","3px solid black");

• na podstawie relacji

$('.row-fluid:first-child').css("border","3px solid red");
$('.row-fluid:last-child').css("border","3px solid blue");   
//kazdy element (w tym przypadku div), 
//ktory jest jedynym dzieckiem dla swojego rodzica
$('div:only-child').css("border","3px solid red");
$('.row-fluid:nth-child(2)').css("border","3px solid blue"); 

• na podstawie zawartości

$('button:contains('+text+')').css("border","3px solid red");
$('div:not(:empty)').css("border","3px solid red");
$('div:empty').css("border","3px solid blue");
$('div:has(h4)').css("border","3px solid red");
$('#main_container:parent').css("border","3px solid red");