Jquery 简单实现demo
2024-10-20 07:54:27
<!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="data: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>
最新文章
- Mipmap与纹理过滤
- HttpWebRequest-header设置
- codeforces 697B Barnicle
- 使用Percona Toolkit解决Mysql主从不同步问题【备忘】
- 关于echarts的疑问
- Kafka源码中的Producer Record定义
- IsPostBack and DropdownList.
- 增强型表格/报表-jqGrid使用浅析
- Spring MVC 完整示例
- struts2自己定义类型转换器
- 基于Redis的CustomerSessionProvider（一）
- 设置文件opendilag、savedilog默认路径和文件类型
- Android WebView那些坑之上传文件
- SqlServer xml类型 查询及操作
- Win10下JDK环境变量的设置
- squid调整
- Ubuntu16.04下安装和配置Redis
- CentOS7 安装git服务器
- Java_7 ArrayList集合
- Impala与Hive的比较