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

สมมติ xxx คือ selector ที่เป็นแท็กทั่วไป
โดยในที่นี้จะกำหนด xxx ให็เป็นแท็ก p

รูปแบบที่ 1 $("xxx[attribute]");

การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute ตามที่กำหนด

<script language="javascript">
$(function(){
	$("p[id]").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ที่มี attribute ชื่อ id และกำหนดสีพื้นหลังให้เป็นสีแดง
</script>
 

รูปแบบที่ 2 $("xxx[attribute=value]");
การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute และค่าของ attribute หรือ
value เท่ากับค่าที่กำหนด

<script language="javascript">
$(function(){
	$("p[id='myid']").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ทีมี attribute ชื่อ id และมีค่าเท่ากับ myid และกำหนดสีพื้นหลัง
ให้เป็นสีแดง
</script>
 

รูปแบบที่ 3 $("xxx[attribute!=value]");
การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute และค่าของ attribute หรือ
value ไม่เท่ากับค่า value ที่กำหนด

<script language="javascript">
$(function(){
	$("p[id!='myid']").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ทีมี attribute ชื่อ id และมีค่าwไม่เท่ากับ myid และกำหนดสีพื้นหลัง
ให้เป็นสีแดง
</script>
 

รูปแบบที่ 4 $("xxx[attribute^=value]");
การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute และค่าของ attribute หรือ
value ขึ้นต้นด้วยค่า value ที่กำหนด

<script language="javascript">
$(function(){
	$("p[id^='myid']").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ทีมี attribute ชื่อ id และขึ้นต้นด้วยค่า myid และกำหนดสีพื้นหลัง
ให้เป็นสีแดง
</script>
 

รูปแบบที่ 5 $("xxx[attribute$=value]");
การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute และค่าของ attribute หรือ
value ลงท้ายด้วยค่า value ที่กำหนด

<script language="javascript">
$(function(){
	$("p[id$='myid']").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ทีมี attribute ชื่อ id และลงท้ายด้วยค่า myid และกำหนดสีพื้นหลัง
ให้เป็นสีแดง
</script>
 

รูปแบบที่ 6 $("xxx[attribute*=value]");
การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute และค่าของ attribute หรือ
value ที่มีค่า value ที่กำหนดอยู่

<script language="javascript">
$(function(){
	$("p[id*='myid']").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ทีมี attribute ชื่อ id และมีค่า myid อยู่ และกำหนดสีพื้นหลัง
ให้เป็นสีแดง
</script>
 

รูปแบบที่ 7 $("xxx[attributeFilter1][attributeFilter2][attributeFilterN]");
การใช้งานใช้สำหรับเลือกแท็ก xxx ที่มี attribute กำหนดไว้หลายค่า

<script language="javascript">
$(function(){
	$("p[id][name='myparagraph']").css("backgroundColor","red");
});
// เป็นการเลือกแท็ก p ทีมี attribute ชื่อ id และมี attribute ชื่อ name มีค่า myparagraph อยู่ 
และกำหนดสีพื้นหลัง
</script>