jQuery ไวยากรณ์
ด้วย jQuery คุณเลือก (แบบสอบถาม) องค์ประกอบ HTML และดำเนินการ "ดำเนินการ" กับพวกเขา
jQuery ไวยากรณ์
ไวยากรณ์ jQuery ได้รับการออกแบบมาโดยเฉพาะสำหรับการเลือกองค์ประกอบ HTML และดำเนินการบางอย่างกับองค์ประกอบ
ไวยากรณ์พื้นฐานคือ: $( selector ) การกระทำ ()
- เครื่องหมาย $ เพื่อกำหนด/เข้าถึง jQuery
- A ( ตัวเลือก ) เพื่อ "ค้นหา (หรือค้นหา)" องค์ประกอบ HTML
- การ ดำเนินการ jQuery () ที่จะดำเนินการกับองค์ประกอบ
ตัวอย่าง:
$(this).hide() - ซ่อนองค์ประกอบปัจจุบัน
$("p").hide() - ซ่อน <p> องค์ประกอบทั้งหมด
$(".test").hide() - ซ่อนองค์ประกอบทั้งหมดด้วย class="test"
$("#test").hide() - ซ่อนองค์ประกอบด้วย id="test"
คุณคุ้นเคยกับตัวเลือก CSS หรือไม่?
jQuery ใช้ไวยากรณ์ CSS เพื่อเลือกองค์ประกอบ คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบตัวเลือกในบทถัดไปของบทช่วยสอนนี้
เคล็ดลับ:หากคุณไม่ทราบ CSS คุณสามารถอ่านCSS Tutorial ของเรา ได้
เหตุการณ์พร้อมเอกสาร
คุณอาจสังเกตเห็นว่าเมธอด jQuery ทั้งหมดในตัวอย่างของเรา อยู่ในเหตุการณ์พร้อมเอกสาร:
$(document).ready(function(){
// jQuery methods go here...
});
เพื่อป้องกันไม่ให้โค้ด jQuery ทำงานก่อนที่เอกสารจะโหลดเสร็จ (พร้อม)
ทางที่ดีควรรอให้เอกสารเต็มและพร้อมก่อนดำเนินการ นอกจากนี้ยังช่วยให้คุณมีโค้ด JavaScript ก่อนเนื้อหาของเอกสารในส่วนหัว
ต่อไปนี้คือตัวอย่างบางส่วนของการดำเนินการที่อาจล้มเหลวหากมีการเรียกใช้เมธอดก่อนที่เอกสารจะโหลดเต็ม:
- พยายามซ่อนองค์ประกอบที่ยังไม่ได้สร้าง
- พยายามจะได้ขนาดภาพที่ยังไม่ได้โหลด
เคล็ดลับ:ทีมงาน jQuery ได้สร้างวิธีการที่สั้นกว่าสำหรับเหตุการณ์พร้อมเอกสาร:
$(function(){
// jQuery methods go here...
});
ใช้ไวยากรณ์ที่คุณต้องการ เราคิดว่าเหตุการณ์พร้อมเอกสารจะเข้าใจง่ายขึ้นเมื่ออ่านโค้ด