【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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

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 取得特定單一元素的方式」這一篇文章作了簡要的說明,請自行閱讀。

沒有留言: