1 2 3 4 5 6 | <ul> <li>ลำดับที่ 1</li> <li>ลำดับที่ 2</li> <li>ลำดับที่ 3</li> <li>ลำดับที่ 4</li> </ul> |
รูปแบบที่ 1 $(:first);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่เป็นตัวแรก
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:first").css("backgroundColor","red"); });// เป็นการเลือก li ตัวแรก และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 2 $(:last);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่เป็นตัวสุดท้าย
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:last").css("backgroundColor","red"); });// เป็นการเลือก li ตัวสุดท้าย และกำหนดสีพื้นหลังเป็นสีแดง </script> |
รูปแบบที่ 3 $(:not(selector));
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่ไม่ใช่ selector
ที่กำหนด
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:not(:first)").css("backgroundColor","red"); });// เป็นเลือก li ทุกตัวที่ไม่ใช่ li ตัวแรกและกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 4 $(:even);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่มีค่า index เป็นเลขคู่
เช่น 0,2,4 ... สังเกตว่า li จากโค้ด HTML ที่ใช้ประกอบการอธิบาย
จะเริ่มต้นค่า index ที่ 0,1,2...
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:even").css("backgroundColor","red"); });// เป็นการเลือก li ที่มีค่า index เป็นเลขคู่ และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 5 $(:odd);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่มีค่า index เป็นเลขคี่
เช่น 1,3,5 ... สังเกตว่า li จากโค้ด HTML ที่ใช้ประกอบการอธิบาย
จะเริ่มต้นค่า index ที่ 0,1,2...
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:odd").css("backgroundColor","red"); });// เป็นการเลือก li ที่มีค่า index เป็นเลขคี่ และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 6 $(::eq(index));
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่มีค่า index เป็นเลขที่ต้องการ
เช่น 1,3,5 ... สังเกตว่า li จากโค้ด HTML ที่ใช้ประกอบการอธิบาย
จะเริ่มต้นค่า index ที่ 0,1,2...
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:eq(0)").css("backgroundColor","red"); });// เป็นการเลือก li ตัวที่มีีค่า index เท่ากับ 0 คือตัวแรก และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 7 $(:gt(0));
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่มีค่า index เป็นเลขที่มากกว่าค่า index
ที่กำหนด เช่น 1,3,5 ... สังเกตว่า li จากโค้ด HTML ที่ใช้ประกอบการอธิบาย
จะเริ่มต้นค่า index ที่ 0,1,2...
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:gt(0)").css("backgroundColor","red"); });// เป็นการเลือก li ตัวที่มีีค่า index มากกว่า 0 คือตัวที่ไม่ใช่ตัวแรกทุกตัว และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 8 $(:lt(3));
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่มีค่า index เป็นเลขที่น้อยกว่าค่า index
ที่กำหนด เช่น 1,3,5 ... สังเกตว่า li จากโค้ด HTML ที่ใช้ประกอบการอธิบาย
จะเริ่มต้นค่า index ที่ 0,1,2...
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:lt(2)").css("backgroundColor","red"); });// เป็นการเลือก li ตัวที่มีีค่า index น้อยกว่า 2 คือตัวที่ 1 และั 2 และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 9 $(::header);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่เป็นแท็กประเภท <h1>,<h2>,...
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:header").css("backgroundColor","red"); });// เป็นการเลือกแท็ก <h1>,<h2>,... และกำหนดสีพื้นหลังเป็นสีแดง</script> |
รูปแบบที่ 10 $(:animated);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่กำลังแสดงการเคลื่อนไหวอยู่
1 2 3 4 5 6 | <script language="javascript">$(function(){ $("li:animated").css("backgroundColor","red"); });// เป็นการเลือกแท็กที่กำลังมีการเคลื่อนไหวอยู่ และกำหนดสีพื้นหลังเป็นสีแดง</script> |
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง