jQuery osnovni selektori : Basic Selectors

Kod dinamičke promjene web stranice često je potrebno mijenjati sadržaj stranice. Za to je najprije potrebno pronaći elemente koje želimo mijenjati.

jQuery omogućava pronalaženje 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');

Selekciju elemenata možemo suziti navođenjem drugih selektora nakon osnovnog selektora.

ID Selektor : The ID Selector

ID selektor koristi ID svojstva HTML elementa kako bi pronašao željeni element. ID svojstvo elementa mora biti jedinstveno tako da ID selektor koristimo kada želimo pronaći jedan jedinstveni element.

Za pronalaženje elementa određenog identifikatora ispred imena ID upisujemo ljestve kao i u CSS-u, npr:

<p>Primjer korištenja ID selektora:</p>
<br />
<p id="inner">Element s ID svojstvom<br /> 
"inner" 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:

Korištenje ID selektora:
Element s ID svojstvom
"inner" je plave boje

Ovo je običan odlomak.

Selektor klase: The Class Selector

Selektor klase koristi svojstvo klase HTML elementa kako bi pronašao željeni element.

Za pronalaženje elementa koji ima zadano svojstvo klase ispred imena klase upisujemo 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