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

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

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

&lt;style type=&quot;text/css&quot;&gt;<br />
   .red{background:red;}<br />
   .blue{background:blue;}<br />
&lt;/style&gt;<br />
&lt;ul id=&quot;orderedlist&quot;&gt;<br />
	&lt;li&gt;&lt;a href=&quot;/apple&quot;&gt;Apple&lt;/a&gt;&lt;/li&gt;<br />
	&lt;li&gt;&lt;a href=&quot;/banana&quot;&gt;Banana&lt;/a&gt;&lt;/li&gt;<br />
	&lt;li&gt;&lt;a href=&quot;/mango&quot;&gt;Mango&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt;

เอาล่ะงั้นเรามาเริ่มต้นกันเลยดีกว่าครับ โดยตอนแรกถ้าเราต้องการเลือก (select) แท็ก UL ซึ่งมีไอดี orderedlist ถ้าเราเขียนโดยใช้ javascript ธรรมดาจะเป็น document.getElementById(“orderedlist”) แต่ถ้าเราใช้ jQuery ในการเลือกก็จะเป็น ดังนี้

$(document).ready(function() {<br />
	$(&quot;#orderedlist&quot;).addClass(&quot;red&quot;);<br />
});

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

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

 $(document).ready(function() {<br />
   $(&quot;#orderedlist &gt; li&quot;).addClass(&quot;blue&quot;);<br />
 });

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

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