Home เขียนโปรแกรม การใช้งาน jQuery ฉบับเริ่มต้น ตอนที่ 2 การใช้งาน Selectors

การใช้งาน jQuery ฉบับเริ่มต้น ตอนที่ 2 การใช้งาน Selectors

by gigkokman

บทความที่แล้วได้อธิบายเกี่ยวกับการติดตั้ง jQuery และได้แสดงตัวอย่างการใช้งานเริ่มต้นด้วย Hello, jQuery แล้ว ส่วนในบทความนี้เราจะเริ่มใช้งาน jQuey มากขึ้นด้วยการอธิบายวิธีการใช้งาน Selectors โดยการใช้งาน Selector ของ jQuery มีอยู่สองวิธีด้วยกัน วิธีแรกจะเป็นการใช้ CSS ร่วมกับ XPath โดยการส่งเป็น string เข้าไปใน constructor ของ jQuery เช่น $(“div ul > a”) และวิธีที่สองเป็นการใช้ฟังก์ชันของ jQuery (find(), filter(), …)

เดี่ยวเราจะมีโค้ด HTML ที่จะใช้อ้างอิงในการใช้ jQuery ในบทความนี้นะครับ

<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 ในการเลือกก็จะเป็น ดังนี้

$(document).ready(function() { $("#orderedlist").addClass("red"); });

ถ้าเรารันคำสั่งข้างบนแท็ก <ul id=”orderedlist”> ของเราก็จะมีพื้นหลังเป็นสีแดงครับ เพราะเรามี CSS คลาส red ที่เทพื้นหลังเป็นสีแดง โดยที่ฟังก์ชัน addClass จะเป็นคำสั่งในการเพิ่มคลาสให้กับ element ที่เราเลือกมาครับ ซึ่งในที่นี้จะเป็นแท็ก ul ที่มีไอดีเป็น orderedlist ครับ

ถ้าต้องการเพิ่มคลาสให้กับแท็กอื่นที่อยู่ภายใต้แท็ก (child) <ul id=”orderedlist”> ก็สามารถทำได้โดย

 $(document).ready(function() { $("#orderedlist > li").addClass("blue"); });

โค้ดด้านบนจะเป็นการเพิ่มคลาส blue ให้กับแท็ก li ที่อยู่ภายใต้แท็ก (chilld) <ul id=”orderedlist”> ซึ่งจะทำให้แท็ก li มีพื้นหลังเป็นสีน้ำเงิน

ส่วนรุปแบบการใช้ selectors อื่นก็จะมีรูปแบบการใช้งานคล้ายกับ CSS และ XPath ซึ่งสามารถเข้าไปดูตัวอย่างเพิ่มเติมได้ที่นี่ครับ

You may also like