目錄

【前端動手玩創意】等待的轉圈圈效果 (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類的概念，會讓我們在前端的功力大幅提升唷！！

請繼續關注，
跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)