1、1 1目录11.1 jQuery概述及安装11.2 jQuery选择器11.3 访问DOM元素11.4 jQuery元素筛选11.5 jQuery事件处理11.6 jQuery动画与特效11.7 jQuery特效案例11.1 jQuery概述及安装11.1.1 jQuery概述11.1.2 jQuery的下载和安装11.1.3 核心函数jQuery11.1.4 第一个jQuery程序11.1.5 页面加载事件document.ready11.1.6 DOM对象和jQuery对象11.1.1 jQuery概述jQuery是一个快速、简洁的、优秀的javaScript库，使用户能更方便地处理HTM
2、L 实现动画效果，并且方便地为网站提供AJAX交互。jQuery特点（1）轻量级（2）链式语法（3）CSS选择器（4）多浏览器兼容性（5）简单易用（6）易扩展11.1.1 jQuery概述ujQuery提供的功能 修改页面的表现（Presentation）访问和草走DOM元素 页面事件处理 为页面添加动画 与服务器异步交互 大量丰富的扩展插件11.1.2 jQuery的下载和安装u下载jQueryu官方网站：http:/u不需要任何安装过程，将源码文件直接导入到你的网页文件中，u在页面头部head中，添加js,如下代码：11.1.3 核心函数jQuery()ujQuery(selector,c
3、ontext)selector:用来查找的字符串 context:作为待查找的 DOM 元素集、文档或 jQuery 对象。这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。jQuery()等价于$()$,用于声明jQuery对象，是jQuery中选取元素的符号11.1.4 第一个jQuery程序$(document).ready(function()$(#btn1).click(function()$(.box1).toggle(slow);););这是一个DIV块！11.1.5页面加载事件document.ready$(document).ready事件和事件和
4、window.onload事件比较事件比较1）解析HTML结构2）加载外部脚本和CSS样式文件3）解析并执行脚本代码4）构造HTML DOM模型树-JQuery执行ready 快快5）加载图片,flash等外部文件6）页面加载完毕。-window.load执行 慢慢p 执行时间不同p 执行数量不同,$(document).read可以重复写多个并且每个都能执行，而window.load尽管也可以写多个但，后面的会覆盖前面的执行，最终只执行最后的一个。p$(document).read(function()可以简写成$(function()11.1.6 DOM对象和jQuery对象u1.DOM对
5、象 DOM是文档对象模型，当一个文档在浏览器中加载完毕，浏览器会根据整个文档的结构，将文档中的每一个元素包括文本形成一个HTML DOM模型树，这棵模型树上的节点都是一个对象，即DOM对象。u2.jQuery对象 在jQuery库中，通过jQuery提供的方法来访问文档页面元素的对象称之为jQuery对象。11.1.6 DOM对象和jQuery对象u3、jQuery对象和DOM对象的转换u（1）jQuery 对象转成 DOM 对象 jQuery 对象不能使用 DOM 中的方法,但如果 jQuery 没有封装想要的方法,不得不使用 DOM 对象的时候,有如下两种处理方法:1）jQuery 对象是
6、一个数组对象,可以通过 index 的方法得到对应的 DOM对象.2）使用 jQuery 中的 get(index)方法得到相应的 DOM 对象$(“#divOut1”).html($(“#divTmp1”).html();可以写成：$(#divOut1).html($(#divTmp1)0.innerHTML);11.1.6 DOM对象和jQuery对象u3、jQuery对象和DOM对象的转换u（2）DOM 对象转成 jQuery 对象 对于一个 DOM 对象,只需要用$()把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象),就可以获得一个
7、jQuery 对象.转换后就可以使用 jQuery 中的方法了oDiv.innerHTML=tDiv.innerHTML;可以写成：$(oDiv).html($(tDiv).html();jQuery和DOM对象转换示例11.2 jQuery选择器11.2.1 选择器介绍及分类11.2.2 基本选择器11.2.3 层次选择器11.2.4 过滤选择器11.2.5 表单选择器11.2.1 选择器介绍及分类u选择器是 jQuery 的根基，允许通过标签名、属性名或内容对DOM 元素进行快速、准确的查找选择。u1.jQuery 选择器的优点简洁的写法完善的事件处理机制11.2.1 选择器介绍及分类u2
8、.jQuery选择器分类11.2.2 基本选择器u.基本选择器 Basics基本选择器基本选择器是jQuery 中使用最频繁的选择器，它由元元素素IdId、ClassClass、元素名元素名、多个选择符多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，其详细说明如表所示。名称名称参数参数说明说明返回值返回值举例举例ID选择器#id根据元素ID选择单个$(#divId)：选择ID为divId的元素标签选择器element根据元素的名称选择,同类型集合$(a)：选择所有元素类别选择器.class根据元素的css类选择集合$(“.bgRed”)：选择所用CSS类为bgRed的元素全匹配选择
9、器*选择所有元素所有元素集合$(*)：选择页面所有元素群组选择器selector1,selector2,selectorN可以将几个选择器用,分隔拼成一个选择器字符串，会同时选中这几个选择器匹配的内容集合$(#divId,a,.bgRed)：选择id为divId，所有的a标签，class为bgRed三类元素。11.2.2 基本选择器$(function()/ID匹配元素$(#divOne).css(display,block);)$(function()/元素名匹配元素$(div span).css(display,block);)$(function()/类匹配元素$(.clsFrame.c
10、lsOne).css(display,block);)$(function()/匹配所有元素$(*).css(display,block);)$(function()/合并匹配元素$(#divOne,span).css(display,block);)u基本选择器实例11.2.3 层次选择器u层次选择器通过DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表所示。说明ancestor descendant 与parent child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，
11、prev+next 可以使用.next()代替，而prev siblings 可以使用nextAll()代替。名称名称参数参数说明说明返回值返回值举例举例后 代 选择器ancestor descendant在给定的祖先元素下匹配所有的后代元素集合$(.bgRed div)选择CSS类为bgRed的元素中的所有元素.子 选 择器parentchild选择parent的直接子节点child.child必须包含在parent中并且父类是parent元素.集合$(.myListli)选择CSS类为myList元素中的直接子节点对象.相 邻 选择器prev+nextprev和next是两个同级元素.选中
12、在prev元素后面的next元素.集合$(#div1+img)选择id为div1元素后面的img对象.兄 弟 选择器prevsiblings选择prev后面的根据siblings过滤的元素集合$(#someDivspan)选择id为someDiv的对象后面的span元素11.2.3 层次选择器u实例：$(function()/匹配后代元素$(#divMid).css(display,block);$(div span).css(display,block);)$(function()/匹配子元素$(#divMid).css(display,block);$(divspan).css(displ
13、ay,block);)$(function()/匹配后面元素$(#divMid+div).css(display,block);$(#divMid).next().css(display,block);)$(function()/匹配所有后面元素$(#divMid div).css(display,block);$(#divMid).nextAll().css(display,block);)$(function()/匹配所有相邻元素$(#divMid).siblings(div).css(display,block);)11.2.4 过滤选择器u过滤选择器根据某类过滤规则进行元素的匹配，书写
14、时都以冒号（:）开头，其详细说明如表所示名称说明举例:first匹配找到的第一个元素查找表格的第一行:$(tr:first):last匹配找到的最后一个元素查找表格的最后一行:$(tr:last):not(selector)去除所有与给定选择器匹配的元素查 找 所 有 未 选 中 的 i n p u t 元 素:$(input:not(:checked):even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5.行:$(tr:even):odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行:$(tr:odd):eq(index)匹配一个给定索引值的元素注:i
15、ndex从 0 开始计数查找第二行:$(tr:eq(1):gt(index)匹配所有大于给定索引值的元素;注:index从 0 开始计数查找索引值比0大的行:$(tr:gt(0):lt(index)选择结果集中索引小于 N 的 elements；注:index从 0 开始计数查找索引值比2小的行:$(tr:lt(2):header选择所有h1,h2,h3一类的header标签.给 页 面 内 所 有 标 题 加 上 背 景 色:$(:header).css(background,#EEE);:animated匹配所有正在执行动画效果的元素只有对不在执行动画效果的元素执行一个动画特效:$(div
16、:not(:animated).animate(left:+=20,1000);11.2.4 过滤选择器u实例$(function()$(:header).css(color,#F00);$(tr:first).css(font-weight:bold,color:#00F,text-align:center);$(tr:not(:first).css(font-family,楷体);$(tr:last).css(color,#0F0);$(tr:even).css(background-color,#999900);$(tr:odd).css(background-color,#3399FF
17、););简单过滤选择器姓名年龄城市 张小蝶21北京 李思19上海 王蓝25广州 马霖18深圳 王思远22武汉u过滤选择器属性过滤选择器 Attribute Filtersu 属性过滤选择器根据元素的某个属性获取元素，如ID 号或匹配属性值的内容，并以“”号开始、以“”号结束。其详细的说明如表所示。jQuery 选择器名称名称说明说明举例举例attribute匹配包含给定属性的元素查找所有含有 id 属性的 div 元素:$(divid)attribute=value匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:$(inputname=n
18、ewsletter).attr(checked,true);attribute!=value匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素:$(inputname!=newsletter).attr(checked,true);attribute=value匹配给定的属性是以某些值开始的元素$(inputname=news)attribute$=value匹配给定的属性是以某些值结尾的元素查找所有 name 以 letter 结尾的 input 元素:$(inputname$=letter)attribute*=value匹配给定
19、的属性是以包含某些值的元素查找所有 name 包含 man 的 input 元素:$(inputname*=man)attributeFilter1attributeFilter2attributeFilterN复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:$(inputidname$=man)u表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected 属性。其详细的说明如表所示11.2.5 表单选择器名称名称说明说明解释解释:input匹配所有 in
20、put,textarea,select 和 button 元素查找所有的input元素:$(:input):text匹配所有的文本框查找所有文本框:$(:text):password匹配所有密码框查找所有密码框:$(:password):radio匹配所有单选按钮查找所有单选按钮$(:radio):checkbox匹配所有复选框查找所有复选框:$(:checkbox):submit匹配所有提交按钮查找所有提交按钮:$(:submit):image匹配所有图像域匹配所有图像域:$(:image):reset匹配所有重置按钮查找所有重置按钮:$(:reset):button匹配所有按钮查找所有按钮
21、:$(:button):file匹配所有文件域查找所有文件域:$(:file)全选功能复选框全选实例$(function()/全选功能$(#all).click(function()$(:checkboxname=items).prop(checked,true););/全不选功能$(#no).click(function()$(:checkboxname=items).prop(checked,false););/反选功能$(#rev).click(function()$(:checkboxname=items).each(function()var f=$(this).prop(check
22、ed);$(this).prop(checked,!f);););全选功能/提交显示所选内容$(#ok).click(function()if($(:checkboxname=items:checked).length0)var str=你选中的是：n;$(:checkboxname=items:checked).each(function()str+=$(this).val()+n;);alert(str);elsealert(请至少选择一项！);););你爱好的运动是?足球 篮球 羽毛球 乒乓球设置复选框为选中状态u$(“:checkbox”).attr(“checked”,true);u
23、在jQuery1.6版本以后，点击一次有效，点击多次无效u在jquery1.6版本以后的checked属性attr(checked)为checked，未选中时为undefined；u解决方式：改成prop(checked)11.3 访问DOM元素11.3.1 DOM元素属性操作11.3.2 DOM元素CSS类操作11.3.3 DOM元素内容操作11.3.4 DOM元素操作11.3.1 DOM元素属性操作u1、获取元素属性 语法：attr(name)功能：取得第一个匹配元素的属性值。举例：$(“#im1”).attr(“src”);u2、设置元素属性u（1）设置单个属性 语法：attr(key,
24、value)举例：$(“#im1”).attr(“src”,”images/01.jpg”);u（2）设置多个属性 语法：attr(key0:value0,key1:value1)举例：$(#im1).attr(title:a image!,width:115px,src:”images/01.jpg”);u3.删除元素的属性 语法：removeAttr(name)举例：$(“#img1).removeAttr(“src”);11.3.2 DOM元素css类操作u1.直接设置元素样式值 语法：css(name,value)举例：$(“p”).css(“color”,”#f00”);u2.增加C
25、SS 类别 语法：addClass(class)举例：$(“#p1”).addClass(“myclass“);u3.类别切换 语法：toggleClass(class)举例：$(“#p1”).toggleClass(“togcls”);u4.删除类别 语法：removeClass(class)举例：$(p).removeClass(cls0);11.3.3 DOM元素内容操作u1、html()方法 设置或获取每一个匹配元素的html内容u2、text()方法 设置或获取每一个匹配元素的文本内容u3、val()方法 设置或获取匹配元素的value属性的值11.3.4 DOM元素操作u1.插入元
26、素节点u（1）内部插入 append(),appendTo(),prepend(),prependTo()u（2）外部插入 after(),insertAfter(),before(),insertbBefore()u2.包裹元素节点 wrap(),unwrap(),wrapAll()u3.替换元素节点 replaceWith(),replaceAll()u4.复制元素节点 clone()u5.删除元素节点 empty(),remove()u6.遍历元素 each()11.4 jQuery元素筛选11.4.1 元素过滤11.4.2 元素查找11.4.1 元素过滤名称名称功能说明功能说明举例举例
27、eq(index)获取第 N 个元素获取匹配的第二个元素:$(p).eq(1)filter(expr)筛选出与指定表达式匹配的元素集合。保留带有 select 类的元素:$(p).filter(.selected)filter(fn)筛选出与指定函数返回值匹配的元素集合这个函数内部将对每个对 象 计 算 一 次(正 如$.each).如果调用的函数返回 false 则这个元素被删除，否则就会保留。保留子元素中不含有 ol 的元素:$(div).filter(function(index)return$(ol,this).size()=0;);is(expr)用一个表达式来检查当前选择的元素集合
28、，如果其中至少有一个元素符合这个给定的表达式就返回 true。如果没有元素符合，或者表达式无效,都返回false由于 input 元素的父元素是一个表单元素，所以返回 true:$(inputtype=checkbox).parent().is(form)map(callback)将一组元素转换成其他数组（不论是否是元素数组）可以用这个函数来建立一个列表，不论是值、属性还是 CSS 样式，或 者其他特别形式。这都可以用$.map()来方便的建立把 form 中的每个 input 元素的值建立一个列表:$(p).append($(input).map(function()return$(this
29、).val();).get().join(,);not(expr)删除与指定表达式匹配的元素从 p 元素中删除带有 select 的 ID 的元素:$(p).not($(#selected)0)slice(start,end)选取一个匹配的子集选择第一个 p 元素:$(p).slice(0,1);11.4.2 元素查找名称名称说明说明举例举例add(expr)把与表达式匹配的元素添加到 jQuery 对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。动态生成一个元素并添加至匹配的元素中:$(p).add(Again)children(expr)取得一个包含匹配的元素集合中每一个元素
30、的所有子元素的元素集合。查找 DIV 中的每个子元素:$(div).children()closest(expr)取得与表达式匹配的最新的父元素$(li:first).closest(ul,body);contents()查找匹配元素内部所有的子节点（包括文本节点）。查 找 所 有 文 本 节 点 并 加 粗:$(p).contents().not(nodeType=1).wrap();find(expr)搜索所有与指定表达式匹配的元素。从所有的段落开始，进一步搜索下面的 span 元素。与$(p span)相同:$(p).find(span)next(expr)取得一个包含匹配的元素集合中每
31、一个元素紧邻的那一个同辈元素的元素集合。找到每个段落的后面紧邻的同辈元素:$(p).next()nextAll(expr)查找当前元素之后所有的同辈元素。给第一个 div 之后的所有元素加个类:$(div:first).nextAll().addClass(after);offsetParent()返回第一个有定位的父类(如relative 或absolute).11.4.2 元素查找名称名称说明说明举例举例parent(expr)取得一个包含着所有匹配元素的唯一父元素的元素集合。查 找 每 个 段 落 的 父 元 素:$(p).parent()parents(expr)取得一个包含着所有匹配
32、元素的祖先元素的元素集合（不包含根元素）。找到每个 span 元素的所有祖先元素:$(span).parents()prev(expr)取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。找到每个段落紧邻的前一个同辈元素:$(p).prev()prevAll(expr)查找当前元素之前所有的同辈元素给最后一个之前的所有 div 加上一个类:$(div:last).prevAll().addClass(before);siblings(expr)取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。找到每个 div 的所有同辈元素:$(div).siblings(
33、)11.5 jQuery事件处理11.5.1 页面载入事件11.5.2 绑定与移除绑定事件11.5.3 绑定一次性事件11.5.4 触发事件11.5.5 切换事件11.5.6 事件方法11.5.1 页面载入事件uready()方法 格式：ready(fn)功能：页面载入事件，当DOM载入就绪可以查询及操纵时，绑定一个要执行的函数。参数：fn，要在DOM就绪时执行的函数u写法一：$(document).ready(function();u写法二(推荐)：$(function();u写法三：jQuery(document).ready(function();u写法四：jQuery(function
34、();11.5.2绑定与移除绑定事件u1.事件绑定方法：bind()功能：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。格式：bind(type,data,fn)参数：type,事件类型data:(可选)作为event.data属性值传递给事件对象的额外数据对象fn:绑定到每个匹配元素的事件上面的处理函数 举例：$(p).bind(click,function()alert($(this).text(););11.5.2绑定与移除绑定事件u2.移除绑定事件unbind()功能：从每一个匹配的元素中删除绑定的事件。格式：bind(type,fn)参数：type：事件类型，一个
35、或多个事件,由空格分隔多个事件值。fn：移除的事件处理函数 举例：$(p).unbind(click)11.5.3 绑定一次性事件uone()方法 功能：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理器函数。格式：one(type,data,fn)参数：type,事件类型data:(可选)作为event.data属性值传递给事件对象的额外数据对象fn:每当事件触发时执行的函数。举例：$(p).one(click,function()alert($(this).text(););11.5.4 触发事件utrigger()方法 功能：在每一个匹配的元素上触发某类事件。格式：tr
36、igger(type,data)参数：type:一个事件对象或者要触发的事件类型data:(可选)传递给事件处理函数的附加参数 举例：$(form:first).trigger(submit)11.5.5 切换事件u1、hover()功能：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。格式：hover(over,out)参数：over：鼠标移到元素上要触发的函数out：鼠标移出元素要触发的函数 举例：$(.clsTitle).hover(function()$(.clsContent).show();,function()$(.clsContent).hide(););11.
37、5.5 切换事件u 2、toggle()功能：每次点击后依次调用函数。格式：toggle(fn1,fn2,fn3,fn4)参数：fn1：第一数次点击时要执行的函数。fn2：第二数次点击时要执行的函数。fn3,fn4,.：更多次点击时要执行的函数。举例：$(img).toggle(function()$(img).attr(src:images/img01.jpg,title:this.src);,function()$(img).attr(src:images/img02.jpg,title:this.src);,function()$(img).attr(src:images/img03.j
38、pg,title:this.src);)11.5.6 事件方法jQuery事件方法事件方法说明说明blur(fn)在每一个匹配元素的blur事件中绑定一个处理函数。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的change(fn)在每一个匹配元素的change事件中绑定一个处理函数。click(fn)在每一个匹配元素的click事件中绑定一个处理函数。点击事件会在指针设备的按钮在元素上单击时触发。dblclick(fn)在每一个匹配元素的dblclick事件中绑定一个处理函数。在某个元素上双击的时候就会触发dblclick事件error(fn)在每一个匹配元
39、素的error事件中绑定一个处理函数。当页面的JavaScript发生错误时，window对象会触发error事件focus(fn)在每一个匹配元素的focus事件中绑定一个处理函数。focus事件可以通过鼠标点击或者键盘上的TAB导航触发keydown(fn)在每一个匹配元素的keydown事件中绑定一个处理函数。keydown事件会在键盘按下时触发。keyup(fn)在每一个匹配元素的keyup事件中绑定一个处理函数。keyup 事件会在键盘按下时触发。keypress(fn)在每一个匹配元素的keypress事件中绑定一个处理函数。keypress事件会在敲击按键时触发。敲击按键的定义为
40、按下并抬起同一个按键。load(fn)在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。11.5.6 事件方法jQuery事件方法事件方法说明说明mousedown(fn)在每一个匹配元素的mousedown事件中绑定一个处理函数。mousedown事件在鼠标在元素上点击后会触发mouseup(fn)在每一个匹配元素的mouseup事件中绑定一个处理函数。mouseup事件会在鼠标点击对象释放时触发mousemove(fn)在每一个匹配元素的mousemove事件中
41、绑定一个处理函数。mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量事件对象，其.clientX 和.clientY 属性代表鼠标的坐标mouseover(fn)在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发mouseout(fn)在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发resize(fn)在每一个匹配元素的resize事件中绑定一个处理函数。当文档窗口改变大小时触发scroll(fn)在每一个匹配元素的scroll事件中绑定一个处理函数。当滚
42、动条发生变化时触发select(fn)触发每一个匹配元素的select事件这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。submit(fn)在每一个匹配元素的submit事件中绑定一个处理函数。submit事件将会在表单提交时触发unload(fn)在每一个匹配元素的unload事件中绑定一个处理函数。11.6 jQuery动画与特效11.6.1 显示与隐藏效果11.6.2 滑动效果11.6.3 淡入淡出效果11.6.4 自定义动画11.6.1 显示与隐藏效果名称名称参数参数功能功能说明说明举例举例
43、show()无显示隐藏匹配元素。无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西显示所有段落 HTML代码：HellojQuery代码：$(p).show()show(speed,callback)speed：速度的设定 s l o w ,normal,or fast)或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。1秒缓慢将隐藏段落显示$(p).show(1000);400毫秒将段落显示并在之后
44、执行回调函数$(p).show(400,function()$(this).text(Animation Done.););hide()隐藏显示的元素无动画版隐藏操作隐藏所有段落$(p).hide()11.6.1 显示与隐藏效果名称名称参数参数功能功能说明说明举例举例hide(speed,callback)speed：速度的设定slow,normal,or fast)或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
45、。1秒缓慢将隐藏段落显示$(p).hide(1000);400毫秒将段落显示并在之后执行回调函数$(p).hide(400,function()$(this).text(Animation Done.););toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。切换所有段落的可见状态。$(p).toggle()toggle(speed,callback)speed：速度的设定slow,normal,or fast)或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。以优雅的动画切换所有匹配的元素，并在
46、显示完成后可选地触发一个回调函数。1秒缓慢地切换段落的显示隐藏状态$(p).toggle(1000);400毫秒将段落切换并执行回调函数$(p).toggle(400,function()$(this).text(Animation Done.););11.6.2 滑动效果名称名称参数参数功能功能说明说明举例举例slideDown(speed,callback)s p e e d：速 度 的 设 定slow,normal,or fast)或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。通 过 高 度 变 化（向下增大）来动态地显示所有匹配的元
47、素，在显示完成后可选地触发一个回调函数。动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。1 秒 缓 慢 将 段 落 滑 下：$(p).slideDown(1000);400毫秒将段落滑下并在之后弹出对话框$(p).slideDown(400,function()$(this).text(Animation Done.););slideUp(speed,callback)s p e e d：速 度 的 设 定slow,normal,or fast)或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。通 过 高 度 变 化（向上减
48、小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。1 秒 缓 慢 将 段 落 滑 上：$(p).slideUp(1000);400毫秒将段落滑上并在之后弹出对话框$(p).slideUp(400,function()$(this).text(Animation Done.););slideToggle(speed,callback)s p e e d：速 度 的 设 定slow,normal,or fast)或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。通
49、过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。1 秒 缓 慢 将 段 落 滑 上 或 滑 下：$(p).slideToggle(1000);400毫秒将段落滑上或滑下并在之后弹出对话框$(p).slideToggle(400,function()$(this).text(Animation Done.););11.6.3 淡入淡出效果名称名称参数参数功能功能说明说明举例举例fadeIn(speed,callback)speed：速度的设定slow,normal,or fast)或表示动画时长的毫
50、秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。1秒缓慢将段落淡入：$(p).fadeIn(1000);400毫秒将段落淡入并在之后弹出对话框$(p).fadeIn(400,function()$(this).text(Animation Done.););fadeOut(speed,callback)speed：速度的设定slow,normal,or fast)或表示动画时长的毫秒数值(如：100
