Jun
1
2010

jQuery 1.4 : Passing Attributes to jQuery

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

เอาละวันนี้เริ่มต้นด้วย Features แรกกันเลยละกันครับ จากทั้งหมด 15 features ใน jQuery 1.4 แต่ก่อนนั้นเวลาที่เราจะเปลี่ยนแปลงค่า Attributes ด้วย jQuery นั้นเราจะใช้ function attr ในการเปลี่ยนแปลงค่าหรือเพิ่มเข้าไปใหม่ เช่น

1	$("input").attr( "value", "Hello World!!!" );

หรือถ้าเราจะเปลี่ยน Link ใน Tag A แต่ก่อนเราก็เขียนแบบนี้ครับ

1	$("a").attr("href","http://www.jquery.com");

แต่ในความสามารถใหม่ของเวอร์ชั่น 1.4 นี้เราสามารถที่จะเพิ่ม Attributes เข้าไปได้ทีเดียว รวมไปถึงสามารถกำหนด Event ไปด้วยเลยก็ได้ ลองดูจากตัวอย่าง code ด้านล่างนี้จะเข้าใจง่ายกว่าครับ

ตัวอย่างนี้เป็นการกำหนดค่าให้กับ Tag a

1
2
3
4
5
6
7

jQuery('<a/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
});

ตัวอย่างนี้เราสามารถกำหนด Event Click เข้าไปใน Element ที่เราต้องการได้เลย

1
2
3
4
5
6
7
8
9
10
11

// jQuery 1.4
jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo has been clicked!');
}
});

เปลี่ยนเทียบให้ดูวิธีการเขียนแบบเก่า ครับ code ด้านบนนั้นเป็นแบบ 1.4 ส่วนด้านล่างนี้เป็นแบบเก่าซึ่งให้ผลเหมือนกัน

1
2
3
4
5
6
7
8
9
10

// Old version
jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo has been clicked!');
});

จากที่ผมได้ลองเขียนดูนะครับ มันช่วยผมในเครื่องของการจัดเรียง code ได้พอสมควรเลย เวลาที่ต้องมานั่งแก้ไข code ซึ่งถ้าเป็นเขียนแบบที่ใช้การเชื่อมต่อกันด้วย dot ( . ) นั้นค่อนข้างจะดู code ยากพอสมควร ต้องมานั่งเคาะ Enter เพื่อจัดเรียงเอง แต่ถ้าแบบ jQuery 1.4 นี้ดูสะบายตาและแก้ไขได้ง่ายขึ้นไม่รกครับ เพราะทำการจัดให้อยู่ในรูปแบบของ Array แล้วจับยัดใส่ทีเดียว

ส่วน Features ต่อไปนั้นก็รอติดต่อกันต่อพรุ่งนี้ครับ