close

Sintaks Asas jQuery- Memilih, Memanipulasi dan Kesan

Sintaks asas jQuery melibatkan penggunaan pemilih(pemilih gaya CSS) dan kaedah untuk memanipulasi elemen yang dipilih. Berikut ialah beberapa contoh sintaks asas jQuery:

 

Memilih elemen

  • Pilih elemen mengikut nama teg HTML: $("tagname") Contoh: $("p") memilih semua <p> elemen pada halaman.

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

  • Pilih elemen mengikut ID: $("#idname") Contoh: $("#myElement") memilih elemen dengan ID "myElement".

  • Pilih elemen mengikut atribut: $("[attribute='value']") Contoh: $("[data-type='button']") memilih elemen dengan atribut data-type ditetapkan kepada "butang".

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

 

Memanipulasi elemen terpilih

  • Menukar kandungan elemen: .html(), .text() Contoh: $("#myElement").html("New content") menetapkan kandungan HTML elemen dengan ID "myElement".

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

  • Memanipulasi kelas CSS elemen: .addClass(), .removeClass(), .toggleClass() Contoh: $("#myElement").addClass("highlight") menambah kelas "highlight" pada elemen dengan ID "myElement".

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

  • Mengendalikan acara pada elemen: .click(), .hover(), .submit(), ... Contoh: $("button").click(function() { ... }) mendaftar pengendali acara klik

 

Bekerja dengan koleksi elemen

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

  • Menapis koleksi: .filter(), .not() Contoh: $("div").filter(".myClass") menapis <div> elemen dan memilih mereka yang mempunyai kelas "myClass".

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

 

Kesan dan animasi

  • Melakukan kesan fadeIn/fadeOut: .fadeIn(), .fadeOut() Contoh: $("#myElement").fadeIn(1000) pudar dalam elemen dengan ID "myElement" dalam tempoh 1 saat.

  • Melakukan kesan slaidUp/slideDown: .slideUp(), .slideDown() Contoh: $(".myClass").slideUp(500) slaid ke atas semua elemen dengan kelas "myClass" dalam tempoh 0.5 saat.

  • Melakukan animasi tersuai: .animate() Contoh: $("#myElement").animate({ left: '250px', opacity: '0.5' }) menghidupkan elemen dengan ID "myElement" dengan menukar kedudukan kiri dan kelegapannya.

 

Contoh ini menunjukkan cara menggunakan pelbagai aspek sintaks asas jQuery untuk memilih elemen, memanipulasi sifatnya dan menggunakan kesan atau animasi. jQuery menawarkan set kaedah dan fungsi yang kaya untuk memudahkan dan meningkatkan tugas pembangunan web.