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树 首先,图 ...
随机推荐
- Netflix是什么，与Spring Cloud有什么关系
说明:以下总结的观点不一定准确,但是是最好理解的. 1.首先,Netflix是一家做视频的网站,可以这么说该网站上的美剧应该是最火的. 2.Netflix是一家没有CTO的公司,正是这样的组织架构能使 ...
- C# DataGridView,右键单击RowHeader时显示右键菜单怎么做？
private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e) { ...
- Meteor结构
Meteor提供了一些特殊的文件夹,可以帮助开发人员构建他们的应用程序. client 如果创建客户端文件夹,这个文件夹里面的一切都将在客户端上运行.在这里,可以将您的HTML,CSS和客户端Java ...
- django 简易博客开发 2 模板和数据查询
首先还是贴一下项目地址 https://github.com/goodspeedcheng/sblog 因为代码全在上面 上一篇博客我们介绍了 django的安装配置,新建project,新建a ...
- CV_HAAR_FEATURE_DESC_MAX和CV_HAAR_FEATURE_MAX
#define CV_HAAR_FEATURE_MAX 3 //提前定义的一个宏,在程序中表示一个haar特征由至多三个矩形组成 #define CV_HAAR_FEATURE_DESC_MAX 20 ...
- linux之rsync远程数据同步备份
rsync服务是一种高效的远程数据备份的工具,该服务的port号为873, 是Liunx下的一种非独立服务.由xinetd超级服务管理,取代监听873port. 长处: 1.rsync能够利用ssh和 ...
- CSS多种方法实现分隔线
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- android 浮动窗体学习笔记及个人理解（仿360手机助手）
很感谢原文作者 http://blog.csdn.net/guolin_blog/article/details/8689140 经自己理解 程序执行界面例如以下图: 1.程序入口界面 2.小浮动窗体 ...
- 《The Swift Programming Language》的笔记-第28页
页 本页里的主要内容是: 1 介绍swift语言里的各类数制,或者说某一整数的不同表示形式. 1)十进制,无前缀 的序列 3)八进制,以0o开头.后边是若干0~7的序列 进制,以0x开头.后是0~9. ...
- 修改linux环境变量配置文件
发现error ImportError: dynamic module does not define module export function (PyInit_cv_bridge_boost) ...