第5章 jQuery中的事件处理和动画效果

本章要求：第5章jQuery中的事件处理和动画效果jQuery的工厂函数页面加载响应事件事件绑定模拟用户操作事件冒泡事件捕获事件对象隐藏和显示匹配元素切换元素的可见状态淡入淡出动画效果滑动动画效果自定义动画效果主要内容1.jQuery中的事件处理2.jQuery中的动画效果3.综合实例：实现图片传送带第5章jQuery中的事件处理和动画效果5.1.1页面加载相应事件5.1.2jQuery中的事件5.1.3事件绑定5.1.4模拟用户操作5.1.5事件捕获与事件冒泡5.1jQuery中的事件处理$(document).ready()方法是事件模块中最重要的一个函数，它极大地提高了Web响应速度。$(document)是获取整个文档对象，从这个方法名称来理解，就是获取文档就绪的时候。方法的书写格式为：$(document).ready(function(){//在这里写代码});可以简写成：$().ready(function(){//在这里写代码});当$()不带参数时，默认的参数就是document，所以$()是$(document)的简写形式。还可以进一步简写成：$(function(){//在这里写代码});5.1.1页面加载响应事件在jQuery中，可以使用$(document).ready()方法代替传统的window.onload()方法，不过两者之间还是有些细微的区别的，主要表示在以下两方面。在一个页面上可以无限制地使用$(document).ready()方法，各个方法间并不冲突，会按照在代码中的顺序依次执行。而window.onload()方法在一个页面中只能使用一次。在一个文档完全下载到浏览器时（包括所有关联的文件，例如图片、横幅等）就会响应window.onload()方法。而$(document).ready()方法是在所有的DOM元素完全就绪以后就可以调用，不包括关联的文件。例如在页面上还有图片没有加载完毕但是DOM元素已经完全就绪，这样就会执行$(document).ready()方法，在相同条件下window.onload()方法是不会执行的，它会继续等待图片加载，直到图片及其他的关联文件都下载完毕时才执行。显然，把网页解析为DOM元素的速度要比把页面中的所有关联文件加载完毕的速度快得多。使用$(document).ready()方法时要注意一点，因为只要DOM元素就绪就可以执行该方法，所以可能出现元素的关联文件尚未下载完全的情况，例如与图片有关的DOM元素已经就绪，但是图片还没有加载完，若此时要获取图片的高度或宽度属性是未必会有效的。要解决这个问题，可以使用jQuery中的另一个关于页面加载的方法：load()方法。load()方法会在元素的onload事件中绑定一个处理函数，如果这个处理函数绑定到window对象上，则会在所有内容加载完毕后触发，如果绑定在元素上，则会在元素的内容加载完毕后触发。具体代码如下：$(window).load(function(){//在这里写代码});以上代码等价于：window.onload=function(){//在这里写代码}jQuery帮助我们统一了所有事件的名称。jQuery中的事件如表5-1所示。5.1.2jQuery中的事件方法说明blur()触发元素的blur事件blur(fn)在每一个匹配元素的blur事件中绑定一个处理函数，在元素失去焦点时触发，既可以是鼠标行为也可以是使用Tab键离开的行为change()触发元素的change事件change(fn)在每一个匹配元素的change事件中绑定一个处理函数，在元素的值改变并失去焦点时触发click()触发元素的chick事件click(fn)在每一个匹配元素的click事件中绑定一个处理函数，在元素上单击时触发dblclick()触发元素的dblclick事件dblclick(fn)在每一个匹配元素的dblclick事件中绑定一个处理函数，在某个元素上双击触发error()触发元素的error事件error(fn)在每一个匹配元素的error事件中绑定一个处理函数，当JavaSprict发生错误时，会触发error()事件focus()触发元素的focus事件focus(fn)在每一个匹配元素的focus事件中绑定一个处理函数，当匹配的元素获得焦点时触，通过鼠标点击或者Tab键触发keydown()触发元素的keydown事件方法说明keydown(fn)在每一个匹配元素的keydown事件中绑定一个处理函数，当键盘按下时触发keyup()触发元素的keyup事件keyup(fn)在每一个匹配元素的keyup事件中绑定一个处理函数，会在按键释放时触发keypress()触发元素的keypress事件keypress(fn)在每一个匹配元素的keypress事件中绑定一个处理函数，敲击按键时触发（即按下并抬起同一个按键）load(fn)在每一个匹配元素的load事件中绑定一个处理函数，匹配的元素内容完全加载完毕后触发mousedown(fn)在每一个匹配元素的mousedown事件中绑定一个处理函数，鼠标在元素上点击后触发mousemove(fn)在每一个匹配元素的mousemove事件中绑定一个处理函数，鼠标在元素上移动时触发mouseout(fn)在每一个匹配元素的mouseout事件中绑定一个处理函数，鼠标从元素上离开时触发mouseover(fn)在每一个匹配元素的mouseover事件中绑定一个处理函数，鼠标移入对象时触发mouseup(fn)在每一个匹配元素的mouseup事件中绑定一个处理函数，鼠标点击对象释放时resize(fn)在每一个匹配元素的resize事件中绑定一个处理函数，当文档窗口改变大小时触发方法说明scroll(fn)在每一个匹配元素的scroll事件中绑定一个处理函数，当滚动条发生变化时触发select()触发元素的select()事件select(fn)在每一个匹配元素的select事件中绑定一个处理函数，当用户在文本框（包括input和textarea）选中某段文本时触发submit()触发元素的submit事件submit(fn)在每一个匹配元素的submit事件中绑定一个处理函数，表单提交时触发unload(fn)在每一个匹配元素的unload事件中绑定一个处理函数，在元素卸载时触发该事件说明：方法中的fn参数，表示一个函数，事件处理程序就写在这个函数中。1．为元素绑定事件在jQuery中，为元素绑定事件可以使用bind()方法，该方法的语法结构如下：bind(type,[data],fn)type：事件类型，表5-1（jQuery中的事件）中所列举的事件。data：可选参数，作为event.data属性值传递给事件对象的额外数据对象。大多数的情况下不使用该参数。fn：绑定的事件处理程序。例如，为普通按钮绑定一个单击事件，用于在单击该按钮时，弹出提示对话框，可以使用下面的代码：$(input:button).bind(click,function(){alert('您单击了按钮');});5.1.3事件绑定【例5-1】为h3元素绑定click事件。（1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。scripttype=text/javascriptsrc=../js/jquery-1.11.1.min.js/script（2）在页面的head标记内，添加样式代码，代码如下：style#content{text-indent:2em;display:none;}/style（3）在页面的body标记中，添加一个id为first的div标记，里面包含一个class为title的h2元素和一个id为content的div元素，具体代码如下：divid=firsth3class=title什么是编程词典？/h3divid=content明日编程词典系列软件是由近百位软件开发专业人士联手打造；...中间省略部分文字编程词典个人版，珍藏版现已震撼热卖！/div/div（3）在引入jQuery库的代码下方编写jQuery代码，实现为id为“first”的div标记下的h3元素绑定click事件，使其被点击的时候显示下方隐藏div元素的内容，具体代码如下：scripttype=text/javascript$(document).ready(function(){$(#firsth3.title).bind(click,function(){$(this).next().show();})});/script运行本实例，在如图5-1所示页面上点击文字“什么是编程词典？”之后可以看到如图5-2所示页面。图5-1为h3元素绑定click事件图5-2触发click事件显示隐藏div内容2．移除绑定在jQuery中，为元素移除绑定事件可以使用unbind()方法，该方法的语法结构如下：unbind([type],[data])type：可选参数，用于指定事件类型。data：可选参数，用于指定要从每个匹配元素的事件中反绑定的事件处理函数。说明：在unbind()方法中，两个参数都是可选的，如果不填参数，将会删除匹配元素上所有绑定的事件。例如，要移除为普通按钮绑定的单击事件，可以使用下面的代码：$(input:button).unbind(click);【例5-2】为h3元素移除绑定的mouseover事件。（1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。scripttype=text/javascriptsrc=../js/jquery-1.11.1.min.js/script（2）在页面的head标记内，添加样式代码，代码如下：style#content{text-indent:2em;display:none;}/style（3）在页面的body标记中，添加一个id为first的div标记，里面包含一个class为title的h2元素和一个id为content的div元素，具体代码如下：divid=firsth3class=title什么是编程词典？/h3divid=content明日编程词典系列软件是由近百位软件开发专业人士联手打造；...中间省略部分文字编程词典个人版，珍藏版现已震撼热卖！/div/div（4）在引入jQuery库的代码下方编写jQuery代码，实现为id为“first”的div标记下的h3元素绑定click事件和mouseover事件，使其被点击的时候显示下方隐藏div元素的内容，鼠标移入时显示“我绑定了mouseover事件”具体代码如下：scripttype=text/javascript$(document).ready(function(){$(#firsth3.title).bind(click,function(){$(this).next().show();}).bind(mouseover,function(){$(this).append(p我绑定了mouseover事件/p);})});/script运行本实例，在页面上将鼠标移入到文字“什么是编程词典”上，之后点击文字“什么是编程词典？”最终效果如图5-3所示。图5-3为h3元素绑定click和mouseover事件h3元素既绑定了click事件又绑定了mouseover事件。这时，在绑定事件下面加上一个移除绑定事件，来移除mouseover绑定，代码如下：$(#firsth3.title).unbind(mouseover);再次运行本实例，运行结果如图5