PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

25 September 2008 By
ตัวกรอง attribute selector jquery

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



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






Tags:: ตัวกรอง attribute selector jquery






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


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