jquery原理代码
class Jq { constructor(arg, root) { // 记录上次操作的节点; if (typeof root == 'undefined') { this.prevObject = new Jq(document, null); } if (root) { this.prevObject = root; } if (typeof arg == "string") { // 字符串 let eles = document.querySelectorAll(arg); this.addEvent(eles); } else if (typeof arg == "function") { window.addEventListener("DOMContentLoaded", arg); } else { // 原生节点; if (typeof arg.length == "undefined") { this[0] = arg; this.length = 1; } else { this.addEvent(arg); } } } addEvent(eles) { eles.forEach((el, index) => { this[index] = el; }) this.length = eles.length; } eq(index) { return new Jq(this[index], this); } end() { return this.prevObject; } click(fn) { for (let i = 0; i < this.length; i++) { this[i].addEventListener("click", fn); } } on(eventName, fn) { let reg = /\s+/g; eventName = eventName.replace(reg, " "); // console.log(eventName); let eventArr = eventName.split(" "); for (let i = 0; i < eventArr.length; i++) { for (let j = 0; j < this.length; j++) { this[j].addEventListener(eventArr[i], fn); } } } css(...arg) { if (arg.length > 1) { if(arg[0] in $.cssHooks){ let item=arg[0]; for (let i = 0; i < this.length; i++) { $.cssHooks[item].set(this[i],arg[1]); } } else{ // 2个参数 // 设置样式 for (let i = 0; i < this.length; i++) { this.setStyle(this[i], arg[0], arg[1]); } } } else { // 1个参数:--》字符串 、 对象;[obj] if (typeof arg[0] == 'string') { if(arg[0]=="wh"&&arg[0] in $.cssHooks){ return $.cssHooks[arg[0]].get(this[0]); }else{ // 字符串 :获取样式 return this.getStyle(this[0], arg[0]); } } else { // 对象; 设置样式 for (let i = 0; i < this.length; i++) { for (let j in arg[0]) { this.setStyle(this[i], j, arg[0][j]); } } } } } setStyle(ele, styleName, styleValue) { if (typeof styleValue == "number" && !(styleName in $.cssNumber)) { styleValue = styleValue + "px"; } ele.style[styleName] = styleValue; } getStyle(ele, styleName) { return window.getComputedStyle(ele, null)[styleName]; } } function $(arg) { return new Jq(arg); } $.cssNumber = { animationIterationCount: true, columnCount: true, fillOpacity: true, flexGrow: true, flexShrink: true, fontWeight: true, gridArea: true, gridColumn: true, gridColumnEnd: true, gridColumnStart: true, gridRow: true, gridRowEnd: true, gridRowStart: true, lineHeight: true, opacity: true, order: true, orphans: true, pm: true, widows: true, zIndex: true, zoom: true } $.cssHooks={ }