实际开发常用的jquey事件类型，并运用到图片相册
鼠标事件
.click 鼠标单击
.dblclick 鼠标双击
// 单击事件
$("a").click(function(){
$("img").eq($(this).index()) // 获取当前点击的a的index
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
}); // 双击事件
$("a").dblclick(function(){
$("img").eq($(this).index()) // 获取当前点击的a的index
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
});
.mousedown() 鼠标按下
.mouseup() 鼠标松开
.mousedown+.mouseup=click
知识点补充：mousedown和mouseup事件鼠标左键点击和鼠标右键点击都是可以实现的，click和dblclick事件只有鼠标左键点击才能实现
// 鼠标按下
$("a").mousedown(function(){
console.log("鼠标按下");
}); // 鼠标松开
$("a").mouseup(function(){
console.log("鼠标松开");
});
.mouseenter() 鼠标进入
.mouseleave（) 鼠标移出
有点类似于hover的感觉
// 鼠标移入
$("a").mouseenter(function(){
console.log("鼠标移入");
}); // 鼠标移出
$("a").mouseleave(function(){
console.log("鼠标移出");
});
mouseenter+mouseleave=hover
.hover() 里面可以放两个函数，第一个函数为移入的状态，第二个函数为移出的状态，多用于移出时还原
// 鼠标悬停
$("a").hover(function(){
$("img").eq($(this).index()) // 获取当前点击的a的index
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
}); // 鼠标悬停（over和out）
$("a").hover(function(){
$("img").eq($(this).index())
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
},function(){
$("img").eq($(this).index())
.css({"opacity":"0"})
.siblings()
.css({"opacity":"1"});
});
mouseover 鼠标进入（包括子元素）
mouseout 鼠标移出（包括子元素）
比较少用，因为有冒泡和捕获
// 鼠标进入元素及其子元素
$("a").mouseover(function(){
$("img").eq($(this).index())
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
});
// 鼠标离开元素及其子元素
$("a").mouseout(function(){
$("img").eq($(this).index())
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
});
mousemove 在元素内部移动
一有移动就会触发，因此非常消耗资源
// 鼠标移动
$("a").mousemove(function(){
console.log("鼠标移动");
});
scroll 鼠标拖拽滚动条
鼠标一滚动就会触发，因此消耗资源
// 鼠标滚动
$("a").scroll(function(){
console.log("鼠标滚动");
});
键盘事件
keydown 当键盘或者按键被按下时
参数为event，是键盘事件的属性
event.key 按下的键
event.keyCode 按下的键的键码（常用于识别左右上下箭头）
// 键盘按下
$(document).keydown(function(event){
console.log(event);
console.log(event.key);//a
console.log(event.keyCode);//
});
鼠标不等于光标焦点
keydown只能在聚焦中有用
window 代表浏览器的窗口，document 是 HTML 文档的根节点
从常理上说，元素没有焦点是不能触发键盘事件的（除了window、document等，可以理解为只要在这个页面上，他们都是聚焦的）。
触发键盘事件常用的就是表单元素
keyup 按键被释放的时候，发生在当前获得焦点的元素上
keydown 键盘被按下即可（包括所有键，以及输入法输入的内容）
keypress 键盘按键被按下的时候（必须是按下字符键，不包括其他按键，也不包括输入法输入的文字）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("input").keydown(function(e){
console.log("keydown");
});
})
$(function(){
$("input").keypress(function(e){
console.log("keypress");
});
}) </script>
</head>
<body> <form>
<input type="text">
</form> </body>
</html>
在input框中输入内容的时候同样显示在下面的p标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("input").keydown(function(e){
var text=$(this).val();
$("p").text(text);
});
}) </script>
</head>
<body> <form>
<input type="text">
</form>
<p></p>
</body>
</html>
其他事件
.ready() DOM加载完成
$(document).ready(function())
.resize() 调整浏览器窗口大小，只针对window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$(document).resize(function(){
console.log("document+resize");
});
$(window).resize(function(){
console.log("window+resize");
});
}) </script>
</head>
<body> <form>
<input type="text">
</form>
<p></p>
</body>
</html>
.focus() 获取焦点
.blur() 失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("input").focus(function(){
console.log("(*^▽^*)");
});
$("input").blur(function(){
console.log("o(╥﹏╥)o");
});
}) </script>
</head>
<body> <form>
<input type="text">
</form>
<p></p>
</body>
</html>
.change() 元素的值发生改变，常用于input
有延迟机制，当快速改变内容时，不是实时跟着触发事件
在输入框中输入的过程中，不会触发.change事件，当光标离开或者手动点击时才会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("input").change(function(){
console.log("change");
});
}) </script>
</head>
<body> <form>
<input type="number">
</form>
<p></p>
</body>
</html>
或者select列表的选择也会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("select").change(function(){
console.log("change");
});
}) </script>
</head>
<body> <form>
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
</form>
<p></p>
</body>
</html>
.select() 当input或者textarea中的文本被选中时触发，针对于可选中文字的输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("input").select(function(){
console.log("select");
});
}) </script>
</head>
<body> <form>
<input type="text" value="这是文本哦">
</form>
<p></p>
</body>
</html>
.submit() 表单提交事件
button是html新增标签，在其他地方依然是普通按钮，但是在非IE浏览器中，在表单内部会起到提交表单的功能
用处：
1、提交表单
2、禁止提交表单（回调函数返回值为false）
3、提交表单时进行指定操作（表单验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
// 给input[type="button"]添加提交表单的功能
$("input[type='button']").click(function(){
$("form").submit();//提交表单
});
//阻止表单提交
$("button").click(function(){
$("form").submit(function(){
return false;//只要回调函数的返回值是假，表单就不会被提交
});
});
//表单验证
$("form").submit(function(){
if($("input[type='text']").val()!="cyy") return false;
})
}) </script>
</head>
<body> <form action="javascript:alert('我被提交啦~')">
<input type="text">
<input type="button" value="button按钮"><!-- 不能提交表单 -->
<button>提交按钮</button><!-- 可以提交表单 -->
</form>
<p></p>
</body>
</html>
事件参数 event
event.keyCode 左37 右39 上38 下 40
鼠标在div框移动时，获取鼠标在页面中的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$("div").mousemove(function(event){
$(".span1").text(event.pageX);
$(".span2").text(event.pageY);
})
}) </script>
<style>
div{
width:300px;
height:300px;
border:1px solid;
margin:0 auto;
text-align: center;
line-height:300px;
color:orange;
}
</style>
</head>
<body> <div>
pageX:<span class="span1"></span>
pageY:<span class="span2"></span>
</div> </body>
</html>
事件绑定与取消
.on(事件，[选择器]，[值]，函数) 绑定一个或多个事件
以下两种方式效果相同
// 单击事件
$("a").click(function(){
index=$(this).index(); // 获取当前点击的a的index
swiper();
}); //改写成on的绑定
$(document).on("click","a",function(event){
event.stopPropagation();//阻止冒泡
index=$(this).index(); // 获取当前点击的a的index
swiper();
});
为什么使用on方法：
如果是动态生成的元素，使用.click这种方式是无法绑定的，因为会找不到该元素
需要使用live方法
从jquery1.7开始，把 bind delegate live 方法给移除，使用了 on 方法
这种方式可以获取到动态生成的元素，因为是从document开始搜索的
$(document).on("click","a",function(event){
event.stopPropagation();//阻止冒泡
index=$(this).index(); // 获取当前点击的a的index
swiper();
});
也可用于绑定多个事件
//绑定多个事件
$("a").add(document).on({
click:function(event){
event.stopPropagation();//阻止冒泡
index=$(this).index(); // 获取当前点击的a的index
swiper();
},
mouseenter:function(event){
event.stopPropagation();//阻止冒泡
index=$(this).index(); // 获取当前点击的a的index
swiper();
},
keydown:function(event){
if(event.keyCode==37){//左
index=index>0 ? --index : $("a").length-1;
}else if(event.keyCode==39){//右
index=index<$("a").length-1 ? ++index : 0;
}else{
return true;
}
swiper();
}
});
.off() 取消事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$(".bind").on("click",function(){
$(".btn").on("click",flash)
.text("点击有效");
});
$(".unbind").on("click",function(){
$(".btn").off("click",flash)
.text("点击无效");;
});
var flash=function(){
$("div").show().fadeOut("slow");//先显示，再缓慢隐藏
}
})
</script>
<style>
div{ display: none; }
</style>
</head>
<body> <button class="btn">点击无效</button>
<button class="bind">绑定</button>
<button class="unbind">取消绑定</button>
<div>按钮被点击了~</div> </body>
</html>
.one() 绑定一次性的事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$(".bind").on("click",function(){
$(".btn").on("click",flash)
.text("点击有效");
});
$(".unbind").on("click",function(){
$(".btn").off("click",flash)
.text("点击无效");;
});
$(".bindOne").on("click",function(){
$(".btn").one("click",flash)
.text("仅一次点击有效");
});
var flash=function(){
$("div").show().fadeOut("slow");//先显示，再缓慢隐藏
}
})
</script>
<style>
div{ display: none; }
</style>
</head>
<body> <button class="btn">点击无效</button>
<button class="bind">绑定</button>
<button class="unbind">取消绑定</button>
<button class="bindOne">绑定一次</button>
<div>按钮被点击了~</div> </body>
</html>
项目三大bug：
1、刷新后第一次按下左键无效，第二次按左键开始生效
原因：默认后面的覆盖前面的，因此显示的是第4张；但是index是0，因此第一次按左键时，index变成了最后一张；视觉上看是没有变化的
最简单的解决方法：将 index 改为默认显示的图片，使之同步（ index=0 改成 $("a").length-1）
2、刷新后默认是最后一张，按下右键，出来的图片不是第一张，而是第二张
前面一个解决方法，同时解决了1和2两个bug
3、左右几次按键之后，轻轻一动鼠标，图片切换到了最后一张；鼠标移出再移入时又到了最后一张
原因：$("a").add(document) 这种写法导致程序无法判断什么时候是针对a，什么时候是针对document，导致鼠标在document上移动时也触发了mouseenter事件
解决方法：判断只有当触发事件的元素的标签名是a的时候，才进行切换
但是，一般项目中轮播图默认都是从0开始的
解决：函数封装需要初始化
项目index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<span class="top"></span>
<nav>
<a href="#">banner1</a>
<a href="#">banner2</a>
<a href="#">banner3</a>
<a href="#">banner4</a>
</nav>
<div class="img-box">
<img src="data:image/cat1.jpg">
<img src="data:image/cat2.jpg">
<img src="data:image/cat3.jpg">
<img src="data:image/cat4.jpg">
</div>
</body>
</html>
style.css
* { margin:; padding:; border: none; }
html, body { overflow: hidden;/*解决因为盒模型溢出造成的垂直方向滚动条*/ height: 100%; background-color: rgb(145, 176, 200); }
span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; }
nav { position: relative; display: flex;/*弹性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*实现元素在容器内左右均匀分布*/ }
nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活伪元素*/ background-color: #fff; }
nav > a { font-size: 14px; position: relative; /*默认是static定位，会被绝对定位覆盖 修改为相对定位之后，会覆盖前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; }
.img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); }
.img-box img { position: absolute; top:; right:; bottom:; left:; width: 98%; margin: auto;/*以上5句实现绝对定位的居中*/ }
/*# sourceMappingURL=style.css.map */
script.js
$(function(){
var index=$("a").length-1;
//绑定多个事件
$("a").add(document).on({
click:function(event){
event.stopPropagation();//阻止冒泡
index=$(this).index(); // 获取当前点击的a的index
swiper();
},
mouseenter:function(event){
event.stopPropagation();//阻止冒泡
console.log($(this)[0].nodeName);//当前对象的标签名
if($(this)[0].nodeName=="A"){
index=$(this).index(); // 获取当前点击的a的index
}else{
return true;
}
swiper();
},
keydown:function(event){
if(event.keyCode==37){//左
index=index>0 ? --index : $("a").length-1;
}else if(event.keyCode==39){//右
index=index<$("a").length-1 ? ++index : 0;
}else{
return true;
}
swiper();
}
});
var swiper=function(){
$("img").eq(index)
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
}
//初始化
var init=function(){
index=0;
swiper();
}
init();
});
效果图
实际开发常用的jquey事件类型，并运用到图片相册的更多相关文章
- iOS开发-常用第三方开源框架介绍
iOS开发-常用第三方开源框架介绍 图像: 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似 iOS 自带的相册应用,可显示来自手机的图片或者是网络图片,可自动从网 ...
- inux 驱动程序开发中输入子系统总共能产生哪些事件类型（EV_KEY,EV_ABS,EV_REL)
inux 驱动程序开发中, 输入子系统总共能产生哪些事件类型?,以及分别是什么意思?详见如下: Linux中输入设备的事件类型有EV_SYN 0x00 同步事件EV_KEY 0x01 按键事件,如KE ...
- Oracle开发：常用的数据库字段类型[转]
Oracle常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes ...
- 深入理解DOM事件类型系列第一篇——鼠标事件
× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...
- JavaScript事件类型
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...
- Android App 开发常用的xUtils框架
最近搜了一些框架供初学者学习,比较了一下XUtils是目前git上比较活跃 功能比较完善的一个框架,是基于afinal开发的,比afinal稳定性提高了不少,下面是介绍: 鉴于大家的热情,我又写了 ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- iOS开发——实用篇Swift篇&项目开发常用实用技术
项目开发常用实用技术 实现拨打电话 要实现打电话功能,最简单最直接的方式便是:直接跳到拨号界面 (注意:这个需要真机调试,模拟器无效果) UIApplication.sharedApplica ...
- 《JAVASCRIPT高级程序设计》事件处理程序和事件类型
一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...
随机推荐
- 【Java并发基础】安全性、活跃性与性能问题
前言 Java的多线程是一把双刃剑,使用好它可以使我们的程序更高效,但是出现并发问题时,我们的程序将会变得非常糟糕.并发编程中需要注意三方面的问题,分别是安全性.活跃性和性能问题. 安全性问题 我们经 ...
- 生成URL（而不是链接） Generating URLs (and Not Links) | 在视图中生成输出URL |高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼
结果呢:
- BZOJ 3513 idiots
题目传送门 分析: FFT一手统计两根棍子相加的方案 然后一个值2S可能会被同一根S自己乘自己得到 然后要减去 其次,A+B和B+A会被算成两种方案,所以还要除以2 然后不太好算合法的方案数,但是非法 ...
- 【WPF学习】第二十六章 Application类——应用程序的生命周期
在WPF中,应用程序会经历简单的生命周期.在应用程序启动后,将立即创建应用程序对象,在应用程序运行时触发各种应用程序事件,你可以选择监视其中的某些事件.最后,当释放应用程序对象时,应用程序将结束. 一 ...
- sql 映射文件
...
- SpringBoot检索篇Ⅳ --- 整合ElasticSearch
知识储备: 关于ElasticSearch的基本使用我已经在上一篇文章介绍过了(传送门),本篇文章主要讲述的是SpringBoot与ElasticSearch的整合使用. SpringBoot与El ...
- 机器学习：没有免费午餐定理（No Free Lunch Theorem）
思考 机器学习中哪个算法好?哪个算法差呢? 下面两条线,哪个更好呢? 没有免费午餐定理 如果我们不对特征空间有先验假设,则所有算法的平均表现是一样的. 假设我们的计算机只有两个存储单元,而且每个存储单 ...
- centos最小化安装时网络配置
查看网卡: ip addr 修改网络配置文件 vi /etc/sysconfig/network-scripts/ifcfg-enp33 BOOTPROTO=dhcp ONBOOT=yes 重启网络服 ...
- Spring Boot 2.x基础教程：默认数据源Hikari的配置详解
通过上一节的学习,我们已经学会如何应用Spring中的JdbcTemplate来完成对MySQL的数据库读写操作.接下来通过本篇文章,重点说说在访问数据库过程中的一个重要概念:数据源(Data Sou ...
- Sqli-Labs 闯关 less 42-49
Less 42 这一关一进去看着像前面的二次注入.发现也注入不了.. 我们观察代码发现这一关用的是堆叠注入. 登陆的这里可以看到login_password登陆的时候并没有使用mysqli_real_ ...