jQuery笔记之事件绑定
.on()，off()，.one()，.trigger()
.hover()
jQuery实例方法-动画
.show()，.hide()，.toggle()
参数：null或(duration,easing,callblack)
.fadeIn()，.fadeOut()，.fadeToggle()，.fadeTo()
参数：null或(duration,[opacity],easing,callblack)
.slideDom()，.slideUp()，.slideToggle()
参数: null或(duration,easing,callblack)
.animate() 这是一个大佬等级的动画！
参数：(target duration easing callblack)
配合一下方法使用
.stop()，finish()
.delay()
jQuery.fx.off = true 动画开关接口
-------------------------------------------------------------
on()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .demo{
10 width:100px;
11 height:100px;
12 background:red;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="demo"></div>
18 <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
19 <script>
20
21 $('.demo').on('click', {name : 'ypx'}, function(e){
22 console.log(e.data);
23 });
24
25 //on事件还可以这么绑定
26 $('.demo').on({
27 click: function(){
28 console.log(click);
29 },
30 mouseenter: function(){
31 console.log(mouseenter);
32 },
33 mouseleave: function(){
34 console.log(mouseleave);
35 }
36 });
37
38
39 </script>
40 </body>
41 </html>
off()，可以解绑有绑定事件的元素
<style>
.demo {
width: 100px;
height: 100px;
background: red;
}
</style>
</head> <body>
<div class="demo"></div>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<!-- <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> -->
<script>
function clickOne(){ //创建输出函数
console.log('clickOne');
}
$('.demo').on('click', clickOne); //给demo身上绑定点击事件 $('.demo').off(); //解绑demo身上的所有事件
off()也可以传入参数
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head> <body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<!-- <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> -->
<script>
function clickOne(){ //创建输出函数
console.log('clickOne');
}
$('ul').on('click', 'li', clickOne); //选中ul给li身上绑定点击事件
$('ul').off('click', 'li', clickOne); //选中ul解绑li身上的所有事件
</script>
</body>
</html>
one()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<a href="https://www.baidu.com">jump</a>
<!-- 百度页面 -->
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<script> $('a').one('click', function(){ //one()只有一次效果
window.open('https://www.taobao.com'); //第一次点击打开淘宝页面，点击第二次打开百度页面
return false;
}); </script>
</body>
</html>
trigger()
第二个参数
自定义方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
width: 100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div class="demo"></div>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<script>
$('.demo').on('pageload', function(){ // 一、pageload自定义的方法，是不可能通过一系列的操作来触发
console.log('触发点击事件'); //三、触发自定义的方法之后可以开启一系列的操作了
//想要实现什么东西都可以写到里面
});
$('.demo').trigger('pageload'); //二、只能通过trigger来触发自定义的方法
</script>
</body>
</html>
hover()
show(), hide()
先看一下效果图：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
width: 200px;
height: 300px;
border: 1px solid black;
}
p{
background:red;
cursor: pointer;
}
ul {
display: none;
}
/* ul最开始得先设置为不可见 */
</style>
</head> <body>
<div class="demo">
<p>Rose</p>
<ul>
<li>NBA状元秀</li>
<li>最年轻的MVP</li>
<li>涅槃重生</li>
</ul>
</div> <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<script>
$('p').on('mouseenter', function () { //鼠标移入触发
$(this).next().show(2000, 'swing');
//获取本身下一个标签设置展示动画，2秒内完成，swing的运动方式先快再慢再快
});
$('.demo').on('mouseleave', function () { //鼠标移出触发
$('p').next().hide(2000, 'linear');
//获取p标签下一个标签设置隐藏动画，2秒内完成，linear的运动方式水平匀速
});
</script>
</body>
</html>
toggle()
点击出来，点击消失
fadeIn()，fadeOut()，fadeToggle()
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo{
width: 200px;
border:1px solid black;
}
p{
background:red;
cursor: pointer;
}
ul {
display: none;
}
/* ul最开始得先设置为不可见 */
</style>
</head> <body>
<div class="demo">
<p>Rose</p>
<ul>
<li>NBA状元秀</li>
<li>最年轻的MVP</li>
<li>涅槃重生</li>
</ul>
</div> <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<script>
$('p').on('click', function () { //鼠标点击触发 //方法一
if($(this).next().css('display') == 'none'){ //判断被点击元素下一个标签身上dispaly等不等于none
$(this).next().fadeIn(); //等于none就把展示出来的画面变成fadeIn(淡入淡出)。主要修改透明度
}else{
$(this).next().fadeOut();//如果不等于none就慢慢收回
} //方法二，同理上面的方法一
$(this).next().fadeToggle(2000); //本身具有判断性，参数是要求在2秒内完成。主要修改透明度
});
</script>
</body>
</html>
fadeTo()
渐渐呈现，慢慢消失。主要改变透明度值
成品图如下：
slideDom()，slideUp()
卷帘效果，主要改变高度
成品图如下：
slideToggle()
<script>
$('p').on('click', function () { //鼠标点击触发
//方法一
if($(this).next().css('display') == 'none'){ //判断被点击元素下一个标签身上dispaly等不等于none
$(this).next().slideDown(1000, 'swing', function(){
console.log('over1');
});
}else{
$(this).next().slideUp(1000, 'swing', function(){
console.log('over2');
});
} //方法二
$(this).next().slideToggle(2000); //同理与上面的方法，这个本身具有判断性，可以来回切换状态呈现卷帘效果，参数是2秒内完成动画
});
</script>
animate() 配合使用.stop()，finish()，.delay()
成品图1.0
点击start后运动
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo {
position: absolute;
width: 100px;
height: 100px;
background: red;
} .dian {
width: 5px;
height: 150px;
background: black;
position: absolute;
top: 232px;
left: 358px;
}
</style>
</head> <body>
<button id="stopBtn">stop</button>
<!-- <button id="finishBtn">finish</button> -->
<button id="startBtn">start</button>
<div class="demo"></div>
<div class="dian"></div>
<script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
<!-- <script src="../jq/Myjquery.js"></script> -->
<script>
$('#startBtn').on('click', function () {//starBtn绑定点击事件
$('.demo') //点击后demo改变
.animate({ width: '+=50', height: '+=50', left: '+=200', top: '+=200' }, 1000, 'swing') //状态改变，执行完本行动画再执行下一行
.animate({ width: '+=50', height: '+=50', left: '+=200', top: '-=200' }, 1000, 'swing') //状态改变
});
</script>
</body>
</html>
stop(),停止当前正在执行的动画，执行下一个动画
还没到达终点线就停止，执行下一个动画
<script>
$('#startBtn').on('click', function () {//starBtn绑定点击事件
$('.demo') //点击后demo改变
.animate({ width: '+=50', height: '+=50', left: '+=200', top: '+=200' }, 1000, 'swing') //状态改变，执行完本行动画再执行下一行
.animate({ width: '+=50', height: '+=50', left: '+=200', top: '-=200' }, 1000, 'swing') //状态改变
});
$('#stopBtn').on('click', function(){ //stopBtn绑定点击事件
$('.demo').stop(); //被点击后停止执行当前动画，跳到下一个动画
});
</script>
在stop()里面还可以传入参数 ：null (true) (true,true)
我们来看传入一个true，点击stop之后停止了后面的所有动画
我们再来看看传入两个true是什么样的！
传入两个true是点击stop之后停止当前动画，直接跳转到了动画的目标点
finish()
点击finish之后直接跳转到了动画结束的目标点
类似于ppt播放的时候点击页面，把动画去掉，直接显示出来
<script>
$('#startBtn').on('click', function () {//starBtn绑定点击事件
$('.demo') //点击后demo改变
.animate({ width: '+=50', height: '+=50', left: '+=200', top: '+=200' }, 1000, 'swing') //状态改变，执行完本行动画再执行下一行
.animate({ width: '+=50', height: '+=50', left: '+=200', top: '-=200' }, 1000, 'swing') //状态改变
});
$('#stopBtn').on('click', function () { //stopBtn绑定点击事件
$('.demo').stop(true, true); //被点击后停止执行当前动画，跳到下一个动画
});
$('#finishBtn').on('click', function () { //finishBtn邦定点击事件
$('.demo').finish(); //被点击后直接跳转到最后的目标
});
</script>
delay() 可以传入参数，参数为时间。传入2秒表示2秒后执行下一个动画
jquery.fx.off()
jQuery动画接口，参数true把所有过度动画给禁用，默认为flase为开启过度动画。
jQuery笔记之事件绑定的更多相关文章
- jQuery笔记（事件绑定和解绑）
事件绑定一.bind()1.传两参数 第一个参数是事件名,第二个是事件处理函数2.传键值对(对象) <body> <input type="button" val ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- 关于jQuery新的事件绑定机制on()的使用技巧
关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
Jquery中的事件绑定:$("#btn").bind("click",function(){ }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
- jQuery插件 -- 动态事件绑定插件jquery.livequery.js
http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- jQuery新的事件绑定机制on()
浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
随机推荐
- 百度统计的JS脚本原理解析
一句话:在你的网站上加载百度统计的脚本,这个脚本会收集你的本地信息,然后发送给百度统计网站 https://blog.csdn.net/iqzq123/article/details/8877645 ...
- 【python】对象和面向对象
类的定义 python支持多重继承,在类名后面的小括号中,可以列出多个类名,以逗号分割. __init__方法在类的实例创建后被立即调用,注意与c++中构造函数不一样,因为对象在调用__init__时 ...
- 分析PMT changed for the ROM:it must be downloaded.升级失败。
应用场景描写叙述: 同样项目不同版本号(不同分支),使用Smart Phone Flash Tool工具交叉升级,出现PMT changed for the ROM;it must be downlo ...
- Atitit.软件仪表盘(7)--温度监測子系统--电脑重要部件温度与监控and警报
Atitit.软件仪表盘(7)--温度监測子系统--电脑重要部件温度与监控and警报 Cpu温度.风扇转速 主板温度 显卡温度 硬盘温度 电池温度 鲁大师 硬盘温度 Cpu温度 core temp ...
- 【HDOJ 3652】B-number
[HDOJ 3652]B-number 给一整数n 找<=n的整数中能被13整除且含有13的 数位dp 记忆化! . 一入记忆化深似海. ..再也不想用递推了...发现真的非常好想 仅仅要保证满 ...
- 3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能
本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首 ...
- Android实战简易教程-第四十枪（窃听风云之短信监听）
近期在做监听验证码短信自己主动填入的功能,无意间想到了一个短信监听的办法. 免责声明:短信监听本身是一种违法行为,这里仅仅是技术描写叙述.请大家学习技术就可以.(哈哈) 本实例是基于bmob提供的后台 ...
- BZOJ 3550 ONTAK2010 Vacation 单纯形
题目大意:给定一个长度为3n的区间.要求选一些数,且随意一段长度为n的区间内最多选k个数.求选择数的和的最大值 单纯形直接搞 注意一个数仅仅能被选一次 因此要加上xi<=1这个约束条件 不明确3 ...
- ASP.NET MVC 原理
我出了份卷子做面试题,其中之一就是要求说说ASP.NET MVC的原理.感觉太空泛了,谁能说得准呢? 但是,如果站在我这个面试官立场,面试题好多时并不要求有标准答案,可能也没有什么标准答案,主要是通过 ...
- ABAP doi 导出程序
PERFORM FRM_OUTPUT_EXCEL_38 TABLES GT_RESULT USING 'ZHRPA038' LDF_PATH . FORM FRM_OUTPUT_EXCEL_38 TA ...