Metode JS:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
var username = "xiaoming";
waspada (nama pengguna);
}
</script>
Berikut ini adalah metode jQuery, dan file jQuery perlu direferensikan.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ (dokumen) .ready (function () {
var username = "xiaoming";
waspada (nama pengguna);
});
</script>
Atau singkatannya
Salinan kode adalah sebagai berikut:
$ (function () {
var username = "xiaoming";
waspada (nama pengguna);
});
Ketika DOM dimuat, dapat dieksekusi (lebih awal dari Window.onload). Itu dapat muncul beberapa kali di halaman yang sama.
PS: Perbedaan utama antara keduanya
window.onload:
Acara Window.onload hanya dipicu ketika dokumen diunduh sepenuhnya ke browser. Ini berarti bahwa semua elemen pada halaman dapat dioperasikan untuk JS, yang berarti bahwa semua elemen pada halaman akan dieksekusi hanya setelah dimuat. Situasi ini sangat bermanfaat untuk menulis kode fungsional karena urutan pemuatan tidak dipertimbangkan. ,
$ (dokumen) .ready {}:
Akan dipanggil saat DOM siap sepenuhnya dan tersedia. Meskipun ini juga berarti bahwa semua elemen dapat diakses oleh skrip, itu tidak berarti bahwa semua file terkait telah diunduh. Dengan kata lain, kode akan dieksekusi setelah unduhan HMTL selesai dan diuraikan menjadi pohon DOM.
Untuk memberi contoh:
Misalkan ada halaman yang mewakili galeri, yang mungkin berisi banyak gambar besar yang dapat kita sembunyikan, ditampilkan, atau memanipulasi melalui jQuery. Jika kami mengatur antarmuka melalui halaman Onload, maka pengguna harus menunggu sampai setiap gambar diunduh sebelum dapat menggunakan halaman ini. Lebih buruk lagi, jika perilaku sedikit ditambahkan ke elemen dengan perilaku default (seperti tautan), maka interaksi pengguna dapat menyebabkan hasil yang tidak terduga. Namun, ketika kami mencoba mengaturnya dengan $ (dokumen) .ready () {}, antarmuka ini akan menyiapkan perilaku yang benar yang tersedia sebelumnya.
Menggunakan $ (dokumen) .ready () {} umumnya lebih baik daripada mencoba penangan acara onload, tetapi harus jelas bahwa karena file dukungan mungkin belum selesai, properti seperti tinggi dan lebar gambar mungkin tidak valid saat ini.
Catatan: Akan ada masalah dengan menggunakan metode menempatkan JS di bagian bawah halaman dan metode menggunakan Defer = "Defer". Yang terbaik adalah menggunakan fungsi di atas!