Selektory i filtry

Selektory

 

Siłą jQuery jest przeszukiwanie dokumentów HTML, a właściwie drzewa DOM za pomocą znanych z CSS selektorów. Selektory w języku CSS określają do którego elementu dokumentu HTML odnoszą się zdefiniowane style:

 

body {

background: #fff

}

 

W ten prosty sposób, możemy odwołać się do dowolnego elementu w dokumencie HTML. jQuery wykorzystuje prostotę definiowania selektorów języka CSS do łatwego dostępu do elementów DOM z poziomu JavaScriptu i wykonywania na nich dalszych operacji:

 

$(function(){

$('body').css('background', '#fff')

})

 

jQuery obsługuje selektory CSS w wersji 3 przez co możliwe stają się następujące konstrukcje:

 

<ul>

<li>element 1</li>

<li>element 2</li>

<li>element 3</li>

<li>element 4</li>

</ul>

$(function(){

$('ul li:nth-child(2)').css('background', 'yellow')

$('ul li:last-child').css('background', 'red')

})

 

W zależności od podanego selektora jQuery może zwrócić jeden lub wiele elementów. Większość operacji można wykonywać zarówno na pojedynczym elemencie jak i całej kolekcji elementów.

Oczywiście modyfikacja stylu elementów za pomocą jQuery to dopiero wierzchołek jego możliwości.

 

Selektory podstawowe

 

Podstawowe filtry

 

 

Filtry zawartości