ตัวเลือก (Selectors) ใน jQuery

ตัวเลือกใน jQuery เป็นฟีเจอร์ที่ทรงพลังมาก ช่วยให้นักพัฒนาสามารถค้นหาและจัดการกับองค์ประกอบ HTML ได้อย่างง่ายดายและรวดเร็ว คล้ายกับตัวเลือกใน CSS แต่มีความสามารถเพิ่มเติมในการทำงานร่วมกับ DOM (Document Object Model) ได้ นี่คือตัวอย่างการใช้งานตัวเลือกต่าง ๆ ของ jQuery แบบละเอียด

ตัวเลือกพื้นฐาน (Basic Selectors)

ตัวเลือกแท็ก (Element Selector)

• รูปแบบ $("element")

ตัวอย่าง

$("p")

เลือกแท็ก <p> (ย่อหน้าข้อความ) ทุกตัวในหน้าเว็บ

ตัวเลือก ID (ID Selector)

• รูปแบบ $("#id")

ตัวอย่าง

$("#header")

เลือกองค์ประกอบที่มี id="header" ซึ่งระบุ ID เฉพาะ

ตัวเลือกคลาส (Class Selector)

• รูปแบบ $(".class")

ตัวอย่าง

$(".menu")

เลือกองค์ประกอบทุกตัวที่มีคลาส menu

ตัวเลือกตามแอตทริบิวต์ (Attribute Selectors)

เลือกองค์ประกอบตามแอตทริบิวต์

• รูปแบบ $("[attribute]")

ตัวอย่าง

$("[href]")

เลือกองค์ประกอบทุกตัวที่มีแอตทริบิวต์ href เช่นลิงก์ (<a>)

เลือกองค์ประกอบที่มีแอตทริบิวต์และค่าที่ระบุ

• รูปแบบ $("[attribute='value']")

ตัวอย่าง

$("[type='text']")

เลือกองค์ประกอบ <input> ที่มี type="text"

ตัวเลือกขั้นสูง (Advanced Selectors)

ตัวเลือกลูก (Child Selector)

• รูปแบบ $("parent > child")

ตัวอย่าง

$("ul > li")

เลือก <li> ทุกตัวที่เป็นลูกตรงของ <ul> (รายการในลิสต์ที่เป็นลูกโดยตรงของ <ul>)

ตัวเลือกกลุ่ม (Multiple Selector)

• รูปแบบ $("selector1, selector2, selector3")

ตัวอย่าง

$("h1, h2, h3")

เลือกองค์ประกอบ <h1>, <h2>, และ <h3> ทุกตัวในหน้าเว็บ

ตัวเลือกตัวกรอง (Filter Selector)

• รูปแบบ $("element:filter")

ตัวอย่าง

$("p:first")

เลือก <p> ตัวแรกที่พบในหน้าเว็บ

ตัวเลือกตำแหน่ง (Position Selectors)

• รูปแบบ $("element:first")

ตัวอย่าง

$("div:first")

เลือก <div> ตัวแรกในหน้าเว็บ

• รูปแบบ $("element:last")

ตัวอย่าง

$("div:last")

เลือก <div> ตัวสุดท้ายในหน้าเว็บ

• รูปแบบ $("element:eq(index)")

ตัวอย่าง

$("li:eq(2)")

เลือก <li> ตัวที่สาม (เริ่มนับจาก 0) ในลิสต์

ตัวเลือกฟอร์ม (Form Selectors)

• รูปแบบ $("form :input")

เลือกทุกองค์ประกอบฟอร์ม เช่น <input>, <textarea>, <select>, และ <button>

• รูปแบบ $("input:checked")

เลือกทุก <input> ที่ถูกเลือก (เช่น radio button หรือ checkbox)

• รูปแบบ $("input:submit")

เลือกปุ่มส่งฟอร์ม (submit button) ทุกตัว

สรุป

ตัวเลือกใน jQuery ช่วยให้คุณสามารถค้นหาและเลือกองค์ประกอบใน HTML ได้ง่ายดายมากขึ้น และด้วยความสามารถที่ครอบคลุมและหลากหลาย คุณสามารถปรับแต่งการเลือกองค์ประกอบตามต้องการ ไม่ว่าจะเป็นการเลือกโดยแท็ก, ID, คลาส, แอตทริบิวต์, ตำแหน่ง, หรือฟอร์ม