jQuery 與 JavaScript 比較 (1) - 建立元素

jQuery優異的特性,讓我們不需要撰寫冗長的JavaScript便能快速完成大部份需要的功能,這一系列針對一些簡單的語法比較進行說明

※ 原文:http://www.kangting.tw/2014/03/jquery-javascript-1.html

jQuery優異的特性,讓我們不需要撰寫冗長的JavaScript便能快速完成大部份需要的功能,不過前提是你必須預先載入 jQuery 函式庫才能享受這些好處。

在 HTML5 與 CSS3 日漸成熟的今日,很多功能其實不需要 jQuery 便能輕易完成,如果你只是需要這些功能的話,大可不必使用 jQuery,未來或許可以逐漸嘗試去 jQuery 化,讓羅輯程式碼維持比較單純的 JavaScript ,當然這種事見人見智,好壞這裏不多作討論,這一系列針對一些簡單的語法比較進行說明。

》建立元素

在網頁中建立一個元素,JavaScript必須引用 document.createElement() 方法,例如以下的程式片段:

var d = document.createElement('DIV');
d.innerHTML = 'JavaScript';
document.body.appendChild(d);

這三行 JavaScript 會在網頁的 body 元素裏面配置一個全新的 div 元素區塊,並且於其中嵌入 JavaScript字串。如果是 jQuery ,所需的程式碼如下:

$('body').append('<div>jQuery</div>');

這一段 jQuery程式碼可以達到相同的效果。 另外,jQuery 直接透過選擇器即可輕易取得網頁中的任意元素,甚至操作網頁結構,在 HTML5 亦能藉由 querySelector()來達到相同的目的,「JavaScript 與 jQuery 取得特定單一元素的方式」這一篇文章作了簡要的說明,請自行閱讀。