close

Osnovna sintaksa jQuery – izbiranje, upravljanje in učinki

Osnovna sintaksa jQuery vključuje uporabo izbirnika(izbirnika v slogu CSS) in metod za manipulacijo izbranih elementov. Tukaj je nekaj primerov osnovne sintakse jQuery:

 

Izbira elementov

  • Izberi elemente po imenu oznake HTML: $("tagname") Primer: $("p") izbere vse <p> elemente na strani.

  • Izberi elemente po razredu CSS: $(".classname") Primer: $(".myClass") izbere vse elemente z razredom "myClass".

  • Izbira elementov po ID-ju: $("#idname") Primer: $("#myElement") izbere element z ID-jem "myElement".

  • Izberi elemente po atributu: $("[attribute='value']") Primer: $("[data-type='button']") izbere elemente z atributom, data-type nastavljenim na "button".

  • Združevanje izbir: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulacija izbranih elementov

  • Spreminjanje vsebine elementa: .html(), .text() Primer: $("#myElement").html("New content") nastavi vsebino HTML elementa z ID-jem "myElement".

  • Spreminjanje atributov elementa: .attr(), .prop() Primer: $("img").attr("src", "newimage.jpg") spremeni src atribut vseh <img> elementov.

  • Manipulacija razredov CSS elementa: .addClass(), .removeClass(), .toggleClass() Primer: $("#myElement").addClass("highlight") doda razred "highlight" elementu z ID-jem "myElement".

  • Skrivanje/prikaz elementov: .hide(), .show(), .toggle() Primer: $(".myClass").hide() skrije vse elemente z razredom "myClass".

  • Obravnava dogodkov na elementih: .click(), .hover(), .submit(), ... Primer: $("button").click(function() { ... }) registrira obravnavo dogodkov klika

 

Delo z zbirkami elementov

  • Ponavljanje skozi zbirko: .each() Primer: $("li").each(function() { ... }) ponavlja čez vsak <li> element na strani.

  • Filtriranje zbirke: .filter(), .not() Primer: $("div").filter(".myClass") filtrira <div> elemente in izbere tiste z razredom "myClass".

  • Vstavljanje elementov v zbirko: .append(), .prepend(), .after(), .before() Primer: $("#myElement").append("<p>New paragraph</p>") doda nov <p> element elementu z ID-jem "myElement".

 

Učinki in animacije

  • Izvajanje učinkov fadeIn/fadeOut: .fadeIn(), .fadeOut() Primer: $("#myElement").fadeIn(1000) zbledi element z ID-jem "myElement" v trajanju 1 sekunde.

  • Izvajanje učinkov slideUp/slideDown: .slideUp(), .slideDown() Primer: $(".myClass").slideUp(500) drsi navzgor po vseh elementih z razredom "myClass" v trajanju 0,5 sekunde.

  • Izvajanje animacij po meri: .animate() Primer: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animira element z ID-jem "myElement", tako da spremeni njegov levi položaj in motnost.

 

Ti primeri prikazujejo, kako uporabiti različne vidike osnovne sintakse jQuery za izbiro elementov, manipulacijo njihovih lastnosti in uporabo učinkov ali animacij. jQuery ponuja bogat nabor metod in funkcij za poenostavitev in izboljšanje nalog spletnega razvoja.