การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
ตัวกรองพื้นฐาน jquery selector

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ตัวกรองพื้นฐาน jquery selector

ดูแล้ว 9,937 ครั้ง


โค้ด HTML ประกอบการอธิบาย
<ul>
	<li>ลำดับที่ 1</li>
	<li>ลำดับที่ 2</li>
	<li>ลำดับที่ 3</li>
	<li>ลำดับที่ 4</li>			
</ul>
 

รูปแบบที่ 1 $(:first);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่เป็นตัวแรก

<script language="javascript">
$(function(){
	$("li:first").css("backgroundColor","red");  
});
// เป็นการเลือก li ตัวแรก และกำหนดสีพื้นหลังเป็นสีแดง
</script>

 

รูปแบบที่ 2 $(:last);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่เป็นตัวสุดท้าย

<script language="javascript">
$(function(){
	$("li:last").css("backgroundColor","red");  
});
// เป็นการเลือก li ตัวสุดท้าย และกำหนดสีพื้นหลังเป็นสีแดง 
</script>

รูปแบบที่ 3 $(:not(selector));
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่ไม่ใช่ selector
ที่กำหนด

<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...

<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...

<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...

<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...

<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...

<script language="javascript">
$(function(){
	$("li:lt(2)").css("backgroundColor","red");  
});
// เป็นการเลือก li ตัวที่มีีค่า index น้อยกว่า 2 คือตัวที่ 1 และั 2 และกำหนดสีพื้นหลังเป็นสีแดง
</script>

 

รูปแบบที่ 9 $(::header);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่เป็นแท็กประเภท <h1>,<h2>,...

<script language="javascript">
$(function(){
	$("li:header").css("backgroundColor","red");  
});
// เป็นการเลือกแท็ก  <h1>,<h2>,... และกำหนดสีพื้นหลังเป็นสีแดง
</script>

 

รูปแบบที่ 10 $(:animated);
การใช้งาน ใช้สำหรับกำหนดให้เลือก selector ที่กำลังแสดงการเคลื่อนไหวอยู่

<script language="javascript">
$(function(){
	$("li:animated").css("backgroundColor","red");  
});
// เป็นการเลือกแท็กที่กำลังมีการเคลื่อนไหวอยู่ และกำหนดสีพื้นหลังเป็นสีแดง
</script>



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ