Sintaksa jQuery stvorena je za odabir HTML elemenata i izvođenje neke radnje na elementima.

 

 

Osnovna sintaksa je: $ (selector).action ()

 

• Znak $ za definiranje / pristup jQueryju
• (selector) za "upit (ili pronalazak)" HTML elemenata
• JQuery action() koju treba izvesti na elementima

 

 

Primjeri:

 

$(this).hide() - sakriva trenutni element.

$("p").hide() - sakriva sve <p> elemente.

$(".test").hid() - skriva sve elemente s class = "test".

$("#test").hid() - skriva element s id = "test".

 

 

 

Document Ready Event

 

Možda ste primijetili da su sve metode jQuery u našim primjerima unutar document ready događaja:

 

$(document).ready(funkcija(){

   // JQuery metode idu ovdje ...

});

 

Na ovaj se način sprečava pokretanje bilo kojeg jQuery koda prije nego što se dokument završi (spreman).

Dobro je pričekati da se dokument potpuno učita i bude spreman prije nego što radite s njim.

Ovo vam također omogućuje da imate svoj JavaScript kod ispred tijela dokumenta, u head odjeljku.

 

 

Evo nekoliko primjera radnji koje ne mogu uspjeti ako se metode pokreću prije nego što se dokument u potpunosti učita:

 

• Sakriti element koji još nije stvoren
• Dobiti veličinu slike koja još nije učitana

 

 

jQuery tim također je stvorio još kraću metodu za document ready događaj:

 

$(function(){

   // JQuery metode idu ovdje ...

});
 

jQuery Selektori

 

jQuery selektori omogućuju odabir i manipuliranje HTML elementima.

 

JQuery selektori se koriste za "pronalaženje" (ili odabir) HTML elemenata na temelju njihovog imena, id-a, klase, vrste, atributa, vrijednosti atributa i još mnogo toga.

 

Temelji se na postojećim CSS Selektorima, a osim toga, ima neke vlastite prilagođene odabire.

 

Svi selektori u jQueryju počinju s znakom dolara i zagradama: $ ().

 

 

Selektor elemenata

 

Selektor jQuery elemenata odabire elemente na temelju naziva elementa.

 

 

Sve <p> elemente možete odabrati na ovaj način:

$("p")

 

Kada korisnik klikne na gumb, svi <p> ​​elementi bit će skriveni:

 

$(document).ready (funkcija(){
  $ ("button").click(function(){
    $("p").hide();
  });
});

 

Selektor #id

 

jQuery #id selektor koristi atribut id HTML oznake za pronalazak određenog elementa.

ID bi trebao biti jedinstven unutar stranice, pa biste trebali upotrijebiti selektor #id kada želite pronaći jedan jedinstveni element.

 

Da biste pronašli element s određenim id, napišite # znak, a nakon toga id HTML elementa:

$("#Test")

 

Kad korisnik klikne na gumb, element s id = "test" bit će skriven:

 

$(document).ready(function(){
  $("button").click(function(){
    $("#test")hide();
  });
});

 

 

Selektor .class

 

.class selektor pronalazi elemente s određenom klasom.

 

Da biste pronašli elemente s određenom klasom, napišite znak točku . nakon čega slijedi naziv klase:

$(".test")

 

Kad korisnik klikne na gumb, elementi sa class = "test" bit će skriveni:

 

$ (document).ready(function(){
  $("button").click(function(){
    $("test").hide();
  });
});