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

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

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

ดูแล้ว 10,372 ครั้ง


สมมติ 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>
 


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



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













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





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

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


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


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







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