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

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