Ganti Fungsi Sedia Dokumen JQuery dengan JavaScript-tutorial js-php.cn

Ganti Fungsi Sedia Dokumen JQuery dengan JavaScript

Lisa Kudrow

Lepaskan： 2025-02-17 09:56:10

asal

440 orang telah melayarinya

Replace the jQuery Document Ready Function with JavaScript

Kaedah JQuery

digunakan untuk melaksanakan kod selepas DOM dimuatkan sepenuhnya. Oleh kerana ia melaksanakan fungsi yang diberikan apabila semua elemen DOM tersedia, ia memastikan bahawa cuba untuk mengakses atau mengendalikan elemen berfungsi dengan baik. $(document).ready()

Sebelum JQuery 3.0, penggunaan biasa menggunakan fungsi tanpa nama adalah seperti berikut:

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

Salin selepas log masuk

mata utama

Kaedah

memastikan bahawa kod itu dilaksanakan hanya apabila semua elemen DOM selamat dan boleh dilakukan, tetapi telah berubah dengan ketara dalam JQuery 3.0 dan semua kaedah sintaks (kecuali document.ready) telah ditetapkan semula. $(handler); Acara
adalah alternatif JavaScript tulen untuk DOMContentLoaded kaedah yang boleh digunakan dalam pelayar moden dan IE9. Untuk versi lama IE, acara jQuery ready boleh digunakan. onreadystatechange
untuk memastikan DOM dimuatkan. </body>

Perubahan ke

dalam jQuery 3.0 `ready()`

Sebelum pelepasan versi 3.0, anda boleh memanggil kaedah

dalam beberapa cara: ready

$(document).ready(handler);
$().ready(handler);
$(handler);

Semua varian di atas adalah bersamaan dengan fungsi. Terlepas dari elemen yang dipanggil, pengendali yang ditentukan akan dipanggil selagi DOM dimuatkan sepenuhnya. Dalam erti kata lain, memanggilnya pada elemen imej

tidak berbeza daripada memanggilnya pada elemen dokumen, dan masa pencetus fungsi panggilan balik tidak ada kaitan dengan pemuatan elemen yang ditentukan. Sebaliknya, ia akan dipanggil selepas seluruh DOM dimuatkan sepenuhnya. $("img")

Dalam JQuery 3.0, semua kaedah sintaks lain kecuali

ditolak. Alasan rasmi ialah: $(handler);

Ini kerana pilihan tidak ada kaitan dengan tingkah laku kaedah
, yang tidak cekap dan boleh membawa kepada andaian palsu mengenai tingkah laku kaedah. .ready()

perbezaan antara peristiwa dan `ready` Acara `load`

dipecat apabila DOM dimuatkan sepenuhnya dan elemen dapat diakses dengan selamat. Sebaliknya, kebakaran acara

selepas DOM dan semua sumber telah dimuatkan. ready load

peristiwa boleh digunakan seperti berikut:

load

Ini bukan sahaja menunggu DOM bersedia untuk interaksi, tetapi juga menunggu imej untuk memuat sepenuhnya (ini mungkin mengambil sedikit masa bergantung pada saiz imej).

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

Salin selepas log masuk

untuk operasi DOM biasa, anda mungkin tidak memerlukan acara

, tetapi jika anda ingin menunjukkan pemutar beban sebelum semua sumber dimuatkan, atau jika anda ingin melakukan beberapa pengiraan dengan saiz imej, itu mungkin betul pilihan.

anda mungkin tidak memerlukan jQuery.ready ()

Kaedah

ready memastikan bahawa kod itu dilaksanakan hanya apabila semua elemen DOM selamat dan boleh dilakukan. Tetapi apa maksudnya? Apabila anda melaksanakan kod JavaScript dalam bahagian <body> dari dokumen HTML, ini akan memastikan bahawa kod tersebut dilaksanakan selepas penyemak imbas juga memuat semua elemen berikutnya (contohnya, <code><p> unsur -unsur):

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

Salin selepas log masuk

Jika anda melaksanakan kod JavaScript sebagai perkara terakhir dalam <body>, anda mungkin tidak perlu membungkusnya dalam ready() kerana semua elemen yang anda boleh cuba untuk beroperasi atau akses dimuatkan:

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

Salin selepas log masuk

JavaScript Pure `ready()` Alternatif

untuk pelayar moden dan IE9, anda boleh mendengar DOMContentLoaded acara:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <🎜>
</head>
<body>
  <🎜>
  <p>我是这个网站的内容</p>
</body>
</html>

Salin selepas log masuk

Walau bagaimanapun, ambil perhatian bahawa jika peristiwa telah dipecat, fungsi panggil balik tidak akan dilaksanakan. Untuk memastikan bahawa fungsi panggil balik sentiasa dijalankan, jQuery memeriksa dokumen

(rujukan) dan melaksanakan fungsi panggil balik dengan segera jika ia telah selesai: readyState

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
</head>
<body>
  <p>我是这个网站的内容</p>
  <🎜>
  <🎜>
</body>
</html>

Salin selepas log masuk

Anda juga boleh memasukkan Perpustakaan Domready, yang sudah melaksanakan penyelesaian ini.

versi lama Internet Explorer

untuk versi IE kurang daripada atau sama dengan 8, anda boleh menggunakan acara

untuk mengesan dokumen onreadystatechange: readyState

document.addEventListener("DOMContentLoaded", function(){
  // DOM 完全加载时的处理程序
});

Salin selepas log masuk

atau, anda boleh menggunakan acara

seperti jQuery, kerana ini akan berfungsi dalam mana -mana penyemak imbas. Ini juga menyebabkan kelewatan masa, kerana ia akan menunggu semua sumber untuk dimuatkan. Ambil perhatian bahawa anda juga perlu menyemak load seperti yang dijelaskan di atas untuk memastikan bahawa fungsi panggil balik masih akan dilaksanakan walaupun acara itu telah dipecat. readyState

Kesimpulan

Jika anda sedang mencari alternatif JavaScript tulen untuk kaedah

, anda boleh menggunakan acara ready. Jika keperluan sistem anda termasuk IE, anda mungkin perlu menggunakan peristiwa DOMContentLoaded atau onreadystatechange acara. load

Jika anda menggunakan jQuery dalam projek anda, anda boleh terus menggunakan fungsi JQuery's

, tetapi ingat untuk mengelakkan penggunaan (decrecated) document.ready pada unsur -unsur seperti yang disebutkan sebelumnya (contohnya ready()). $(document).ready()

Akhir sekali, jangan lupa bahawa dalam banyak kes, anda mungkin tidak memerlukan sebarang penyelesaian ini - hanya gerakkan kod JavaScript anda ke tag akhir

dan anda boleh memastikan DOM dimuatkan!

Atas ialah kandungan terperinci Ganti Fungsi Sedia Dokumen JQuery dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!