原文地址：Bougie的博客jQuery，曾经是Web前端的必备工具，随着MVVM框架的兴起，略有没落。但它在操作DOM方面的便利性是首屈一指的。我用ES6写了一个基于class的jQuery简化版，包含基本的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'||Array.isArray(name)){this.dom=name}else{this.dom=[name]}}}使用$函数构造tinyJquery对象function$(name){returnnewtinyJquery(name)}方法(后续会成功完成)event操作//addEventListeneron(eventName,fn,bubble=false){this.dom.forEach(i=>{i.addEventListener(eventName,fn,!bubble)})return$(this.dom)}//removeEventListenerun(eventName,fn,bubble=false){this.dom.forEach(i=>{i.removeEventListener(eventName,fn,!bubble)})return$(this.dom)}class操作//addClassac(className){this.dom.forEach(i=>{i.classList.add(className)})return$(this.dom)}//removeClassrc(className){this.dom.forEach(i=>{i.classList.remove(className)})返回$(this.dom)}//toggleClasstc(className){this.dom.forEach(i=>{i.classList.toggle(className)})return$(this.dom)}//containClasscc(className){letflag=falsethis.dom.forEach(i=>{if(i.classList.contains(className))flag=true})returnflag}属性操作//setinlinestylecss(obj){this.dom.forEach(v=>{Object.keys(obj).forEach(i=>{v.style[i]=obj[i]})})return$(this.dom)}//获取或设置输入值val(val){if(val){this.dom[0].value=valreturn$(this.dom)}else{returnthis.dom[0].value}}内容操作//获取或设置dominnerHtmlhtml(val){if(val){this.dom.forEach(i=>{i.innerHTML=val})return$(this.dom)}else{returnthis.dom[0].innerHTML}}//获取或设置attributeattr(key,val){if(key&&!val){returnthis.dom[0].getAttribute(key)}else{this.dom.forEach(i=>{i.setAttribute(key,val)})return$(this.dom)}}表格操作//getJSONDataserializeObject(){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)})返回表单}2018-04-16更新Dom获取//parentparent(){return$(this.dom[0].parentNode)}//siblingssiblings(){letdom=this.dom[0]vara=[];varp=dom.parentNode.children;对于(vari=0,pl=p.length;i
