
Panduan Komprehensif untuk jQuery: Daripada Asas kepada Topik Lanjutan
Pengenalan kepada jQuery
jQuery ialah pustaka JavaScript yang pantas, kecil dan kaya dengan ciri yang direka untuk memudahkan pelintasan dokumen HTML, pengendalian acara, animasi dan interaksi AJAX. Ia menyediakan API yang mudah digunakan yang berfungsi merentas berbilang penyemak imbas, menjadikannya pilihan popular untuk pembangun web.
Bermula dengan jQuery
Untuk menggunakan jQuery, anda perlu memasukkannya dalam projek anda. Anda boleh memuat turun perpustakaan atau memasukkannya melalui CDN. Begini cara menambah jQuery pada projek anda menggunakan CDN:
1 | <script src= "https://code.jquery.com/jquery-3.6.0.min.js" ></script>
|
Salin selepas log masuk
Salin selepas log masuk
Fungsi $ ialah teras jQuery, digunakan untuk memilih elemen dan menggunakan kaedah. Contohnya, $('#id') memilih elemen dengan id yang diberikan.
Pemilih dalam jQuery
Pemilih membolehkan anda menyasarkan elemen dalam DOM. Beberapa pemilih biasa termasuk:
-
Pemilih ID: $('#id')
-
Pemilih Kelas: $('.class')
-
Pemilih Elemen: $('tag')
-
Pemilih Atribut: $('[attribute=value]')
-
Pemilih Anak: $('ibu bapa > anak')
-
Penapis: Gunakan :first, :last, :even, :ganjil, dsb., untuk memperhalusi pilihan.
Acara jQuery
Acara membolehkan anda berinteraksi dengan tindakan pengguna. Acara biasa termasuk:
1 2 3 | $( '#button' ).click( function () {
alert( 'Button clicked!' );
});
|
Salin selepas log masuk
Salin selepas log masuk
-
Acara Tuding: Cetuskan tindakan apabila pengguna menuding pada elemen:
1 2 3 4 | $( '.hover-item' ).hover(
function () { $(this).addClass( 'highlight' ); },
function () { $(this).removeClass( 'highlight' ); }
);
|
Salin selepas log masuk
Salin selepas log masuk
-
Delegasi Acara: Gunakan .on() untuk elemen ditambah secara dinamik:
1 2 3 | $(document).on( 'click' , '.dynamic-btn' , function () {
alert( 'Dynamic button clicked!' );
});
|
Salin selepas log masuk
Salin selepas log masuk
Manipulasi DOM
jQuery memudahkan manipulasi DOM dengan pelbagai kaedah:
-
Menambah Elemen:
1 | $( '#list' ).append( '<li>New Item</li>' );
|
Salin selepas log masuk
Salin selepas log masuk
-
Mengalih Keluar Elemen:
-
Mengemas kini Kandungan:
1 | $( '#title' ).text( 'New Title' );
|
Salin selepas log masuk
Salin selepas log masuk
-
Atribut Pengurusan:
1 | $( 'img' ).attr( 'src' , 'new-image.jpg' );
|
Salin selepas log masuk
Salin selepas log masuk
-
Pengurusan Kelas CSS:
1 | $( '#box' ).addClass( 'highlight' ).removeClass( 'shadow' );
|
Salin selepas log masuk
Salin selepas log masuk
Kesan dan Animasi jQuery
jQuery menyediakan pelbagai kesan:
-
Tunjukkan/Sembunyikan Elemen:
1 | <script src= "https://code.jquery.com/jquery-3.6.0.min.js" ></script>
|
Salin selepas log masuk
Salin selepas log masuk
1 2 3 | $( '#button' ).click( function () {
alert( 'Button clicked!' );
});
|
Salin selepas log masuk
Salin selepas log masuk
1 2 3 4 | $( '.hover-item' ).hover(
function () { $(this).addClass( 'highlight' ); },
function () { $(this).removeClass( 'highlight' ); }
);
|
Salin selepas log masuk
Salin selepas log masuk
1 2 3 | $(document).on( 'click' , '.dynamic-btn' , function () {
alert( 'Dynamic button clicked!' );
});
|
Salin selepas log masuk
Salin selepas log masuk
AJAX dalam jQuery
Kaedah AJAX menjadikan permintaan pelayan lancar:
-
DAPATKAN Permintaan:
1 | $( '#list' ).append( '<li>New Item</li>' );
|
Salin selepas log masuk
Salin selepas log masuk
-
Permintaan POS:
-
Permintaan AJAX Tersuai:
1 | $( '#title' ).text( 'New Title' );
|
Salin selepas log masuk
Salin selepas log masuk
Utiliti dalam jQuery
1 | $( 'img' ).attr( 'src' , 'new-image.jpg' );
|
Salin selepas log masuk
Salin selepas log masuk
1 | $( '#box' ).addClass( 'highlight' ).removeClass( 'shadow' );
|
Salin selepas log masuk
Salin selepas log masuk
Pemalam jQuery
Pemalam jQuery memanjangkan fungsi. Contohnya, peluncur, pemilih tarikh dan pemalam pengesahan menjadikan tugasan lebih mudah. Untuk membuat pemalam, anda boleh menggunakan:
1 | $( '#box' ).fadeOut().fadeIn();
|
Salin selepas log masuk
Topik Lanjutan
-
Propagation dan Bubbling Acara: Urus acara dengan berkesan menggunakan .stopPropagation().
-
Objek Tertunda: Kendalikan operasi tak segerak:
1 | $( '#menu' ).slideUp().slideDown();
|
Salin selepas log masuk
Keserasian Merentas Pelayar
Kekuatan utama jQuery terletak pada keupayaannya untuk menormalkan perbezaan penyemak imbas. Walau bagaimanapun, pembangun mesti memastikan prestasi optimum dengan meminimumkan manipulasi DOM dan menggunakan ciri penyemak imbas moden jika boleh.
Kesimpulan
jQuery kekal sebagai alat yang berkuasa untuk pembangun web, menawarkan kesederhanaan dan pelbagai ciri. Walaupun rangka kerja JavaScript moden seperti React dan Vue telah menjadi popular, jQuery masih relevan untuk projek yang lebih kecil dan penyelesaian pantas.
Artikel ini memberikan gambaran menyeluruh tentang jQuery, meliputi topik asas hingga lanjutan, memastikan anda mempunyai pemahaman lengkap tentang perpustakaan serba boleh ini.
Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.
Atas ialah kandungan terperinci Menguasai jQuery: Panduan Komprehensif untuk Memudahkan Pembangunan Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!