หน้าแรก

jQuery คำสั่งแอททริบิวท์ .attr() ใน jquery


attribute คืออะไร
มาถึงหมวด attribute ของ html element ก่อนอื่น เรามารู้จักกันก่อน ว่า attribute คืออะไร? attribute ของ html element ก็ึคือค่า ต่างๆที่อยู่ภายใน tag html นั่นเอง โดยเป็นการ set ค่าใช้รูปแบบเป็น name=”value” เช่น

<a href="http://www.jquerythai.com">jquerythai</a>
//ในที่นี้ name คือ href
//value คือ http://www.jquerythai.com
//name="value" คือ href="http://www.jquerythai.com" นั่นเอง

โดยเจ้า attribute ของ html นั้นมีมากมายหลากหลาย แต่ละ tag ก็จะมี attribute เฉพาะ ไม่เหมือนกัน ดังนั้นถ้าใครไม่แน่นเรื่อง html อาจจะทำให้ลำบากในการเขียน jQuery พอสมควรครับ (เพราะ jQuery มักจะเล่นกับ html attribute พอสมควรเลย)
แนะนำว่าควรรู้จัก html tag ก่อนมาเขียน jQuery นะคร้าบบบ ศึกษา html tag ได้ที่นี่นะครับ http://www.w3schools.com/html/

.attr(attributeName) Returns: String

คำสั่ง .attr ที่ป้อน parameter ตัวเดียว คือการ get attribute จาก html tag เช่น

<a href="http://www.jquerythai.com" title="เว็บ สอน jQuery">jquerythai</a>
var link = jQuery('a').attr('href');
alert(link);
// จะ alert ค่า http://www.jquerythai.com ออกมา
 
var titile = jQuery('a').attr('title');
alert(titile);
// จะ alert ค่า "เว็บ สอน jQuery" ออกมา

.attr(attributeName,value) Returns: jQuery

หากมีการป้อน parameter 2 ตัว และตัวที่2 เป็น string ธรรมดาๆ จะเป็นการ set ค่าของ attribute นั้นๆ เช่น

<a href="http://www.jquerythai.com" title="เว็บ สอน jQuery">jquerythai</a>
jQuery('a').attr('href','http://www.google.com/');
jQuery('a').attr('title','google search engine');
jQuery('a').html('google.com');
 
// ค่า html ทั้งหมดจะถูกเปลี่ยนเป็น
<a href="http://www.google.com/" title="google search engine">google.com</a>

2ตัวนี้ขอข้ามไปก่อนเพราะใช้ไม่บ่อย

.attr(map) Returns: jQuery

.attr( attributeName, function(index, attr) ) Returns: jQuery

เขียนโดย : tikstt
เว็บไซท์ : http://tikstt.or.hn


สร้าง html object + event โดยใช้ jQuery ล้วนๆ jQuery คำสั่งแอททริบิวท์ .removeAttr()
บทความที่เกี่ยวข้อง

ดูบทความ jquery ทั้งหมด »