<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery</title> </head> <body> <input type="text" id="text"> <script type="text/javascript"> var wzw=function(id){ this.ele=document.getElementById(id) return this; } // 设置class wzw.prototype.setClass=function(classN){ this.ele.className=classN; return this; } // 去掉指定的class wzw.prototype.removeClass= function(classN){ this.ele.className=this.ele.className.replace(classN,""); return this; }; // 点击方法 wzw.prototype.click= function(fn){ if (this.ele.addEventListener){ this.ele.addEventListener("click",fn,false); }else{ this.ele.attachEvent("onclick",fn); }; return this; }; // hover wzw.prototype.hover= function(overfn,outfn){ this.ele.onmouseover=overfn; this.ele.onmouseout=outfn; return this; }; // 添加指定的class wzw.prototype.addClass= function(classN){ this.ele.className=this.ele.className+" "+classN; return this; }; // 判断是否有指定的class wzw.prototype.hasClass=function(classN){ if (this.ele.className.match(classN)){ return true }else{ return false }; } // 设置css wzw.prototype.css=function(k,v){ if (v){ this.ele.style[k]=v; }else if(!v){ for(key in k){ this.ele.style[key]=k[key]; } }else{ console.log("参数错误") } return this; } // 使用$包裹一下 function $(id){ return new wzw(id) } $("text").setClass("wangzw").css({border:"2px solid #f00","400px",height:"20px",fontSize:"20px",padding:"5px 10px",outline:"none",borderRadius:"5px"}).removeClass("wangzw").hover(function(){ this.style.background="rgba(220,230,240,.2)"; },function(){ this.style.background=""; }).click(function(){ this.value="000000" }); </script> </body> </html>