<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.img{
width: 450px;
height: 300px;
display: block;
margin:30px auto 0;
}
.btn-wrap{
text-align: center;
}
.btn{
margin-top: 50px;
width:100px;
height: 40px;
font-size: 16px;
border-radius: 5px;
outline: none;
background: #ff8533;
color: #fff;
border:none;
}
.btn-show{
margin-right: 20px;
}
</style>
<body>
<img class="img" id="img" alt="图片" src="images/totoro.jpg"/>
<div class="btn-wrap">
<input type="button" class="btn btn-show" id="btn1" value="显示">
<input type="button" class="btn btn-hide" id="btn2" value="隐藏">
</div>
</body>
<script type="text/javascript">
var $=function(selector,context){
return new $.fn.init(selector,context);
}
$.fn=$.prototype;
$.fn={
init:function(selector,context){
var nodeList=(context||document).querySelectorAll(selector);
this.length=nodeList.length;
for(var i=0;i<this.length;i++){
this[i]=nodeList[i];
}
return this;
},
each:function(fn){
var len=this.length;
for(var i=0;i<len;i++){
fn.call(this[i],i,this[i]);
}
return this;
},
hide:function(){
this.each(function(){
this.style.display="none";
})
return this;
},
click:function(fn){
this.each(function(){
this.addEventListener('click',fn,false);
})
},
show:function(){
this.each(function(){
this.style.display="block";
})
return this;
},
addClass:function(clsName){
this.each(function(){
var str = this.className;
this.className=str+' '+clsName;
})
return this;
},
removeClass:function(clsName){
this.each(function(){
var str = this.className;
var rex=new RegExp(clsName,'g');
var str1=str.replace(rex,'');
this.className=str1;
})
return this;
}
}
$.fn.init.prototype=$.fn;
$('.btn-hide').click(function(){
$('#img').hide().addClass('ss').removeClass('htg');
})
$('.btn-show').click(function(){
$('#img').show().addClass('htg').removeClass('ss');
})
</script>
</html>
