Selectors ในแบบฉบับของ jQuery
โห ช่วงนี้อัพเดทไววันต่อวันเลย อยากทำได้แบบนี้นานๆจัง อิอิ
ผ่านมาถึงตอนที่ 4 แล้ว ถ้าอ่านกันมาถึงตอนนี้แสดงว่าเพื่อนๆ คงจะสนใจใน library ตัวนี้บ้างจริงมั้ย และผมก็มั่นใจว่าคงแอบไปศึกษาหาความรู้กันเองมาบ้าง ตาม blog ต่างประเทศ หรือ Document ของเวบผู้พัฒนา เพราะถ้าไม่ไปอ่านเอาเองบ้าง แล้วหวังจะมาอ่านตามบล๊อกของผม ผมว่าเละแน่นอน 555 เพราะผมจะเขียนแค่คร่าวๆ เท่านั้น อ่ะนะ เอ้ามาเข้าเรื่องที่จะพูดวันนี้กันเลยดีกว่า….
สำหรับ selector ของ jQuery จะเป็นลักษณธของการไต่ตามหน้าเอกสาร(DOM) ซึ่งมาถึงตอนนี้ผมยังไม่เห็นส่วนไหนใน เอกสารเลยที่มันจะ get ค่าออกมาไม่ได้ ลองมาดูตัวอย่างกัน
สมมุติผมมีเอกสาร HTML ดังนี้
- 1
- 2
- 3
- 4
- 5
ที่นี้ผมจะลองเรียกค่าจากจุดต่างๆ ให้ดู พร้อมทั้งใส่ css background สีแดงให้ไป
1. เรียก div ที่มี id wrapper
$("#wrapper").css('background-color', 'red');
2. เรียก li ที่เป็นจำนวนคี่ทั้งหมด
$("li:even").css('background-color', 'red');
3. เรียก li ที่เป็นจำนวนคู่ทั้งหมด
$("li:odd").css('background-color', 'red');
4. เรียก li ทุกตัวที่ไม่มี class “wow”
$("li:not(.wow)").css('background-color', 'red');
5. เรียกดูว่า li ตัวที่เป็นตัวหน้า
$("li > strong).css('background-color', 'red');
เอาล่ะครับนี่แค่คร่าวๆ ในเรื่อง selector รูปแบบพื้นฐานของ Query จริงๆมะนสามารถเรียกได้มากกว่านี้หลาย 10 แบบเลยทีเดียว ผมจะแนะนำแหล่งข้อมูลให้ไปศึกษากันต่อนะ
How to get everything you want part 1
How to get everything you want part 2
jQuery Selectors
ลองอ่านดูกันนะครับ ศึกษากันมาให้ครบ พอเข้าใจกันดีแล้วก็ไว้มาต่อกัน บทต่อไปได้เลย
ขยันเจง ๆ ตามอ่านอยู่ครับ ถึงจะไม่ค่อยรู้เรื่อง 555
ดีแล้ว ขยันๆ มาสนใจ jQuery ก็เพราะคุณตี๋เนี้ยละ
เจ๋งดีอ่ะ สุดยอด