บทความที่แล้วได้อธิบายเกี่ยวกับการติดตั้ง jQuery และได้แสดงตัวอย่างการใช้งานเริ่มต้นด้วย Hello, jQuery แล้ว ส่วนในบทความนี้เราจะเริ่มใช้งาน jQuey มากขึ้นด้วยการอธิบายวิธีการใช้งาน Selectors โดยการใช้งาน Selector ของ jQuery มีอยู่สองวิธีด้วยกัน วิธีแรกจะเป็นการใช้ CSS ร่วมกับ XPath โดยการส่งเป็น string เข้าไปใน constructor ของ jQuery เช่น $(“div ul > a”) และวิธีที่สองเป็นการใช้ฟังก์ชันของ jQuery (find(), filter(), …)
เดี่ยวเราจะมีโค้ด HTML ที่จะใช้อ้างอิงในการใช้ jQuery ในบทความนี้นะครับ
1 2 3 4 5 6 7 8 9 | <style type="text/css"> .red{background:red;} .blue{background:blue;}</style><ul id="orderedlist"> <li><a href="/apple">Apple</a></li> <li><a href="/banana">Banana</a></li> <li><a href="/mango">Mango</a></li></ul> |
เอาล่ะงั้นเรามาเริ่มต้นกันเลยดีกว่าครับ โดยตอนแรกถ้าเราต้องการเลือก (select) แท็ก UL ซึ่งมีไอดี orderedlist ถ้าเราเขียนโดยใช้ javascript ธรรมดาจะเป็น document.getElementById(“orderedlist”) แต่ถ้าเราใช้ jQuery ในการเลือกก็จะเป็น ดังนี้
1 2 3 | $(document).ready(function() { $("#orderedlist").addClass("red");}); |
ถ้าเรารันคำสั่งข้างบนแท็ก <ul id=”orderedlist”> ของเราก็จะมีพื้นหลังเป็นสีแดงครับ เพราะเรามี CSS คลาส red ที่เทพื้นหลังเป็นสีแดง โดยที่ฟังก์ชัน addClass จะเป็นคำสั่งในการเพิ่มคลาสให้กับ element ที่เราเลือกมาครับ ซึ่งในที่นี้จะเป็นแท็ก ul ที่มีไอดีเป็น orderedlist ครับ
ถ้าต้องการเพิ่มคลาสให้กับแท็กอื่นที่อยู่ภายใต้แท็ก (child) <ul id=”orderedlist”> ก็สามารถทำได้โดย
1 2 3 | $(document).ready(function() { $("#orderedlist > li").addClass("blue");}); |
โค้ดด้านบนจะเป็นการเพิ่มคลาส blue ให้กับแท็ก li ที่อยู่ภายใต้แท็ก (chilld) <ul id=”orderedlist”> ซึ่งจะทำให้แท็ก li มีพื้นหลังเป็นสีน้ำเงิน
ส่วนรุปแบบการใช้ selectors อื่นก็จะมีรูปแบบการใช้งานคล้ายกับ CSS และ XPath ซึ่งสามารถเข้าไปดูตัวอย่างเพิ่มเติมได้ที่นี่ครับ