jQuery事件动画
目录：
一、jQuery事件
二、jQuery动画
（一）事件
1.加载Dom两种方式
1.1 window.onload方式（执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行；编写个数：1个）
1.2 jQuery方式（执行时间：网页结构绘制完成后，执行；编写个数：多个）
注意：
①jQuery3.0：window.onload比jQuery先执行
②jQuery1.0和2.0：jQuery比window.onload先执行
案例1：测试两种方式的区别【个数+顺序】
/* window.onload=function(){console.info("js方式1");}window.onload=function(){console.info("js方式2");}window.onload=function(){ //window.onload只会显示最后一个console.info("js方式3");} */// jQuery 可以写多个 都会被执行/* $(function(){console.info("jQuery方式1");})$(function(){console.info("jQuery方式2");})$(function(){console.info("jQuery方式3");}) */2.绑定事件两种方式
2.1 元素.on("事件名",function(){})
2.2 元素.事件名(function(){})
案例2：演示事件(鼠标悬停和点击)的两种方式
//1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]//--元素.on/bind()/* $("#aa").on("click",function(){alert("嘿嘿");}) *//* $("#aa").bind("mouseover",function(){alert("嘿嘿");}) *///--元素.事件名/* $("#aa").click(function(){alert("干啥");}) */3.合成事件/事件切换
3.1 hover()：鼠标悬停合成事件
3.1.1 鼠标移上去第一个函数
3.1.2 鼠标移除第二个函数
案例3：升级案例2鼠标悬停显示和隐藏
//1.3 合成事件/事件切换//--hover()悬停控制元素[div]的显示和隐藏/* $("#aa").hide();//隐藏$("a").hover(function(){//鼠标移上$("#aa").show();//显示},function(){//鼠标移出$("#aa").hide();//隐藏}) */3.2 toggle()：鼠标点击合成事件
案例4：升级案例2鼠标点击显示和隐藏
//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]/* $("#aa").hide();//隐藏$("a").toggle(function(){$("#aa").show();//显示},function(){$("#aa").hide();//隐藏}) */// $("#aa").toggle(1000);4.事件传播（事件冒泡）
4.1阻止传播：事件后面加上 return false
案例5：给body div span(在div中) 分别添加点击事件，测试事件传播
//1.4 事件的传播(事件冒泡) 小p->中div->大body// 分别添加点击事件/* $("p").click(function(){console.info("p被打了");})$("div").click(function(){console.info("div被打了");return false;//阻止传播})$("body").click(function(){console.info("body被打了");}) */5.事件坐标
5.1 offsetX：当前元素左上角
5.2 clientX：窗口左上角
5.3 pageX：网页左上角
案例6：pageX实现 鼠标悬浮，获取鼠标坐标
//1.5 事件event的坐标[了解即可 pageX,pageY]/* $("#aa").click(function(e){console.info(e.pageX,e.pageY);//x,y坐标}) */6.移除事件：
6.1 元素.unbind("事件名")
案例7：按钮点击一次，不能再次点击
注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
/* $("#btn").on("click",function(){//做一系列事情console.info(44944);//将点击事件进行移除$("#btn").off("click");//将按钮禁用$("#btn").attr("disabled",true);}) *///一次/* $("#btn").one("click",function(){console.info(44944);//将按钮禁用$("#btn").attr("disabled",true);}) */案例8：点击按钮偶数次可以，奇数次则失效
注意2：如果某个元素只允许使用一次事件，则可以使用one()
//--按钮点击偶数次可行 奇数次不行/* var i=1;$("#btn").click(function(){if(i%2==0){console.info(44944,i);//做一系列事情}i++;}) */（二）动画效果
素材：
<body><button id="bbb">变便便</button><button id="xx">显示[展开](淡入)</button><button id="yy">隐藏[收缩](淡出)</button><button id="zz">显示/隐藏[展开/收缩](淡入/淡出)</button><button id="btn">点我试试</button><a style="text-decoration: none;" href="#">显示</a><div id="aa"><br /><br /><p>这是一巴掌</p></div></body>
</html> 基本
显示：show(Time)
隐藏:hide(Time)
切换：toggle（Time）
案例1：点击按钮，控制div显示和隐藏（基本动画）
//2.1 基本动画 [回调函数]/* $("#aa").hide();//默认隐藏$("#xx").on("click",function(){$("#aa").show(1000,function(){alert("来了，老弟");});// 1s 显示})$("#yy").click(function(){$("#aa").hide(2000);//隐藏})$("#zz").click(function(){$("#aa").toggle(1000);//切换}) */ 滑动
slideUp(Time)：动画收缩(向上滑动)-->隐藏
slideDown(Time)：动画展开(向下滑动)-->显示
slideToggle(Time)：动画切换
案例2：点击按钮，控制div显示和隐藏（滑动）
//2.2 滑动动画/* $("#aa").hide();//默认隐藏$("#xx").on("click",function(){$("#aa").slideDown(1000);// 1s 显示})$("#yy").click(function(){$("#aa").slideUp(2000);//隐藏})$("#zz").click(function(){$("#aa").slideToggle(1000);//切换}) */
淡入淡出(透明度)
fadeIn(Time)：淡入(透明度减少)
fadeOut(Time)：淡出(透明度增大)
fadeToggle(Time)：切换
案例3：点击按钮，控制div显示和隐藏（透明度）
//2.3 淡入淡出(透明度)/* $("#aa").hide();//默认隐藏$("#xx").on("click",function(){$("#aa").fadeIn(1000);// 1s 显示})$("#yy").click(function(){$("#aa").fadeOut(2000);//隐藏})$("#zz").click(function(){$("#aa").fadeToggle(1000);//切换}) */ 自定义动画
元素.animate({属性：属性值},Time)
缩放
width
height
案例4：点击按钮，控制div的宽度和高度变大
/* //--缩放$("#bbb").click(function(){$("#aa").animate({width:"100px",height:"300px"},1000);}) */ 移动
top
left
案例5：点击按钮，控制div移动，距离网页左上角
//--移动[2]$("#bbb").click(function(){$("#aa").animate({left:"+=5",top:"+=8"},100);}) 移动(本元素)，距离
top= "+="
left= "-="
案例6：点击按钮，控制div移动，距离本元素
$("#bbb").click(function() {$("#aa").addClass("xyz");}) //xyz是在style里写的样式
思维导图：
jQuery事件动画相关推荐
- jQuery事件动画（四）
目录 一,jQuery事件 常见的DOM事件有 加载DOM的两种方式 1window.onload 2.jquery 绑定事件的两种方式 1.element.on/bind(event,functio ...
- 锋利的JQuery —— 事件和动画
大图猛戳 本文转自博客园xingoo的博客,原文链接:锋利的JQuery -- 事件和动画,如需转载请自行联系原博主.
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
- 2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画
目录 1.jQuery中的事件 1.1 事件的组成 1.2 基础事件 2.载入事件 3.鼠标事件 4.键盘事件 5.浏览器事件 6.表单事件 7.绑定事件 8.移除事件 9.复合事件 10.控制元素显 ...
- html数字变换插件,轻量级jquery数字动画插件
jquery.countup.js是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 该数字动画插件可以控制动画的延迟时间和动画过渡时间.它依赖于 ...
- JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- Jquery事件大全
Jquery事件大全 事件介绍和支持的对象 事件 描述 支持元素或对象 blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, a ...
- 【jquery事件】
jquery事件 鼠标事件 on off one blur change click dblclick mouseover mouseout hover keydown keyup keypress ...
最新文章
- 通过代理进行页面传值
- 第十九篇：主题建模Topic Modelling
- oracle的parameters怎么用,oracle普通用户使用show parameter方法
- Ubuntu16.04换源
- linux系统故障实验,Linux常见系统故障排除
- 令人迷惑的硬币翻转（洛谷P1146题题解，Java语言描述）
- Vue打包发布项目---vue工作笔记0020
- linux查看日志相关命令
- 3. 几何图形(Geometry)
- 科技助力精准扶贫：高德地图的河南公益行
- android 断点下载的实现,Android实现断点下载的方法
- Javabase入门介绍
- 极米h3s和坚果j10、当贝f3三款投影实测对比来了！
- BT 面板控制命令 宝塔 Linux 常用命令收集整理
- Eclipse - subclipse svn
- 微信小程序实现瀑布流 仿小红书
- 微信摩拜怎么提示服务器错误,微信摩拜老是定位失败
- [逆向并查集+STLmap存图奇法] Connections in Galaxy War ZOJ - 3261
- 新探索：包含坐标信息的tif格式文件直接覆盖到地图上
- R语言可视化世界地图：包含边界边框和不包含边界边框两种方案