ขอเปรียบให้เว็บเพจเป็นตู้ปลา ให้ข้อมูลต่างๆ เป็นปลาที่แหวกว่ายอยู่ในตู้ ให้ jQuery คือพ่อค้า เราเป็นลูกค้า ถ้าเราอยากได้ปลาทอง เราก็บอกพ่อค้าว่า “พี่คับ เอาปลาทองตัวนึง” อยากได้ปลาทองสีดำก็บอกพ่อค้าว่า “พี่คับ เอาปลาทองตัวสีดำ ตัวนั้นคับ” นี่แหละคับ Selectors
แนะนำตัวละคร
ผมจะอธิบายด้วยภาพนะคับ แขกรับเชิญคือกบน้อยน่ารักผู้พิทักษ์แห่งดวงจันทร์ 3 ตัว ชื่ออีแดง อีเขียว และ อีน้ำเงินนะคับ ทั้งสามตัวรักกันเหมือนพี่น้อง แต่ละตัวมีไข่ตัวละ 2 ฟอง (ถ้ารู้สึกว่าไร้สาระก็ข้ามไปเลยนะคับ – -” อันนี้ผมไม่บังคับ)
ขอโทษด้วยนะคับที่โค๊ดเป็นรูปภาพ เหตุผลคือผมยังหาวิธี “เขียนโค๊ดลงใน WordPress แบบที่ไม่ก่อให้เกิดปัญหาภายหลัง” ไม่ได้เลยคับ
- กบแต่ละตัวก็คือ tag DIV ซึ่งมี class=”obb” จำแนกแต่ละตัวด้วย id ที่แตกต่างกันคับ
- ส่วน tag P ซึ่งมี class=”obb-word” ก็คือคำพูดของกบแต่ละตัว ไม่จำเป็นต้องมี id เพราะมันอยู่ใน DIV ซึ่งมี id แตกต่างกัน
- ส่วนไข่แต่ละฟองก็คือ tag DIV ซึ่งมี class=”egg” จำแนกไข่แต่ละฟองด้วย id จะเห็นว่าไข่ของกบแต่ละตัวมี id ซ้ำกัน แต่ไม่ใช่ปัญหาคับ เราสามารถระบุไข่ฟองใดก็ได้ เพราะแม่ของมันมี id แตกต่างกันแล้ว จะอธิบายให้เห็นภาพในภายหลังนะคับ
พื้นฐาน
ผมจะอธิบายโดยอิง jQuery Core API เป็นหลักนะคับ เรามาเริ่มกันที่ Selectors – Basic
* คือ เอาหมดเลย สมมติว่าเราโค๊ดว่า $(“*”).hide(); แบบนี้ ทุกอย่างในเว็บเพจของเราก็จะถูกซ่อนคับ
element ก็คือ tag ต่างๆ เช่น SPAN, DIV, P, B, I, U และอีกมากมาย เวลาใช้ก็ไม่ต้องใส่เครื่องหมายอะไร ใส่ชื่อ element ไปเลยเช่น ต้องการเลือกทุก DIV ก็ $(“div”) ในตัวอย่างนี้ $(“p”) จะเป็นการเลือกคำพูดกบ
. คือ คลาส เวลาใช้ก็คือ . ตามด้วยชื่อคลาส เช่นเราต้องการเลือกไข่ทั้งหมด ก็ $(“.egg”) กบทุกตัวก็ $(“.obb”) แต่ถ้าต้องการเจาะจงว่าจะเอาไข่เบอร์ 1 เท่านั้นก็
# คือ id เวลาใช้ก็เอา # ตามด้วย id ที่เราต้องการ เช่นเราต้องการเลือกเฉพาะกบแดงก็ $(“#obb-red”) อยากได้แค่กบเขียวก็ $(“#obb-green”) ในตัวอย่างจะเห็นว่า $(“#egg-1″) จะได้ไข่เบอร์หนึ่งของกบทุกตัว ถ้าเราอยากได้แค่ไข่เบอร์หนึ่งของกบแดง ก็ต้องใช้ $(“#obb-red > #egg-1″) ซึ่งจะอธิบายในบทถัดไปนะคับ
, คือ union ถ้ามองเป็นเซ็ตก็คือการเอาผลลัพธ์ของเงื่อนไขแต่ละชุดมา union กัน จากตัวอย่าง เราจะได้ กบแดง + กบน้ำเงิน + element P (ซึ่งก็คือคำพูดของกบทุกตัว) ก็จะได้ผลลัพธ์ดังรูป
เพิ่มเติม การพิมพ์เงื่อนไขติดกันหมายความว่า สิ่งที่เราต้องการนั้น มันต้องมีทั้งสองเงื่อนไข ยกตัวอย่างเช่น $(“div.obb#obb-red”) หมายความว่าเราต้องการ element DIV ที่มี class=”obb” และ id=”obb-red” ซึ่งถ้าดูตามตัวอย่างนี้ เราจะได้ผลลัพธ์เช่นเดียวกับ $(“.obb#obb-red”) = $(“#obb-red”) = $(“div#obb-red”) เป็นเรื่องที่ไม่ยาก หลายคนอาจรู้แล้ว ผมหวังว่าจะเป็นประโยชน์ต่อเด็กๆ ที่หลงเข้ามานะคับ ในบทความถัดไปจะเป็นเรื่องเกี่ยวกับ Selectors – Hierarchy คับ ถ้ามีจุดบกพร่องหรืออยากให้ผมปรับปรุงในส่วนใหนขอให้บอกนะคับ ผมจะได้นำไปแก้ไข ขอบคุณคับ
ดีค่ะ เป็นประโยชน์ดี
ขอบคุณมากคับ
ขอบคุณครับ
เขียนได้น่ารักดีครับ
ขอบคุณครับ แนะนำติชมได้นะครับ