วิธี JS:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
window.onload = function () {
VAR username = "Xiaoming";
การแจ้งเตือน (ชื่อผู้ใช้);
-
</script>
ต่อไปนี้เป็นวิธี jQuery และไฟล์ jQuery จะต้องมีการอ้างอิง
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
$ (เอกสาร) .ready (function () {
VAR username = "Xiaoming";
การแจ้งเตือน (ชื่อผู้ใช้);
-
</script>
หรือตัวย่อของมัน
การคัดลอกรหัสมีดังนี้:
$ (function () {
VAR username = "Xiaoming";
การแจ้งเตือน (ชื่อผู้ใช้);
-
เมื่อโหลด DOM สามารถดำเนินการได้ (เร็วกว่า window.onload) มันสามารถปรากฏหลายครั้งในหน้าเดียวกันพร้อม ()
PS: ความแตกต่างหลักระหว่างสอง
window.onload:
เหตุการณ์ window.onload จะถูกทริกเกอร์เฉพาะเมื่อเอกสารถูกดาวน์โหลดอย่างสมบูรณ์ลงในเบราว์เซอร์ ซึ่งหมายความว่าองค์ประกอบทั้งหมดในหน้าสามารถใช้งานได้สำหรับ JS ซึ่งหมายความว่าองค์ประกอบทั้งหมดในหน้าจะถูกดำเนินการหลังจากโหลดแล้วเท่านั้น สถานการณ์นี้มีประโยชน์มากสำหรับการเขียนรหัสการทำงานเนื่องจากไม่ได้พิจารณาลำดับการโหลด -
$ (เอกสาร). พร้อม {}:
จะถูกเรียกเมื่อ DOM พร้อมและพร้อมใช้งานอย่างเต็มที่ แม้ว่านี่จะหมายความว่าองค์ประกอบทั้งหมดสามารถเข้าถึงได้สำหรับสคริปต์ แต่ก็ไม่ได้หมายความว่าไฟล์ที่เกี่ยวข้องทั้งหมดได้รับการดาวน์โหลด กล่าวอีกนัยหนึ่งรหัสจะถูกดำเนินการหลังจากการดาวน์โหลด HMTL เสร็จสมบูรณ์และแยกวิเคราะห์เป็นแผนผัง DOM
เพื่อให้ตัวอย่าง:
สมมติว่ามีหน้าเว็บที่แสดงถึงแกลเลอรี่ซึ่งอาจมีภาพขนาดใหญ่จำนวนมากที่เราสามารถซ่อนแสดงหรือจัดการผ่าน jQuery หากเราตั้งค่าอินเทอร์เฟซผ่านหน้า OnLoad ผู้ใช้จะต้องรอจนกว่าจะดาวน์โหลดแต่ละภาพก่อนที่จะสามารถใช้หน้านี้ได้ ยิ่งไปกว่านั้นหากพฤติกรรมถูกเพิ่มเข้าไปในองค์ประกอบที่มีพฤติกรรมเริ่มต้นเล็กน้อย (เช่นลิงก์) การโต้ตอบของผู้ใช้อาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิด อย่างไรก็ตามเมื่อเราพยายามตั้งค่าด้วย $ (เอกสาร) .ready () {} อินเทอร์เฟซนี้จะเตรียมพฤติกรรมที่ถูกต้องก่อนหน้านี้
การใช้ $ (document) .ready () {} นั้นดีกว่าการลองใช้ตัวจัดการเหตุการณ์ OnLoad แต่จะต้องชัดเจนว่าเนื่องจากไฟล์สนับสนุนอาจไม่เสร็จสมบูรณ์คุณสมบัติเช่นความสูงและความกว้างของภาพอาจไม่ถูกต้องในเวลานี้
หมายเหตุ: จะมีปัญหากับการใช้วิธีการวาง JS ที่ด้านล่างของหน้าและวิธีการใช้ defer = "defer" เป็นการดีที่สุดที่จะใช้ฟังก์ชั่นข้างต้น!