Aug
15
2009

การใช้งาน Selector Filters แบบ first

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

สวัสดีครับ วันนี้เรามาทำความรู้จักกับการใช้งาน Selector ของ jQuery กันครับ
jQuery นั้นมีทั้งเครื่องมี Function, Plugin ให้ใช้มากเลยครับ อย่างในบทความนี้ก็เป็นการใช้งาน Selector ที่ jQuery มีมาให้ครับ

Selector คืออะไร ผมจะยกตัวอย่างง่ายๆของการใช้งาน Selector ให้ดูกัน
อย่างเช่น ถ้าเรามี Table อยู่หนึ่ง Table โครงสร้างเป็นดังนี้

1
2
3
4
5

ใน code ด้านบนนี้จะเห็นว่าเรามี TR ทั้งหมด 3 Row ด้วยกัน เราสามารถจะเข้าไปใส่ style sheet ให้กับ TR ได้โดยตรง ถ้าเราไม่ใช้ jQuery Selector จะได้ code แบบนี้นะครับ

1
2
3

...
<tr style="color:blue; font-weight:bold;"><td>Row 1</td></tr>
...

ผลที่แสดงออกมาก็คือ ตัวหนังสือที่อยู่ใน Row 1 นั้นจะเป็นตัวหนาและมีสีน้ำเงิน

Row 1

Row 2

Row 3

ในลักษณะเดียวกัน เราสามารถที่จะใช้ selector ของ jQuery นั้นทำการกำหนด style ให้กับ TR ได้โดยที่ไม่ต้องไปเปลี่ยน หรือเพิ่ม code ใน tag TR เลย เราสามารถกำหนดได้ด้วย selector เลย แต่ Table 1 Table นั้นมันก็มีหลาย TR ใน Table เดียวดังนั้น ถ้าเราต้องการจะให้ TR ตัวใหนเปลี่ยนสี หรือกำหนด style แบบเจาะจง เฉพาะ TR นั้น เราจะต้องใช้ filter ช่วยอีกแรงดังนี้ครับ

1
2
3

$(document).ready(function(){
$("tr:first").css("font-style", "italic");
});

จาก code ด้านบนจะเห็นว่ามีการใช้ filters ช่วยในการค้นหา TR ที่มีอยู่ใน Table หลายๆ TR โดยที่จะทำการเลือกเอา TR แรกสุดมาใส่ style ตัวเองเข้าไปผลที่ได้ก็ตามนี้เลยครับ

Row 1

Row 2

Row 3

Final Code :

1
2
3
4
5
6
7
8
9
10
11

<table border="1" width="30%">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>

<script>
$(document).ready(function(){
$("tr:first").css("font-style", "italic");
});
</script>