เปรียบมวยการไต่ DOM ด้วย Javascript ปกติ กับ jQuery

สำหรับคนที่เริ่มหัด jQuery ใหม่ๆ อาจจะมีคำถามในใจว่า jQuery มันดีกว่า Javascript ปกติยังไง ทำไมถึงต้อง jQuery ในเมื่อ js ก็ทำได้อยู่แล้ว วันนี้ผมเลยขอนำเสนอบทความเปรียบเทียบ ความสามารถนึงในนั้นของ jQuery คือการไต่เอกสารในรูปแบบ DOM ว่ามีขั้นตอนง่ายและสั้นกว่า ยังไง …

Javascript without jQuery
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
};
}

jQuery
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});

จากตัวอย่างด้านบนเราจะเห็นได้ว่า Javascript แบบปกติ ต้องมีการ get กันเป็นทอดตั้งแต่
1. getElemenetById
2. getElementsBytagName
3. วนลูปเพื่อหา event onclick
4. เรียกใช้ function

แต่ถ้าเป็น jQuery เราจะเขียนแค่
1. เรียก id ที่ต้องการอ้างถึงรวมทั้ง a tag โดยใช้แค่
$("#external_links a")

จากนั้นใส่ event ที่ต้องการดักจับแล้วเรียก function ได้ทันที

จะเห็นได้ว่า Code สั้นกว่ากันมากและมีขั้นตอนน้อยกว่า ค่อนข้างเยอะ