jQuery osnovni selektori : Basic Selectors

jQuery osnovni selektori : Basic Selectors

Kod dinamičke promjene web stranice često je potrebno mijenjati sadržaj stranice. Zato prvo trebamo dohvatiti elemente koje želimo mijenjati.

jQuery omogućava dohvaćanje elemenata koristeći vrstu elementa, njihov id, klasu, svojstva, vrijednosti svojstava…

Škola web dizajna

Selektor elementa : The Element Selector

Selektor elementa pronalazi sve elemente zadanog naziva elementa.

Želimo li selektirati sve odlomke na web stranici koristimo slijedeći selektor:

$('p');

Ako želimo selektirati sve div elemente u html dokumentu koristimo selektor:

$('div');

Dohvaćanje elemenata možemo suziti uporabom kombiniranih selektora.

id Selektor : The id Selector

Id selektor koristi id svojstva HTML elementa kako bi pronašao željeni element. Svojstvo id elementa imati jedinstvenu vrijednost, kako bi id selektor dohvatio samo html element.

Za dohvaćanje html elementa koji ima željenu vrijednost id svojstva, kao selektor navodimo vrijednost id svojstva, a ispred njega stavljamo točku #, kao i u CSS-u, npr:

<p>Primjer korištenja id selektora:</p>
<br />
<p id="inner">Element s id svojstvom<br /> 
"inner" je plave boje</p>
<br />
<p>Ovo je običan odlomak.</p>

<script type="text/javascript">
$(function()
{
  $('#inner').css('color', 'blue');
});
</script>

Sadržaj web stranice nakon izvođenja gornjeg primjera:

Primjer uporabe id selektora:
Element s ID svojstvom 
"inner" je plave boje
Ovo je običan odlomak.

Selektor klase: The Class Selector

Selektor klase dohvaća html elemente koji imaju zadanu vrijednost svojstva klase html elementa.

Za dohvaćanje svih html elemenata koji imaju željenu vrijednost class svojstva, kao selektor navodimo vrijednost class svojstva, a ispred njega stavljamo točku ., kao i u CSS-u, npr:

$('.boja');

Primjer korištenja selektora klase:

<p class="boja">Test 1</p>
<p>Test 2</p>
<p class="boja">Test 3</p>

<script type="text/javascript">
$(function()
{
  $('.boja').css('color', 'blue');
});
</script>

Rezultat nakon pokretanja gornjeg primjera u web pregledniku:

Test 1
Test 2
Test 3