正文
模拟jquery
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!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",width:"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>
