jQuery动画事件基础知识
深入理解JQuery中的事件与动画
下面小编就为大家带来一篇深入理解JQuery中的事件与动画。
小编觉得挺不错的，现在就分享给大家，也给大家做个参考，一起跟随小编过来看看吧首先，使用JQuery事件与动画的效果比使用原生js来的方便得多，当然，最重要的是考虑到了浏览器的兼容性。
事件：基于原生js，常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等，不再赘述。
事件绑定:在文档加载完成后，使用bind(type,[data],func())方法绑定事件.合成事件:hover(enter-func,leave-func)相当于bind("mouseover")和bind("mouseleave").toggle()模拟鼠标连点情况下的显示与隐藏事件toggle(show-func,hide-func).事件冒泡：在学习js高程（三）时，曾提及到大部分浏览器的事件处理机制是事件冒泡，也就是事件是逐级向上发生的。
如果给你个内嵌元素绑定了事件，给他的父元素也绑定了一个相同type的事件，那么当事件处理内嵌元素时，父元素的事件也会随之触发，JQuery用一个方法可以阻止事件冒泡，使用event(事件对象).stopPropagation().既让可以阻止事件冒泡，那么也可以阻止事件的默认行为，比如锚点元素a，当我们为a绑定一个click事件时，他不仅会实现我们绑定的事件函数，也会跳转到指定的href,那么要阻止这一跳转行为，需要用到event.preventDefault()来实现。
这个方法也经常用在表单验证的过程中，当验证的字段不通过是，使用event.preventDefault()来阻止表单的submit。
当然，对于阻止事件冒泡和阻止默认行为，我们也可以使用return false，当我们要知道，return false同时阻止了冒泡与默认行为，所以要慎用。
项目10 jQuery的事件与动画
1.事件：
事件类型
页面加载响应事件 鼠标事件
表单事件 键盘事件 浏览器事件
表10-1 jQuery常用事件方法
事件名称
ready(fn)
click(fn) dbclick(fn) mouseover(fn) mouseout(fn) mousedown(fn) mouseup(fn) mousemove(fn)
任务10.2 jQuery动画
1
隐藏与显示动画
2
滑动动画
3
淡入淡出动画
10.2.1 隐藏与显示动画
1.hide()方法 格式如下： $("选择器").hide([speed,easing,callback]);
2.show()方法 格式如下： $("选择器").show([speed,easing,callback]); show()方法的参数与hide()方法的参数的设置方式一样。
10.1.2 事件的绑定
4.one()方法：
使用one()方法为指定选择器元素添加一个 “只触发一次”的事件，格式如下：
$("选择器").one("事件名", [数据对 象],function(){
事件处理代码; }); $("#btn" ) .one ("click",function () {
用于把元素的透明度指定为某个值（值介于0与1之间）， 并不会隐藏元素，格式如下：
$("选择器").fadeTo(speed,opacity,[callback]);
总结
通过选择器查找元素后，解绑存在的多个事件名，格式如下： $("选择器").off("事件名1 事件名2…"); $(".current").off("mouseover mouseout"); //将类名为current元素的鼠标进入和退出事件解绑
动态网页设计与开发 第9章 jQuery事件与动画特效
mouseleave()
触发或将函数绑定到指定元素的mouseleave事件
执行时机 鼠标点击时 鼠标左键双击元素时 鼠标悬停在元素上时 鼠标指针移过时 鼠标指针移出时 鼠标指针进入时 鼠标指针离开时
15
鼠标事件方法的区别
方法 mouseover( ) mouseenter( ) mouseout( ) mouseleave( )
10
load()事件
当页面中指定的元素被加载完毕时会触发load()事件。该事件通常用于监听具有可加载内容 的元素，例如图像元素<img>、内联框架<iframe>等。其语法格式如下：
语法
$(selector).load(function)
其中参数function为必填内容，表示元素加载完毕时需要执行的函数。例如：
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
方法 click() dblclick() hover() mouseover() mouseout() mouseenter()
描述 触发或将函数绑定到指定元素的click事件 触发或将函数绑定到指定元素的dblclick事件 触发或将函数绑定到指定元素的hover事件 触发或将函数绑定到指定元素的mouseover事件 触发或将函数绑定到指定元素的mouseout事件 触发或将函数绑定到指定元素的mouseenter事件
8
ready()事件
ready()事件又称为准备就绪事件，该事件只在文档准备就绪时触发，因此其选择器只能是 $(document)。
一般来说，为了避免文档在准备就绪前就执行了其他jQuery代码而导致错误，所有的 jQuery函数都需要写在文档准备就绪（document ready）函数中。其语法格式如下：
基础jquery知识点
基础jquery知识点基础jQuery知识点jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。
在网页开发中，jQuery非常常用，是前端开发的基础知识之一。
下面将介绍一些基础的jQuery 知识点。
一、选择器（Selectors）选择器是使用jQuery的关键，它允许我们通过各种方式选择HTML元素，并对其进行操作。
常见的选择器包括元素选择器、类选择器、ID选择器等。
1. 元素选择器元素选择器使用元素的标签名作为选择器，可以选择所有匹配的元素。
例如，使用$("p")可以选择页面中的所有段落元素。
2. 类选择器类选择器使用元素的class属性作为选择器，可以选择具有相同类名的所有元素。
例如，使用$(".class")可以选择页面中所有具有class为class的元素。
3. ID选择器ID选择器使用元素的id属性作为选择器，可以选择具有相同id的元素。
例如，使用$("#id")可以选择具有id为id的元素。
二、事件处理（Event Handling）事件处理是jQuery的另一个重要功能，它允许我们对HTML元素进行事件绑定，并在事件发生时执行相应的操作。
1. click事件click事件在元素被点击时触发，我们可以使用click()函数来绑定click事件，并定义事件处理函数。
例如，使用$("button").click(function(){})可以在点击按钮时执行相应的操作。
2. hover事件hover事件在鼠标悬停在元素上时触发，我们可以使用hover()函数来绑定hover事件，并定义事件处理函数。
例如，使用$("div").hover(function(){}, function(){})可以在鼠标悬停在div元素上时执行第一个函数，鼠标移出时执行第二个函数。
《jq》(完美精品课件
《jq》(完美精品课件一、教学内容本节课我们将深入学习《jq》教材的第3章“事件处理”和第4章“动画效果”。
具体内容包括：事件处理的基本概念、常用事件类型及其使用方法；动画效果的分类、实现原理以及常用动画函数的运用。
二、教学目标1. 理解并掌握事件处理的基本概念和常用事件类型。
2. 学会使用动画效果，能够实现页面元素的动态展示。
3. 培养学生的动手实践能力和问题解决能力。
三、教学难点与重点教学难点：事件处理机制的理解，动画效果的实现原理。
教学重点：常用事件类型的运用，动画函数的使用。
四、教具与学具准备1. 教具：计算机、投影仪、黑板。
2. 学具：教材、笔记本电脑、网络。
五、教学过程1. 导入：通过展示一个实践情景（如：一个动态变化的菜单），引发学生对事件处理和动画效果的兴趣。
2. 知识讲解：1) 事件处理：介绍事件处理的基本概念，讲解常用事件类型（如：click、mouseover、mouseout等）及其使用方法。
2) 动画效果：介绍动画效果的分类（如：淡入淡出、滑动、缩放等），讲解动画效果的实现原理以及常用动画函数（如：slideDown、slideUp、fadeIn、fadeOut等）的运用。
3. 例题讲解：结合实践情景，演示如何使用事件处理和动画效果制作一个动态菜单。
4. 随堂练习：让学生分组练习，每组制作一个具有不同动画效果的页面元素。
六、板书设计1. 事件处理：基本概念常用事件类型2. 动画效果：分类实现原理常用动画函数七、作业设计1. 作业题目：制作一个具有动画效果的轮播图。
2. 答案：1) HTML结构：<div class="carousel"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>2) CSS样式：.carousel {width: 300px;height: 200px;overflow: hidden;}.carousel ul {position: relative;}.carousel li {position: absolute;left: 300px;width: 300px;height: 200px;backgroundcolor: f0f0f0; textalign: center;lineheight: 200px;}3) JavaScript代码：$(document).ready(function() { var index = 0;var timer;function playCarousel() {clearTimeout(timer);$('.carousel ulli').eq(index).stop().animate({'left': 0},500).siblings().stop().animate({'left': 300}, 500);index++;if (index >= 4) {index = 0;}timer = setTimeout(playCarousel, 2000);}playCarousel();$('.carousel').mouseover(function() {clearTimeout(timer);});$('.carousel').mouseout(function() {playCarousel();});});八、课后反思及拓展延伸1. 反思：本节课学生对事件处理和动画效果的理解程度，以及实践操作中遇到的问题。
jQuery开发基础教程第5章 jQuery中的事件处理和动画效果
5.1.2
jQuery中的事件
jQuery帮助我们统一了所有事件的名称。jQuery中的事件如表5-1所示。
方法 blur() blur(fn) change() 触发元素的blur事件 在每一个匹配元素的blur事件中绑定一个处理函数，在元素失去焦点时触发，既可以是鼠 标行为也可以是使用Tab键离开的行为 触发元素的change事件 说明
mousedown(fn)
mousemove(fn) mouseout(fn) mouseover(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数，鼠标在元素上点击后 触发
在每一个匹配元素的mousemove事件中绑定一个处理函数，鼠标在元素上移动时 触发 在每一个匹配元素的mouseout事件中绑定一个处理函数，鼠标从元素上离开时 触发 在每一个匹配元素的mouseover事件中绑定一个处理函数，鼠标移入对象时触发
mouseup(fn)
resize(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数，鼠标点击对象释放时
$(document).ready()方法是事件模块中最重要的一个函数，它极大地提高了Web响应速度。 $(document)是获取整个文档对象，从这个方法名称来理解，就是获取文档就绪的时候。方法的书写 格式为：
$(document).ready(function() { //在这里写代码 });
可以简写成：
error(fn)
focus() focus(fn) keydown()
1_jquery动画
PS：三种预设速度slow,normal,fast（600，400， 200）
自定义动画
animate (params,[speed],[easing],[fn]) //停止所有在指定元素上正在运行的动画。 stop([clearQueue],[ jumpToEnd])
jQuery-动画
本节主要内容
基本动画效果 自定义动画
基本动画
1）显示隐藏 show/hide 原理：
• hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0 • show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见 • toggle()切换显示状态
判断元素是否处于动画状态 :animated
//设置一个延时来推迟执行队列中之后的项目。 delay(durat动画： 当animate中存在多个属性时，动画同时发生 当同一个元素链式调用animate时，动画是按顺序发生
多组元素上的动画： 默认情况下，动画同时发生 回调函数内的动画等到当前动画执行完后才接着执行
2)滑动（通过改变高度） slideDown/slideUp/slideToggle(speed,callback) 3)淡入淡出（通过改变不透明度） fadeIn/fadeOut/fadeToggle(speed,callback) fadeTo([[speed],opacity,[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，
Jquery动画，排队与并发
Jquery动画，排队与并发⼀、事件绑定1.⿏标事件：模拟触发什么是模拟触发？虽然没有点在按钮上，也可以触发按钮的事件处理函数。
如何：$元素.trigger("事件名")即使没有点在指定的元素上，也能触发该元素上绑定的事件处理函数。
简写：如果要触发的事件，刚好是21种简写中的⼀种，可使⽤事件处理函数⼀个函数两⽤的⽅法触发：$元素.事件名()强调：()中不要加处理函数⼆、动画简单动画：写死的固定不变的三种动画效果：1.显⽰隐藏：.show()、.hide()、.toggle()问题：.show() 、.hide()不加参数时，默认使⽤display:block和display:none控制瞬间显⽰隐藏。
如果想有动画效果，必须加持续事件参数。
2.上滑下滑: .slideUp()、.slideDown()、.slideToggle()3.淡⼊淡出：.fadeIn()、.fadeOut()、.fadeToggle()简单动画所有函数的共性问题：1.效果是写死的！⼏乎不可维护!2.⽤js定时器和DOM操作模拟的动画效果-----效率极低但是，.show()、.hide()、.toggle()在不加参数时，代替的是.css("display","block/none"),这个是没有效率和可维护性损失的。
所以，这三个不加参数的情况，还是⾮常推荐使⽤的。
2.万能动画：什么是：可对任意css属性应⽤动画效果何时：只要希望对任意css属性应⽤动画效果时如何：1.$元素.animate({ css属性:⽬标值 } [动画持续时间,callback])2.让当前元素从现在的状态，经过指定的时间后，缓慢过渡到⽬标状态。
3.强调：animate()中只需要些⽬标值，animate()可⾃动获得当前的对应属性值，⾃动计算变化的距离。
问题：1.也是⽤js定时器和DOM操作模拟的动画效果2.其实只⽀持单个数值的css属性，不⽀持CSS3动画，不⽀持颜⾊过渡。
第8章 jQuery动画
1、fadeIn()和fadeOut()
• 在jQuery中，我们可以使用fadeIn()方法来实现元素的淡入效果，可以 使用fadeOut()方法来实现元素的淡出效果。一般情况下，fadeIn()和 fadeOut()这两个方法都是配合一起使用的。
$().fadeToggle(speed, fn)
3、fadeTo()
• 在淡入效果中，透明度（opacity属性）是从0变化到1。在淡出效果中， 透明度是从1变化到0的。在jQuery中，如果想要将元素透明度指定到 0~1之间的某个值，可以使用fadeTo()方法。
• 语法：
$().fadeTo(speed, opacity, fn)
• 语法：
$().slideToggle(speed, fn)
8.5 自定义动画
• 为了满足实际开发中各种动画设计的需求，jQuery为我们提供了一种 “自定义动画”的解决方案。
• 对于自定义动画，我们分为以下3个方面来介绍。 ➢ 简单动画 ➢ 累积动画 ➢ 回调函数
1、简单动画
• 在jQuery中，对于自定义动画，我们都是使用animate()方法来实现的。 • 语法：
3、回调函数
• 使用回调函数，可以使得在动画执行完成之后，再执行某些操作。
8.6 队列动画
• 在jQuery中，队列动画，指的是元素按照一定的顺序来执行多个动画效 果。
• 语法： $().animate().animate().…….animate()
• 在jQuery中，队列动画可以是任何动画形式，包括：显示与隐藏、淡入 与淡出、滑上与滑下、自定义动画等。
一篇文章带你了解jQuery动画
⼀篇⽂章带你了解jQuery动画⽬录1.控制元素的显⽰与隐藏 show() hide()2.控制元素的透明度 fadeIn() fadeOut()3：控制元素的⾼度 slideUp() slideDown()总结jQuery提供了⼀些默认的动画控制元素的显⽰与隐藏 show() hide()控制元素的透明度 fadeIn() fadeOut()控制元素的⾼度 slideUp() slideDown()⾃定义动画 animate()1.控制元素的显⽰与隐藏 show() hide()语法：$("selector").show([speed],[callback]);参考描述：参数⼀：速度，可选例如：1000毫秒等等与1秒 fast slow normal参数⼆：回调函数，可选 show或hide函数执⾏完之后，要实⾏的函数$(function () {$(".nav-ul li").on({"mouseover":function () {$(this).css("background","pink")},"mouseout":function () {$(this).css("background","#ff2832")}});$(".menu-btn").hover(function () {$(this).next().show("fast")},function () {$(this).next().hide("slow")})})2.控制元素的透明度 fadeIn() fadeOut()语法：$("selector").fadeIn([speed],[callback]);$("selector").fadeOut([speed],[callback]);参考描述：参数⼀：速度，可选默认是0 例如：1000毫秒等等与1秒 fast slow normal参数⼆：回调函数，可选 fadeIn或fadeOut执⾏完以后函数执⾏完之后，要实⾏的函数$(function () {$("input[name='fadein_btn']").click(function () {$("img:eq(0)").fadeIn(500,function () {alert("淡⼊成功")})})$("input[name='fadeout_btn']").click(function () {$("img:eq(0)").fadeOut(1000,function () {alert("淡出成功")})})})3：控制元素的⾼度 slideUp() slideDown()slideDown()使元素逐渐延伸显⽰slideUp()使元素逐渐缩短直⾄隐藏语法：$("selector").slideUp([speed],[callback]);$("selector").slideDown([speed],[callback]);参考描述：参数⼀：速度，可选默认是0 例如：1000毫秒等等与1秒 fast slow normal参数⼆：回调函数，可选 slideUp或slideDown执⾏完以后函数执⾏完之后，要实⾏的函数总结本篇⽂章就到这⾥了，希望能够给你带来帮助，也希望您能够多多关注的更多内容！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 jQuery处理事件1.1 绑定事件处理函数$obj.bind(事件类型,事件处理函数)比如：$obj.bind("chlik",fn)1.1.1script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){$("#a1").bind("click",function(){$("#d1").html("hello java");});});</script>1.1.2body代码<div id="d1">hello jQuery</div><a href="javascript:;" id="a1">绑定事件处理函数</a>1.2获取事件对象1.2.1script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){$("a").click(function(e){//通过对象找到事件源varobj=e.target;//返回值是一个DOM对象alert(obj.innerHTML);//获得鼠标点击的坐标alert(e.pageX+","+e.pageY);});});</script>1.2.2body代码<a href="javascript:;">第一个链接</a><br/><a href="javascript:;">第二个链接</a>2、事件冒泡字节点产生的事件会依次向上抛给父节点2.1 script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){$("div").click(function(e){alert("你点击了一个div");});$("a").click(function(e){alert("你点击了一个链接");//取消事件冒泡,不会执行父节点的操作即不显示"你点击了一个div"提示窗口e.stopPropagation();});});</script>2.2 body代码<div style="width:200px;height:200px;border:1px solid red"><a href="javascript:;">hello jQuery</a></div>3合成事件hover(mouseenter,mouseleave)模拟光标悬定事件3.1Style代码<style type="text/css">.s1{ width:100px; height:100px; border:1px solid red;}.s2{border:10px solid red;}</style>3.2script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){// $(".s1").mouseenter(function(){// $(this).addClass("s2");// });// $(".s1").mouseleave(function(){// $(this).removeClass("s2");// });/* 下面事件等价*/$(".s1").hover(function(){$(this).addClass("s2");},function(){$(this).removeClass("s2");});});</script>3.3<body>代码<div class="s1"></div>4 toggle()模拟连续单击事件4.1script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){//点击<a>里的链接，显示div里的内容并修改为"第二部分内容"$('a').click(function(){$("div").toggle(function(){$(this).html("第二部分内容");});});//点击<a>里的链接，显示div里的内容// $("a").click(function(){// $("div").toggle();// });});</script>4.2 <body>代码<a href="javascript:;">连续单击1</a><div style="display:none">隐藏的div</div>5模拟操作a,正确写法 $obj.trigger(事件类型)如$obj.trigger("focus");b,简写形式 $obj.focus();5.1script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){$("#b1").click(function(){// $("#username").trigger("focus");$("#username").focus();});});</script>5.2<body>代码username:<input name="username" id="username"/><br/>name:<input name="name"/><input type="button" value="模拟操作" id="b1"/>6显示和隐藏show()/hide()a,作用：通过同时改变元素的宽度和高度来实现显示和隐藏。
b,用法：$obj.show(执行时间，回调函数)；执行时间："slow","normal","fast"或者用毫秒数回调函数：当动画执行完毕之后执行的函数slideDown()/slideUp()a,作用：通过改变高度来实现显示或者应酬的效果 b,用法：同$obj.show();6.1script代码<script type="text/javascript" src="/js/jquery-1.11.1.js" ></script><script type="text/javascript">$(function(){$("#btn1").click(function(){// $("div").show(3000);$("div").slideDown(3000);//以自上而下显示});$("#btn2").click(function(){// $("div").hide("normal",function(){// alert("消失了");$("div").slideUp(3000);//以自上而下消失});});</script><input type="button" value="显示DIV" id="btn1"/><input type="button" value="隐藏DIV" id="btn2"/><div>显示或者隐藏的内容。