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