【前端动手玩创意】太屌了吧！？用Class(类)製作Jquery的效果！(11)

目录

【前端动手玩创意】等待的转圈圈效果 (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类的概念，会让我们在前端的功力大幅提升唷！！

请继续关注，
跟着我们这个系列继续动手玩创意！！未来还有更多更新鲜的花招呢(｡◕∀◕｡)