jQuery Selector คืออะไร?
Selector เป็นหัวใจของ jQuery ใช้เลือกองค์ประกอบ DOM เพื่อนำไปจัดการต่อ รูปแบบคือ $() รับชื่อแท็ก, ID, หรือ Class เป็นสตริง
ทำไมถึงใช้ jQuery Selector?
ลดความซับซ้อนของ JavaScript ต้นฉบับ:
document.querySelector()→$()- เรียกใช้งานบน Document โดยอัตโนมัติ (Implicit)
- รองรับ CSS Selector Syntax ทั้งหมด
รูปแบบ Selector หลัก
| Selector | คำอธิบาย | ตัวอย่าง |
|---|---|---|
| Universal | เลือกทุกองค์ประกอบ | $('*') |
| Element | เลือกตามชื่อแท็ก | $('p'), $('div') |
| ID | เลือกตาม ID (Unique) | $('#myId'), $('p#myId') |
| Class | เลือกตาม Class | $('.myClass'), $('div.myClass') |
| Attribute | เลือกตาม Attribute | $('[href]'), $('[type="text"]') |
| Descendant | ลูกหลานภายใน | $('div p') |
| Child | ลูกโดยตรง | $('div > p') |
การ Chain เมธอด (Method Chaining)
หลังเลือกแล้ว เรียกเมธอด jQuery ต่อท้ายได้ทันที:
$('p').html("New content");
$('.btn').addClass('active').css('color', 'red');
สรุป
jQuery Selector เป็นพื้นฐานที่ต้องมั่นใจ ก่อนเรียนรู้เมธอดอื่นๆ การเชี่ยวชาญ CSS Selector Syntax จะทำให้เขียน jQuery ได้รวดเร็วและแม่นยำ
