Bagaimana untuk menulis js dalam jquery

jQuery ialah perpustakaan JavaScript popular yang memudahkan banyak tugas JavaScript biasa. jQuery boleh digunakan untuk tugas seperti traversal dokumen, pengendalian acara, kesan animasi dan manipulasi DOM. Apabila menulis kod JavaScript dengan jQuery, pastikan anda mengikuti beberapa amalan terbaik untuk menjadikan kod anda lebih jelas, mudah difahami dan lebih mudah diselenggara.

Berikut ialah beberapa amalan terbaik untuk menulis JavaScript dalam jQuery:

1 Rujuk perpustakaan jQuery dalam halaman

Sebelum menggunakan jQuery, anda mesti merujuk halaman tersebut terlebih dahulu. Memperkenalkan perpustakaan jQuery. Letakkan perpustakaan jQuery di dalam teg HEAD, pastikan ia dimuatkan sebelum sebarang kod dalam halaman yang menggunakan jQuery. Contohnya:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
130c56b43860fff03b79bb181c3ac3a82cacc6d41bbb37262a98f745aa00fbf0
32d8a8489ccf6ad22016e69b0555932f2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
< ;!-- Kandungan halaman-->
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2 Gunakan kaedah $(document).ready()

Dalam kod JavaScript anda, gunakan kaedah $(document).ready() untuk memastikan Model Objek Dokumen (DOM) halaman dimuatkan sebelum melaksanakan kod. Ini memastikan elemen DOM telah dimuatkan sebelum cuba mengaksesnya. Contohnya:

$(document).ready(function() {
// Kod
});

atau gunakan singkatan:

$( function () {
// Kod
});

3 Gunakan pembolehubah untuk cache pemilih jQuery

Jika pemilih jQuery yang sama digunakan beberapa kali dalam kod, cache. ia Menyimpan dalam pembolehubah boleh meningkatkan prestasi kod anda. Contohnya:

var $domElement = $('#dom-element');
$domElement.hide();
$domElement.show();

4 . Elakkan daripada memilih elemen yang sama berbilang kali

Apabila anda perlu melakukan berbilang operasi pada elemen yang sama dalam kod, adalah lebih baik untuk menyimpannya ke dalam pembolehubah untuk mengelakkan pemilihan berulang. Contohnya:

var $domElement = $('#dom-element');
$domElement.hide();
$domElement.show();

sebaliknya :

$('#dom-element').hide();
$('#dom-element').show();

5 🎜>

jQuery membenarkan panggilan berantai ke pelbagai kaedah. Ini menjadikan kod lebih ringkas dan mengurangkan bilangan baris kod. Contohnya:

$('#dom-element').addClass('active').show();

6 Nyatakan ruang nama acara

Gunakan secara eksplisit menamakan Ruang membantu mengelakkan kesan sampingan peristiwa yang tidak diingini. Contohnya:

$(document).on('click.someNamespace', function() {

// Code
});

$(document).off ( '.someNamespace');

7. Gunakan perwakilan acara

Apabila anda perlu melampirkan acara pada banyak elemen, menggunakan perwakilan acara boleh mengurangkan bilangan baris kod dan meningkatkan prestasi. Contohnya:

$(document).on('klik', '#dom-element', function() {

// Kod
});

8 . Gunakan pemilih kelas dan bukannya pemilih ID

Pemilih ID lebih perlahan daripada pemilih kelas kerana penyemak imbas mesti mencari secara global untuk semua ID dalam dokumen HTML dan ID mestilah unik dalam dokumen yang sama. Oleh itu, menggunakan pemilih kelas boleh meningkatkan prestasi. Contohnya:

$('.dom-element').hide();

bukannya:

$('#dom-element').hide( ) ;

9 Gunakan kaedah html() dan bukannya kaedah text()

Apabila anda perlu mengubah suai kandungan elemen, menggunakan kaedah html() jQuery akan menjadi lebih pantas daripada kaedah text(). Kerana apabila menggunakan kaedah text(), penyemak imbas perlu melintasi keseluruhan pepohon DOM untuk mendapatkan teks elemen, tetapi tidak perlu melakukan ini apabila menggunakan kaedah html(). Contohnya:

$('#dom-element').html('new content');

10 Cache atribut elemen DOM

Apabila perkara yang sama memerlukan untuk diakses beberapa kali sifat unsur, cache mereka ke dalam pembolehubah untuk meningkatkan prestasi.

var $domElement = $('#dom-element');

var elementOffset = $domElement.offset();

11 proses permintaan AJAX

Menggunakan kaedah $.ajax() jQuery boleh mengendalikan permintaan AJAX dengan mudah. Kaedah $.ajax() membolehkan anda menentukan URL yang diminta, kaedah HTTP, jenis data, dsb. Contohnya:

$.ajax({

url: 'ajax-url',
kaedah: 'POST',
data: {name: 'value'},
dataType : 'json',
kejayaan: function(data) {

// 成功的代码

},

ralat: function() {

// 错误的代码

}

});

Ringkasnya, menulis kod JavaScript dalam jQuery memerlukan mengikuti beberapa amalan terbaik untuk menjadikan kod lebih mudah dibaca, mudah diselenggara dan berprestasi lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menulis js dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!