close

Sintaks Dasar jQuery- Memilih, Memanipulasi, dan Efek

Sintaks dasar jQuery melibatkan penggunaan pemilih(pemilih gaya CSS) dan metode untuk memanipulasi elemen yang dipilih. Berikut adalah beberapa contoh sintaks dasar jQuery:

 

Memilih elemen

  • Pilih elemen dengan nama tag HTML: $("tagname") Contoh: $("p") memilih semua <p> elemen di halaman.

  • Pilih elemen berdasarkan kelas CSS: $(".classname") Contoh: $(".myClass") memilih semua elemen dengan kelas "myClass".

  • Pilih elemen berdasarkan ID: $("#idname") Contoh: $("#myElement") pilih elemen dengan ID "myElement".

  • Pilih elemen berdasarkan atribut: $("[attribute='value']") Contoh: $("[data-type='button']") memilih elemen dengan atribut data-type yang disetel ke "tombol".

  • Menggabungkan pilihan: $("tagname.classname"), $("#idname .classname"), ...

 

Memanipulasi elemen yang dipilih

  • Mengubah konten elemen: .html(), .text() Contoh: $("#myElement").html("New content") menyetel konten HTML elemen dengan ID "myElement".

  • Memodifikasi atribut elemen: .attr(), .prop() Contoh: $("img").attr("src", "newimage.jpg") mengubah src atribut semua <img> elemen.

  • Memanipulasi kelas CSS dari suatu elemen: .addClass(), .removeClass(), .toggleClass() Contoh: $("#myElement").addClass("highlight") menambahkan kelas "highlight" ke elemen dengan ID "myElement".

  • Menyembunyikan/menampilkan elemen: .hide(), .show(), .toggle() Contoh: $(".myClass").hide() menyembunyikan semua elemen dengan kelas "myClass".

  • Menangani kejadian pada elemen: .click(), .hover(), .submit(), ... Contoh: $("button").click(function() { ... }) mendaftarkan penangan kejadian klik

 

Bekerja dengan koleksi elemen

  • Iterasi melalui koleksi: .each() Contoh: $("li").each(function() { ... }) iterasi pada setiap <li> elemen di halaman.

  • Memfilter koleksi: .filter(), .not() Contoh: $("div").filter(".myClass") memfilter <div> elemen dan memilih elemen dengan kelas "myClass".

  • Memasukkan elemen ke dalam koleksi: .append(), .prepend(), .after(), .before() Contoh: $("#myElement").append("<p>New paragraph</p>") menambahkan elemen baru <p> ke elemen dengan ID "myElement".

 

Efek dan animasi

  • Menjalankan efek fadeIn/fadeOut: .fadeIn(), .fadeOut() Contoh: $("#myElement").fadeIn(1000) memudar dalam elemen dengan ID "myElement" selama 1 detik.

  • Melakukan efek slideUp/slideDown: .slideUp(), .slideDown() Contoh: $(".myClass").slideUp(500) menggeser semua elemen dengan kelas "myClass" selama durasi 0,5 detik.

  • Melakukan animasi kustom: .animate() Contoh: $("#myElement").animate({ left: '250px', opacity: '0.5' }) menganimasikan elemen dengan ID "myElement" dengan mengubah posisi kiri dan opasitasnya.

 

Contoh-contoh ini menunjukkan cara menggunakan berbagai aspek sintaks dasar jQuery untuk memilih elemen, memanipulasi propertinya, dan menerapkan efek atau animasi. jQuery menawarkan serangkaian metode dan fungsionalitas yang kaya untuk menyederhanakan dan meningkatkan tugas pengembangan web.