.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笔记之事件绑定的更多相关文章

  1. jQuery笔记(事件绑定和解绑)

    事件绑定一.bind()1.传两参数 第一个参数是事件名,第二个是事件处理函数2.传键值对(对象) <body> <input type="button" val ...

  2. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  3. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  4. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  5. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  6. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

  7. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  8. jQuery新的事件绑定机制on()

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理 ...

  9. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

随机推荐

  1. Netflix是什么,与Spring Cloud有什么关系

    说明:以下总结的观点不一定准确,但是是最好理解的. 1.首先,Netflix是一家做视频的网站,可以这么说该网站上的美剧应该是最火的. 2.Netflix是一家没有CTO的公司,正是这样的组织架构能使 ...

  2. C# DataGridView,右键单击RowHeader时显示右键菜单怎么做?

        private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)         {       ...

  3. Meteor结构

    Meteor提供了一些特殊的文件夹,可以帮助开发人员构建他们的应用程序. client 如果创建客户端文件夹,这个文件夹里面的一切都将在客户端上运行.在这里,可以将您的HTML,CSS和客户端Java ...

  4. django 简易博客开发 2 模板和数据查询

    首先还是贴一下项目地址  https://github.com/goodspeedcheng/sblog   因为代码全在上面 上一篇博客我们介绍了 django的安装配置,新建project,新建a ...

  5. CV_HAAR_FEATURE_DESC_MAX和CV_HAAR_FEATURE_MAX

    #define CV_HAAR_FEATURE_MAX 3 //提前定义的一个宏,在程序中表示一个haar特征由至多三个矩形组成 #define CV_HAAR_FEATURE_DESC_MAX 20 ...

  6. linux之rsync远程数据同步备份

    rsync服务是一种高效的远程数据备份的工具,该服务的port号为873, 是Liunx下的一种非独立服务.由xinetd超级服务管理,取代监听873port. 长处: 1.rsync能够利用ssh和 ...

  7. CSS多种方法实现分隔线

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. android 浮动窗体学习笔记及个人理解(仿360手机助手)

    很感谢原文作者 http://blog.csdn.net/guolin_blog/article/details/8689140 经自己理解 程序执行界面例如以下图: 1.程序入口界面 2.小浮动窗体 ...

  9. 《The Swift Programming Language》的笔记-第28页

    页 本页里的主要内容是: 1 介绍swift语言里的各类数制,或者说某一整数的不同表示形式. 1)十进制,无前缀 的序列 3)八进制,以0o开头.后边是若干0~7的序列 进制,以0x开头.后是0~9. ...

  10. 修改linux环境变量配置文件

    发现error ImportError: dynamic module does not define module export function (PyInit_cv_bridge_boost) ...