目錄
【前端動手玩創意】等待的轉圈圈效果 (1)
【前端動手玩創意】google五星評分的星星(2)
【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)
【前端動手玩創意】一句CSS做出好看的hero section！(4)
【前端動手玩創意】創造一個Skill bar(5)
【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)
【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)
【前端動手玩創意】讓你的PDF檔案更難被抓取(8)
【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)
【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)
前情提要
各位知道jquery，這個JS的函式庫提供我們非常多實用的方法，包裝好給我們用。 其中底層邏輯都還是跑不出js原生的概念， 今天就讓我們用原生JS的類來創造一些Jquery幫我們打包好的方法吧！ 來掀開它的奧秘底牌。
程式碼內容
假設我們要創造一個叫做Dquery的東西，該怎麼做呢：
class Dquery {
constructor(selector) {
this.elements = document.querySelectorAll(selector);
//噴出DOM來
}
css(property, value) {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].style[property] = value;
}
return this;
//修改style
}
addClass(className) {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].classList.add(className);
}
return this;
//增加class
}
removeClass(className) {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].classList.remove(className);
}
return this;
}
on(eventType, callback) {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].addEventListener(eventType, callback);
}
return this;
//監聽事件的運作
}
html(htmlString) {
if (typeof htmlString === 'undefined') {
return this.elements[0].innerHTML;
} else {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].innerHTML = htmlString;
}
return this;
}
}
}
function $(selector) {
return new Dquery(selector);
}
觀念筆記
其實概念就是先把底層邏輯刷過一遍 最後return this 就達成jquery的效果了唷。
心得
Jquery曾經非常流行，儘管後來式微了，卻還是有一批死忠的粉絲鍾愛著它的簡便， 事實上它就是JS，所以討人喜歡也是正常的， 這次學會了用ES6類的概念，會讓我們在前端的功力大幅提升唷！！
按讚的人：
共有 4 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
小網站、快速開發的話，jQuery 還是很好用的，我自己也經常使用！