close

Osnovna sintaksa jQueryja- odabir, rukovanje i efekti

Osnovna sintaksa jQueryja uključuje korištenje selektora(selektor u stilu CSS-a) i metoda za manipuliranje odabranim elementima. Evo nekoliko primjera osnovne sintakse jQueryja:

 

Odabir elemenata

  • Odaberite elemente prema nazivu HTML oznake: $("tagname") Primjer: $("p") odabire sve <p> elemente na stranici.

  • Odaberite elemente prema CSS klasi: $(".classname") Primjer: $(".myClass") odabire sve elemente s klasom "myClass".

  • Odaberite elemente prema ID-u: $("#idname") Primjer: $("#myElement") odabire element s ID-om "myElement".

  • Odaberite elemente prema atributu: $("[attribute='value']") Primjer: $("[data-type='button']") odabire elemente s atributom data-type postavljenim na "gumb".

  • Kombiniranje odabira: $("tagname.classname"), $("#idname .classname"), ...

 

Manipuliranje odabranim elementima

  • Promjena sadržaja elementa: .html(), .text() Primjer: $("#myElement").html("New content") postavlja HTML sadržaj elementa s ID-om "myElement".

  • Promjena atributa elementa: .attr(), .prop() Primjer: $("img").attr("src", "newimage.jpg") mijenja se src atribut svih <img> elemenata.

  • Manipuliranje CSS klasama elementa: .addClass(), .removeClass(), .toggleClass() Primjer: $("#myElement").addClass("highlight") dodaje klasu "highlight" elementu s ID-om "myElement".

  • Skrivanje/prikazivanje elemenata: .hide(), .show(), .toggle() Primjer: $(".myClass").hide() skriva sve elemente s klasom "myClass".

  • Rukovanje događajima na elementima: .click(), .hover(), .submit(), ... Primjer: $("button").click(function() { ... }) registrira rukovatelja događajima klika

 

Rad sa zbirkama elemenata

  • Iteracija kroz zbirku: .each() Primjer: $("li").each(function() { ... }) iteracija preko svakog <li> elementa na stranici.

  • Filtriranje zbirke: .filter(), .not() Primjer: $("div").filter(".myClass") filtrira <div> elemente i odabire one s klasom "myClass".

  • Umetanje elemenata u kolekciju: .append(), .prepend(), .after(), .before() Primjer: $("#myElement").append("<p>New paragraph</p>") dodaje novi <p> element elementu s ID-om "myElement".

 

Efekti i animacije

  • Izvođenje efekata fadeIn/fadeOut: .fadeIn(), .fadeOut() Primjer: $("#myElement").fadeIn(1000) blijedi element s ID-om "myElement" u trajanju od 1 sekunde.

  • Izvođenje efekata slideUp/slideDown: .slideUp(), .slideDown() Primjer: $(".myClass").slideUp(500) klizi prema gore prema gore svim elementima s klasom "myClass" u trajanju od 0,5 sekundi.

  • Izvođenje prilagođenih animacija: .animate() Primjer: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animira element s ID-om "myElement" promjenom njegovog lijevog položaja i neprozirnosti.

 

Ovi primjeri pokazuju kako koristiti različite aspekte osnovne sintakse jQueryja za odabir elemenata, manipuliranje njihovim svojstvima i primjenu efekata ili animacija. jQuery nudi bogat skup metoda i funkcionalnosti za pojednostavljenje i poboljšanje zadataka web razvoja.