下载文档原格式
下面小编就为大家带来一篇深入理解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同时阻止了冒泡与默认行为，所以要慎用。
基础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》教材的第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动画，排队与并发⼀、事件绑定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动画，不⽀持颜⾊过渡。
⼀篇⽂章带你了解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 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>显示或者隐藏的内容。
