jQuery za početnike

jQuery osnove
U ovom tutorialu ćemo vam objasniti osnove jQuerija. Kao prvo u toriali nećemo puno pisati teoretskog materijala o jQueriju nego više ćemo objašnjavati kroz primjere. No spomenut ćemo da je jQuery veoma dobar JavaScript framework. Jquery će vam uvelike smanjiti muke kod izrade JavaScript koda. Više možete pročitati ovdje: http://jquery.com/.
Prvo što je potrebno napraviti jest uključiti jQuery js file u vaš html kod. Unutar <head> taga je potrebno dodati:

<script type="text/javascript" src="jquery.js"></script>


Naravno prije toga morate skinuti jquery.js i staviti ga na isto mjesto gdje vam se nalaze html datoteke.


Kratka usporedba
Za početak napravit ćemo jedan primjer koji će vam pokazati koliko je programiranej JavaScript-om (JS u nastavku) jednostavnije ako koristite jQuery. Napravit ćemo jednostavan program koji će u div tag s id-om "div1" upisati "Ovo je upisani HTML".

Korištenjem samo JS-a kod bi bio:

<script type="text/javascript">
   document.getElementById("div1").innerHTML = "Ovo je upisani HTML";
</script>

Dok bi uz korištenje jQuerija to izveli ovako:

<script type="text/javascript">
    $("#div1").html("Ovo je upisani HTML");
</script>


Puno jednostavnije? Je, slažemo se :). I puno preglednije.

Dohvaćanje i izmjena vrijednosti jQuery-em
Recimo da imamo input definirano ovako:

<input type="text" id="polje1" />


Za čitanje i izmjenu vrijednosti polja možemo koristiti:

<script type="text/javascript">
  $("#polje1").val("Nova vrijednost"); //setiranje vrijednosti
  var val = $("#polje1").val(); //dohvacanje vrijednosti polja 
  alert(val); //ispisuje "Nova vrijednost"
</script>


Ukoliko imamo dropdown, definiran ovako:

<select id="polje2"> 
  <option value="1">Izbor 1</option> 
  <option value="2">Izbor 2</option>
</select>


Za čitanje i izmjenu vrijednosti možemo koristiti kod sličan onome gore:

<script type="text/javascript">
  $("#polje2").val(2); //setiranje vrijednosti na "Izbor 2" 
  var val = $("#polje2").val(); //dohaćanje vrijednosti polja  
  alert(val); //ispisuje "2"
</script>


Ukoliko želite dobiti tekst odabrane opcije, koristi se selektor $("#dropdown_id option:selected").text(), ili za gornji primjer, to bi bilo

<script type="text/javascript"> 
  $("#polje2").val(2);   
  var text = $("#polje2 option:selected").text(); 
  alert(text); //ispisuje "Izbor 2"
</script>

Jednostavni efekti
Želite skriti ili pokazati neki element na stranici? I još tu akciju napraviti tako da prijelaz bude animiran? Nikakav problem ukoliko koristite jQuery.

Recimo da imamo element definiran u HTML-u:

<div style="border:1px dotted #999999" id="testDiv">
  <span onclick="hideDiv()">Klikni me<span></div>
<span onclick="showDiv()">Reset<span>


<script type="text/javascript"> 
  function hideDiv(){ 
    $("#testDiv").hide("fast");
  }

  function showDiv(){  
    $("#testDiv").show("fast");
  }
</script>


Vidimo da imamo dvije javascript funkcije hideDiv i showDiv. Prva funkcija poziva jQuery funkciju hide s parametrom 'fast', što znači da će se elementi određeni selektorom (u našem slučaju samo div s id-om testDiv) sakriti i to animirano i brzo. Mogući parementri su:

     - bez parametra – nema animacije
     - fast – prijelaz je brz
     - slow – prijelaz je polagan


To bi bilo dosta za početak. Ukoliko vas za sada zanima više možete posjetiti službenu stranicu http://jquery.com/.