close

Sintaks dhasar jQuery- Milih, Manipulasi, lan Efek

Sintaks dhasar jQuery kalebu nggunakake pamilih(pemilih gaya CSS) lan cara kanggo ngapusi unsur sing dipilih. Ing ngisor iki sawetara conto sintaks dhasar jQuery:

 

Milih unsur

  • Pilih unsur miturut jeneng tag HTML: $("tagname") Conto: $("p") milih kabeh <p> unsur ing kaca.

  • Pilih unsur miturut kelas CSS: $(".classname") Conto: $(".myClass") milih kabeh unsur karo kelas "myClass".

  • Pilih unsur miturut ID: $("#idname") Conto: $("#myElement") milih unsur kanthi ID "myElement".

  • Pilih unsur miturut atribut: $("[attribute='value']") Conto: $("[data-type='button']") milih unsur kanthi atribut data-type disetel dadi "tombol".

  • Pilihan gabungan: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulasi unsur sing dipilih

  • Ngganti isi unsur: .html(), .text() Conto: $("#myElement").html("New content") nyetel isi HTML saka unsur karo ID "myElement".

  • Ngowahi atribut unsur: .attr(), .prop() Conto: $("img").attr("src", "newimage.jpg") ngganti src atribut kabeh <img> unsur.

  • Manipulasi kelas CSS saka unsur: .addClass(), .removeClass(), .toggleClass() Conto: $("#myElement").addClass("highlight") nambah kelas "sorot" kanggo unsur karo ID "myElement".

  • Ndhelikake / nuduhake unsur: .hide(), .show(), .toggle() Conto: $(".myClass").hide() ndhelikake kabeh unsur karo kelas "myClass".

  • Nangani acara ing unsur: .click(), .hover(), .submit(), ... Conto: $("button").click(function() { ... }) ndhaptar handler acara klik

 

Nggarap koleksi unsur

  • Iterasi liwat koleksi: .each() Conto: $("li").each(function() { ... }) iterates liwat saben <li> unsur ing kaca.

  • Nyaring koleksi: .filter(), .not() Conto: $("div").filter(".myClass") nyaring <div> unsur lan milih sing karo kelas "myClass".

  • Nglebokake unsur menyang koleksi: .append(), .prepend(), .after(), .before() Conto: $("#myElement").append("<p>New paragraph</p>") nambah unsur anyar <p> menyang unsur karo ID "myElement".

 

Efek lan animasi

  • Nindakake efek fadeIn / fadeOut: .fadeIn(), .fadeOut() Conto: $("#myElement").fadeIn(1000) fades ing unsur karo ID "myElement" ing wektu 1 detik.

  • Nindakake efek slideUp / slideDown: .slideUp(), .slideDown() Conto: $(".myClass").slideUp(500) minger munggah kabeh unsur karo kelas "myClass" ing wektu 0,5 detik.

  • Nindakake animasi adat: .animate() Conto: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animates unsur karo ID "myElement" kanthi ngganti posisi kiwa lan opacity.

 

Conto iki nduduhake carane nggunakake aspèk beda saka sintaks dhasar jQuery kanggo milih unsur, ngapusi sifat, lan aplikasi efek utawa animasi. jQuery nawakake macem-macem cara lan fungsi kanggo nyederhanakake lan ningkatake tugas pangembangan web.