Javascript สามารถดำเนินการบางอย่างกับองค์ประกอบ DOM หลังจากที่ถูกกำหนดแล้วเท่านั้น ปัญหานี้อธิบายไว้โดยละเอียดในบทความ "Javascript Execution Sequence" //www.VeVB.COm/article/44577.htm
jQuery ใช้ document.ready เพื่อให้แน่ใจว่าโค้ดที่จะดำเนินการจะถูกดำเนินการหลังจากโหลดองค์ประกอบ DOM แล้ว ตัวอย่างเช่น ในบทความ "jQuery Basics - How to Get Started" ฉันใช้โค้ด jQuery ต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!-- $(เอกสาร).ready(ฟังก์ชั่น ()
-
alert("โค้ด jQuery แรกของฉัน!");
-
-
ความหมายของรหัสนี้คือ: เมื่อโหลด Dom Tree แล้ว จะมีข้อความเตือนปรากฏขึ้น
document.ready() คล้ายกับวิธีการดั้งเดิม <body onload="load()"> ยกเว้นว่าวิธีการ onload() จะเกิดขึ้นหลังจากที่โหลดเพจแล้ว รวมถึงองค์ประกอบ DOM และองค์ประกอบอื่นๆ ของหน้า (เช่น รูปภาพ) ที่กำลังโหลด
ดังนั้นความเร็วในการดำเนินการของการใช้เมธอด document.ready() จึงเร็วกว่าเมธอด onload()
สองประเด็นสุดท้ายที่ควรทราบ (จากเอกสาร jQuery):
1. ตรวจสอบให้แน่ใจว่าไม่มีฟังก์ชันที่ลงทะเบียนไว้ในเหตุการณ์ onload ขององค์ประกอบ <body> ไม่เช่นนั้นเหตุการณ์ $(document).ready() อาจไม่ถูกทริกเกอร์ -
ฉันพยายามสาธิตสิ่งนี้ด้วยตัวอย่างด้านล่าง แต่ไม่ประสบผลสำเร็จ ฉันเดาว่านี่เป็นเพียงความเป็นไปได้ -
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<title>jQuery ตัวที่สองของฉัน</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //ต่อไปนี้คือฟังก์ชันโหลดที่มีฟังก์ชันการลงทะเบียน jquery $
โหลดฟังก์ชัน(){ $("p").append("<b>สวัสดี</b>"); }
//ต่อไปนี้เป็นโค้ด jQuery
$(เอกสาร).ready(ฟังก์ชั่น ()
{ $("p").append("รหัส jQuery แรกของฉัน!"
-
$("p").append("<b>สวัสดี</b>" }); // -->
</mce:สคริปต์>
</หัว>
<body onload="โหลด()">
<h2>ตัวอย่างง่ายๆ jQuery 2</h2>
<p>ฉันอยากจะพูดว่า: </p>
</ร่างกาย>
</html>
2. เหตุการณ์ $(document).ready() สามารถใช้ได้ไม่จำกัดครั้งในหน้าเดียวกัน ฟังก์ชั่นที่ลงทะเบียนจะถูกดำเนินการตามลำดับ (ในโค้ด)