สารบัญ:
วีดีโอ: 01 พื้นฐาน jQuery AJAX - คำสั่ง $.get() 2024
หน้า HTML5 และ CSS3 หลายหน้าต้องมีฟังก์ชันการเริ่มต้น กลไกการโหลดเนื้อหาของร่างกายใช้บ่อยใน DOM / JavaScript เพื่อทำให้หน้าเว็บโหลดเร็วที่สุดเท่าที่เอกสารกำลังเริ่มโหลด นี่คือฟังก์ชันที่ทำงานเร็วเพื่อตั้งค่าส่วนที่เหลือของหน้า ขณะที่ร่างกายกำลังรับงานนี้ดีมีปัญหาสองอย่างเกิดขึ้นกับเทคนิคดั้งเดิม:
-
ต้องมีการเปลี่ยนแปลง HTML รหัส JavaScript ควรแยกออกจาก HTML อย่างสมบูรณ์ คุณไม่ควรเปลี่ยน HTML ของคุณเพื่อให้ทำงานร่วมกับ JavaScript
-
เวลายังคงไม่ถูกต้อง รหัสที่ระบุในตัวโหลด onload จะไม่ทำจนกว่าจะมีการแสดงทั้งหน้า จะดีกว่าถ้ารหัสถูกลงทะเบียน หลังจาก DOM โหลด แต่ ก่อน หน้าเว็บจะปรากฏขึ้น
วิธีใช้ $ (เอกสาร) ready ()
jQuery มีทางเลือกที่ดีในการรับน้ำหนักร่างกายที่สามารถเอาชนะข้อบกพร่องเหล่านี้ได้ ลองดูที่โค้ดเพื่อดูวิธีการทำงาน:
พร้อม html $ (เอกสาร) พร้อม (changeMe); ฟังก์ชัน changeMe () {$ ("# output") html ("ฉันเปลี่ยน");}
การใช้เอกสาร กลไกที่พร้อม
การเปลี่ยนแปลงนี้หรือไม่?
รหัสนี้ใช้เทคนิค jQuery เพื่อเรียกใช้โค้ดการเริ่มต้น:
-
แท็ก body ไม่มีแอตทริบิวต์ onload อีกต่อไป นี่คือคุณลักษณะทั่วไปของการเขียนโปรแกรม jQuery HTML ไม่มีการเชื่อมโยงโดยตรงกับ JavaScript เนื่องจาก jQuery อนุญาตให้โค้ด JavaScript แนบไปกับเว็บเพจ
-
ฟังก์ชั่นเริ่มต้นสร้างด้วย $ (document) พร้อม () ฟังก์ชั่น เทคนิคนี้บอกให้เบราว์เซอร์เรียกใช้ฟังก์ชันเมื่อ DOM โหลดเสร็จสิ้น (เพื่อให้สามารถเข้าถึงองค์ประกอบทั้งหมดของฟอร์มได้) แต่ก่อนที่หน้าจะปรากฏขึ้น (เพื่อให้ผลกระทบของฟอร์มปรากฏขึ้นทันทีสำหรับผู้ใช้)
-
$ document ทำให้วัตถุ jQuery จากเอกสารทั้งหมด เอกสารทั้งหมดสามารถเปลี่ยนเป็นวัตถุ jQuery โดยการระบุเอกสารภายในฟังก์ชัน $ () โปรดทราบว่าคุณไม่ได้ใช้เครื่องหมายคำพูดในกรณีนี้
-
ฟังก์ชันที่ระบุจะทำงานโดยอัตโนมัติ ในกรณีนี้คุณต้องการเรียกใช้ฟังก์ชัน changeMe () ดังนั้นคุณจึงวางไว้ในพารามิเตอร์ของเมธอด ready () โปรดทราบว่านี่หมายถึง changeMe เป็นตัวแปรดังนั้นจึงไม่มีเครื่องหมายคำพูดหรือเครื่องหมายวงเล็บ
คุณเห็นสถานที่อื่น ๆ (โดยเฉพาะอย่างยิ่งในการจัดการเหตุการณ์) ที่ jQuery คาดว่าฟังก์ชันเป็นพารามิเตอร์ ฟังก์ชั่นดังกล่าวมักเรียกว่า callback เนื่องจากเรียกฟังก์ชันนี้หลังจากเหตุการณ์บางอย่างเกิดขึ้นนอกจากนี้คุณยังเห็นฟังก์ชันการโทรกลับที่ตอบสนองต่อเหตุการณ์ในคีย์บอร์ดการเคลื่อนไหวของเม้าส์และการดำเนินการตามคำขอ AJAX
ทางเลือกในการจัดทำเอกสาร พร้อม
บางครั้งคุณอาจเห็นทางลัดสองอันเนื่องจากมีการเรียกใช้โค้ดเริ่มต้น คุณสามารถย่อ
$ (เอกสาร) พร้อม (changeMe);
เป็นรหัสต่อไปนี้:
$ (changeMe);
ถ้ารหัสนี้ไม่ได้ถูกกำหนดไว้ภายในฟังก์ชันและ changeMe เป็นฟังก์ชันที่กำหนดไว้ในเพจ jQuery จะเรียกใช้ฟังก์ชันนี้โดยตรงเหมือนกับเอกสาร พร้อม
นอกจากนี้คุณยังสามารถสร้างฟังก์ชันที่ไม่ระบุนามโดยตรง:
$ (document) พร้อม (function () {$ ("# output"). html ("ฉันเปลี่ยน");});
วิธีนี้ (วิธีการที่ไม่ระบุชื่อ) เป็นเรื่องยุ่งยาก แต่คุณมักเห็นรหัส jQuery ใช้เทคนิคนี้ คุณสามารถสร้างฟังก์ชันที่เรียกว่า init () และเรียกด้วยบรรทัดเช่นนี้:
$ (init);
เทคนิคนี้ง่ายและเข้าใจง่าย แต่คุณอาจพบกับรูปแบบอื่น ๆ ขณะที่คุณตรวจสอบโค้ดบนเว็บ
