原文地址：Bougie的博客jQuery，曾经是Web前端的必备工具，随着MVVM框架的兴起，略有没落。但它在操作DOM方面的便利性是首屈一指的。我用ES6写了一个基于简化版类的jQuery，正好做一个ES6学习记录。包含基本DOM操作，支持链式操作，仅供日常使用。当然，它不支持IE。内容构造函数（constructor）构造了一个tinyJquery对象。功能：基于基本的选择器结构，包括id、class、tagName；基于原生DOM结构，将原生DOM对象转化为tinyJquery对象。为了支持批处理操作，tinyJquery构造函数应该包含多个DOM。classtinyJquery{constructor(name){if(typeofname=='string'){//选择器this.dom=document.querySelectorAll(name)}elseif(name.constructor.name=='NodeList'){//Chainedthis.dom=name}else{//NativeDOMtotinyJquerythis.dom=[name]}}}使用$函数构建一个tinyJquery对象function$(name){returnnewtinyJquery(name)}method(will按照逐步完善)事件操作类tinyJquery{constructor(name){if(typeofname=='string'){//选择器this.dom=document.querySelectorAll(name)}elseif(name.constructor.name=='NodeList'){//链接this.dom=name}else{//原生DOM到tinyJquerythis.dom=[name]}}//addEventListeneron(eventName,fn,bubble=false){this.dom.forEach(i=>{i.addEventListener(eventName,fn,!bubble)})返回新的this.constructor(this.dom)}//removeEventListenerun(eventName,fn,bubble=false){this.dom.forEach(i=>{i.removeEventListener(eventName,fn,!bubble)})returnnewthis.constructor(this.dom)}}class操作classtinyJquery{constructor(name){if(typeofname=='string'){//选择器this.dom=document.querySelectorAll(name)}elseif(name.constructor.name=='NodeList'){//链式this.dom=name}else{//原生DOM转tinyJquerythis.dom=[name]}}//addClassac(className){this.dom.forEach(i=>{i.classList.add(className)})returnnewthis.constructor(this.dom)}//removeClassrc(className){this.dom.forEach(i=>{i.classList.remove(className)})返回新的this.constructor(this.dom)}//toggleClasstc(className){this.dom.forEach(i=>{i.classList.toggle(className)})returnnewthis.constructor(this.dom)}//containClasscc(className){letflag=falsethis.dom.forEach(i=>{if(i.classList.contains(className))flag=true})returnflag}}属性操作classtinyJquery{constructor(name){if(typeofname=='string'){//选择器this.dom=document.querySelectorAll(name)}elseif(name.constructor.name=='NodeList'){//链式this.dom=name}else{//原始DOM转tinyJquerythis.dom=[name]}}//设置内联样式css(obj){this.dom.forEach(v=>{Object.keys(obj).forEach(i=>{v.style[i]=obj[i]})})returnnewthis.constructor(this.dom)}//获取或设置属性attr(key,val){if(key&&!val){returnthis.dom[0].getAttribute(key)}else{this.dom.forEach(i=>{i.setAttribute(key,val)})returnnewthis.constructor(this.dom)}}}内容操作classtinyJquery{constructor(name){if(typeofname=='string'){//选择器this.dom=document.querySelectorAll(name)}elseif(name.constructor.name=='NodeList'){//链式this.dom=name}else{//原始DOM转tinyJquerythis.dom=[name]}}//获取或设置输入值val(val){if(val){this.dom[0].value=valreturnnewthis.constructor(this.dom)}else{returnthis.dom[0].value}}//获取或设置dominnerHtmlhtml(val){if(val){this.dom.forEach(i=>{i.innerHTML=val})返回newthis.constructor(this.dom)}else{returnthis.dom[0].innerHTML}}}表单操作classtinyJquery{constructor(name){if(typeofname=='string'){//选择器this.dom=document.querySelectorAll(name)}elseif(name.constructor.name=='NodeList'){//链式this.dom=name}else{//原始DOM转tinyJquerythis.dom=[name]}}//获取JSONDataserializeObject(){letdom=this.dom[0],obj={}dom.querySelectorAll('input,textarea').forEach(i=>{obj[i.getAttribute('name')]=i.value})returnobj}//获取FormDataserializeForm(){letdom=this.dom[0],form=newFormData()dom.querySelectorAll('input,textarea').forEach(i=>{form.append(i.getAttribute('name'),i.value)})返回表单}}
