ES6模拟jq的一些操作
为了实践一下ES6，就通过ES6简单模拟了一下jq，实现了几个小操作，如$(function())，事件绑定，获取设置css，设置动画及链式操作
代码比较简单，有些地方的错误处理也没有加上，代码直接贴上
效果如下，
图1原始图
点击按钮演示1，分别设置第二个box1的文字颜色和三个box1的背景色，效果见图2
点出按钮演示2，通过动画改变box2的位置，见图2
图1
图2
图3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ES6简单模拟jq</title> <style> * { margin: 0; } div { padding: 10px; } .block1 { border-bottom: 1px solid #333; padding: 10px; overflow: hidden; } .box1 { float: left; width: 100px; height: 100px; background-color: #5faad6; margin-right: 10px; text-align: center; line-height: 100px; font-size: 16px; } .block2 { border-bottom: 1px solid #333; position: relative; height: 120px; } .box2 { position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background-color: #5faad6; } </style> </head> <body> <div class="block1"> <button>演示1</button> <button>演示2</button> </div> <div class="block1"> <div class="box1">box1</div> <div class="box1">box1</div> <div class="box1">box1</div> </div> <div class="block2"> <div class="box2">box2</div> </div> <script> class Jq { constructor(arg, root) { if (typeof root === "undefined") { this["prevObj"] = [document]; } else { this["prevObj"] = root; } if (typeof arg === "string") { //传字符串 let eles = document.querySelectorAll(arg); this.addElems(eles); } else if (typeof arg === "function") { //传函数 document.addEventListener("DOMContentLoaded", arg); } else { //其他默认接收dom对象 if (typeof arg.length === "undefined") { console.log("1个对象"); this[0] = arg; this.length = 1; } else { console.log("多个对象"); this.addElems(eles); } } } addElems(eles) { for (let i = 0; i < eles.length; i++) { this[i] = eles[i]; } this.length = eles.length; } //click事件 click(fn) { for (let i = 0; i < this.length; i++) { this[i].addEventListener("click", fn); } } //绑定事件 on(eventName, fn) { eventName = eventName.trim(); let events = eventName.split(' '); //循环元素 for (let i = 0; i < this.length; i++) { //循环事件 for (let j = 0; j < events.length; j++) { this[i].addEventListener(events[j], fn); } } return this; } eq(index) { return new Jq(this[index], this); } get(index) { return this[index]; } end() { return this["prevObj"]; } css(...args) { if (args.length === 1) { //参数长度为1，且为字符串时，获取样式 //否则默认为按对象设置样式 if (typeof args[0] === "string") { //获取样式 (始终获取第一个元素的样式) return this.getStyle(this[0], args[0]); } else { //按对象设置样式 for (let i = 0; i < this.length; i++) { for (let j in args[0]) { this.setStyle(this[i], j, args[0][j]); } } } } else { //多个参数，取前两个设置样式 for (let i = 0; i < this.length; i++) { this.setStyle(this[i], args[0], args[1]); } } return this; } getStyle(ele, styleName) { return getComputedStyle(ele, null)[styleName]; } setStyle(ele, styleName, styleValue) { ele.style[styleName] = styleValue; } animate(...args) { let speed = 400;//默认动画时间 if (typeof args[1] !== "undefined") { if (typeof args[1] === "string") { switch (args[1]) { case "slow": speed = 600; break; case "normal": speed = 600; break; case "fast": speed = 200; break; default: speed = 400; break; } } else if (typeof args[1] === "number") { speed = args[1]; } } let seconds = speed / 1000; for (let i = 0; i < this.length; i++) { this.setStyle(this[i], "transition", speed / 1000 + "s"); for (let j in args[0]) { this.setStyle(this[i], j, args[0][j]); } if (typeof args[args.length - 1] === "function") { this[i].addEventListener("transitionend", function () { this.setStyle(this[i], "transition", ""); args[args.length - 1](); }); } } return this; } } function $(arg) { return new Jq(arg); } </script> <script> //演示 //jq的 $(functoin(){}); //绑定事件 //获取设置css //简单的动画效果 $(function () { // $("button").eq(0).on("click", function () { $(".box1").eq(1).css("color", "red").end().css({ backgroundColor: "yellow" }); }); // $("button").eq(1).on("click", function () { $(".box2").animate({ left: "200px" }, 3000); }); }) </script> </body> </html>
