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

บทความที่แล้วได้อธิบายเกี่ยวกับการติดตั้ง 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 ซึ่งสามารถเข้าไปดูตัวอย่างเพิ่มเติมได้ที่นี่ครับ