PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

25 September 2008 By
selector ตัวกรองพื้นฐาน jquery

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



โค้ด 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>







Tags:: selector ตัวกรองพื้นฐาน jquery






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


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