《WEB前端开发技术实用教程》第11章 网站特效魔术师-jQuery技术

1第11章网站特效魔术师-jQuery技术目录211.1jQuery概述及安装11.2jQuery选择器11.3访问DOM元素11.4jQuery元素筛选11.5jQuery事件处理11.6jQuery动画与特效11.7jQuery特效案例11.1jQuery概述及安装311.1.1jQuery概述11.1.2jQuery的下载和安装11.1.3核心函数jQuery11.1.4第一个jQuery程序11.1.5页面加载事件document.ready11.1.6DOM对象和jQuery对象11.1.1jQuery概述jQuery是一个快速、简洁的、优秀的javaScript库，使用户能更方便地处理HTML实现动画效果，并且方便地为网站提供AJAX交互。jQuery特点（1）轻量级（2）链式语法（3）CSS选择器（4）多浏览器兼容性（5）简单易用（6）易扩展411.1.1jQuery概述jQuery提供的功能修改页面的表现（Presentation）访问和草走DOM元素页面事件处理为页面添加动画与服务器异步交互大量丰富的扩展插件511.1.2jQuery的下载和安装下载jQuery官方网站：不需要任何安装过程，将源码文件直接导入到你的网页文件中，在页面头部head中，添加js,如下代码：<scriptlanguage=“JavaScript”src=“js/jquery-2.1.1.min.js”></script>611.1.3核心函数jQuery()jQuery([selector,[context]])selector:用来查找的字符串context:作为待查找的DOM元素集、文档或jQuery对象。这个函数接收一个包含CSS选择器的字符串，然后用这个字符串去匹配一组元素。jQuery()等价于$()$,用于声明jQuery对象，是jQuery中选取元素的符号711.1.4第一个jQuery程序8<scriptlanguage="JavaScript"src="js/jquery-2.1.1.min.js"></script><scriptlanguage="JavaScript">$(document).ready(function(){

$('#btn1').click(function(){$(".box1").toggle("slow");});});</script><inputtype="button"value="点击"id="btn1"/><br/><divclass="box1">这是一个DIV块！</div>11.1.5页面加载事件document.ready9$(document).ready事件和window.onload事件比较1）解析HTML结构2）加载外部脚本和CSS样式文件3）解析并执行脚本代码4）构造HTMLDOM模型树-------------------------------------------------》JQuery执行ready快5）加载图片,flash等外部文件6）页面加载完毕。-------------------------------------------------》window.load执行慢执行时间不同执行数量不同,$(document).read可以重复写多个并且每个都能执行，而window.load尽管也可以写多个但，后面的会覆盖前面的执行，最终只执行最后的一个。$(document).read(function(){})可以简写成$(function(){})11.1.6DOM对象和jQuery对象1. DOM对象DOM是文档对象模型，当一个文档在浏览器中加载完毕，浏览器会根据整个文档的结构，将文档中的每一个元素包括文本形成一个HTMLDOM模型树，这棵模型树上的节点都是一个对象，即DOM对象。2. jQuery对象在jQuery库中，通过jQuery提供的方法来访问文档页面元素的对象称之为jQuery对象。1011.1.6DOM对象和jQuery对象3、jQuery对象和DOM对象的转换（1） jQuery对象转成DOM对象jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM对象的时候,有如下两种处理方法:1）jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象.2）使用jQuery中的get(index)方法得到相应的DOM对象11$(“#divOut1”).html($(“#divTmp1”).html());可以写成：

$("#divOut1").html($("#divTmp1")[0].innerHTML);11.1.6DOM对象和jQuery对象3、jQuery对象和DOM对象的转换（2） DOM对象转成jQuery对象对于一个DOM对象,只需要用$()把DOM对象包装起来(jQuery对象就是通过jQuery包装DOM对象后产生的对象),就可以获得一个jQuery对象.

转换后就可以使用jQuery中的方法了12oDiv.innerHTML=tDiv.innerHTML;可以写成：$(oDiv).html($(tDiv).html()); jQuery和DOM对象转换示例1311.2jQuery选择器1411.2.1选择器介绍及分类11.2.2基本选择器11.2.3层次选择器11.2.4过滤选择器11.2.5表单选择器11.2.1选择器介绍及分类选择器是jQuery的根基，允许通过标签名、属性名或内容对DOM元素进行快速、准确的查找选择。1. jQuery选择器的优点简洁的写法完善的事件处理机制1511.2.1选择器介绍及分类2.jQuery选择器分类1611.2.2基本选择器.基本选择器Basics基本选择器是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，其详细说明如表所示。17名称参数说明返回值举例ID选择器#id根据元素ID选择单个$("#divId")：选择ID为divId的元素标签选择器element根据元素的名称选择,同类型集合$("a")：选择所有<a>元素类别选择器.class根据元素的css类选择集合$(“.bgRed”)：选择所用CSS类为bgRed的元素全匹配选择器*选择所有元素所有元素集合$("*")：选择页面所有元素群组选择器selector1,selector2,selectorN可以将几个选择器用","分隔拼成一个选择器字符串，会同时选中这几个选择器匹配的内容集合$("#divId,a,.bgRed")：选择id为divId，所有的a标签，class为bgRed三类元素。11.2.2基本选择器18<scriptlanguage="javascript"src="js/jquery-1.5.2.min.js"></script><scripttype="text/javascript">$(function(){//ID匹配元素

$("#divOne").css("display","block");})$(function(){//元素名匹配元素

$("divspan").css("display","block");})$(function(){//类匹配元素

$(".clsFrame.clsOne").css("display","block");})$(function(){//匹配所有元素

$("*").css("display","block");})$(function(){//合并匹配元素

$("#divOne,span").css("display","block");})</script>基本选择器实例11.2.3层次选择器层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表所示。19说明ancestordescendant与parent>child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。名称参数说明返回值举例后代选择器ancestor

descendant在给定的祖先元素下匹配所有的后代元素集合$(".bgReddiv")选择CSS类为bgRed的元素中的所有<div>元素.子选择器parent>child选择parent的直接子节点child.child必须包含在parent中并且父类是parent元素.集合$(".myList>li")选择CSS类为myList元素中的直接子节点<li>对象.相邻选择器prev+nextprev和next是两个同级元素.选中在prev元素后面的next元素.集合$("#div1+img")选择id为div1元素后面的img对象.兄弟选择器prev~siblings选择prev后面的根据siblings过滤的元素集合$("#someDiv~span")选择id为someDiv的对象后面的span元素11.2.3层次选择器实例：20<scripttype="text/javascript">$(function(){//匹配后代元素

$("#divMid").css("display","block");$("divspan").css("display","block");})$(function(){//匹配子元素

$("#divMid").css("display","block");$("div>span").css("display","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");})</script>11.2.4过滤选择器过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头，其详细说明如表所示21名称说明举例:first匹配找到的第一个元素查找表格的第一行:$("tr:first"):last匹配找到的最后一个元素查找表格的最后一行:$("tr:last"):not(selector)去除所有与给定选择器匹配的元素查找所有未选中的input元素:$("input:not(:checked)"):even匹配所有索引值为偶数的元素，从0开始计数查找表格的1、3、5...行:$("tr:even"):odd匹配所有索引值为奇数的元素，从0开始计数查找表格的2、4、6行:$("tr:odd"):eq(index)匹配一个给定索引值的元素

注:index从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:not(:animated)").animate({left:"+=20"},1000);2211.2.4过滤选择器实例<scriptlanguage="JavaScript"src="js/jquery-2.1.1.min.js"></script><scriptlanguage="JavaScript">$(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");});</script><body><h1>简单过滤选择器</h1><table><tr><td>姓名</td><td>年龄</td><td>城市</td></tr><tr><td>张小蝶</td><td>21</td><td>北京</td></tr><tr><td>李思</td><td>19</td><td>上海</td></tr><tr><td>王蓝</td><td>25</td><td>广州</td></tr><tr><td>马霖</td><td>18</td><td>深圳</td></tr><tr><td>王思远</td><td>22</td><td>武汉</td></tr></table></body>过滤选择器—属性过滤选择器AttributeFilters属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束。其详细的说明如表所示。23jQuery选择器名称说明举例[attribute]匹配包含给定属性的元素查找所有含有id属性的div元素:

$("div[id]")[attribute=value]匹配给定的属性是某个特定值的元素查找所有name属性是newsletter的input元素:

$("input[name='newsletter']").attr("checked",true);[attribute!=value]匹配给定的属性是不包含某个特定值的元素查找所有name属性不是newsletter的input元素:

$("input[name!='newsletter']").attr("checked",true);[attribute^=value]匹配给定的属性是以某些值开始的元素$("input[name^='news']")[attribute$=value]匹配给定的属性是以某些值结尾的元素查找所有name以'letter'结尾的input元素:

$("input[name$='letter']")[attribute*=value]匹配给定的属性是以包含某些值的元素查找所有name包含'man'的input元素:

$("input[name*='man']")[attributeFilter1][attributeFilter2][attributeFilterN]复合属性选择器，需要同时满足多个条件时使用。找到所有含有id属性，并且它的name属性是以man结尾的:

$("input[id][name$='man']")表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。其详细的说明如表所示2411.2.5表单选择器名称说明解释:input匹配所有input,textarea,select和button元素查找所有的input元素:$(":input"):text匹配所有的文本框查找所有文本框:$(":text"):password匹配所有密码框查找所有密码框:$(":password"):radio匹配所有单选按钮查找所有单选按钮

$(":radio"):checkbox匹配所有复选框查找所有复选框:$(":checkbox"):submit匹配所有提交按钮查找所有提交按钮:$(":submit"):image匹配所有图像域匹配所有图像域:$(":image"):reset匹配所有重置按钮查找所有重置按钮:$(":reset"):button匹配所有按钮查找所有按钮:$(":button"):file匹配所有文件域查找所有文件域:$(":file")全选功能25<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>复选框全选实例</title><scriptlanguage="javascript"src="../js/jquery-2.1.1.min.js"></script><scripttype="text/javascript">$(function(){//全选功能$("#all").click(function(){$(":checkbox[name='items']").prop("checked",true);});//全不选功能$("#no").click(function(){$(":checkbox[name='items']").prop("checked",false);});//反选功能$("#rev").click(function(){ $(":checkbox[name='items']").each(function(){ varf=$(this).prop("checked"); $(this).prop("checked",!f); }); });全选功能26//提交显示所选内容$("#ok").click(function(){ if($(":checkbox[name=items]:checked").length>0){

varstr="你选中的是：\n";

$(":checkbox[name=items]:checked").each(function(){str+=$(this).val()+"\n";});

alert(str); }else{alert("请至少选择一项！");}});});</script></head><body>你爱好的运动是?<br/><inputname="items"type="checkbox"id="items"value="足球"/>足球<br/><inputname="items"type="checkbox"id="items"value="篮球"/>篮球<br/><inputname="items"type="checkbox"id="items"value="羽毛球"/>羽毛球<br/><inputname="items"type="checkbox"id="items"value="乒乓球"/>乒乓球<br/><inputtype="button"id="all"value="全选"/><inputtype="button"id="no"value="全不选"/><inputtype="button"id="rev"value="反选"/><inputtype="button"id="ok"value="提交"/></body></html>设置复选框为选中状态$(“:checkbox”).attr(“checked”,true);在jQuery1.6版本以后，点击一次有效，点击多次无效在jquery1.6版本以后的checked属性attr("checked")为checked，未选中时为undefined；解决方式：改成prop("checked")2711.3访问DOM元素2811.3.1DOM元素属性操作11.3.2DOM元素CSS类操作11.3.3DOM元素内容操作11.3.4DOM元素操作11.3.1DOM元素属性操作1、获取元素属性语法：attr(name)功能：取得第一个匹配元素的属性值。举例：$(“#im1”).attr(“src”);2、设置元素属性（1）设置单个属性语法：attr(key,value)举例：$(“#im1”).attr(“src”,”images/01.jpg”);（2）设置多个属性语法：attr({key0:value0,key1:value1})举例：$("#im1").attr({title:"aimage!",width:"115px",src:”images/01.jpg”});3. 删除元素的属性语法：removeAttr(name)举例：$(“#img1’).removeAttr(“src”);2911.3.2DOM元素css类操作1. 直接设置元素样式值语法：css(name,value)举例：$(“p”).css(“color”,”#f00”);2. 增加CSS类别语法：addClass(class)举例：$(“#p1”).addClass(“myclass“);

3. 类别切换语法：toggleClass(class)举例：$(“#p1”).toggleClass(“togcls”);4. 删除类别语法：removeClass([class])举例：$("p").removeClass("cls0");3011.3.3DOM元素内容操作1、html()方法设置或获取每一个匹配元素的html内容2、text()方法设置或获取每一个匹配元素的文本内容3、val()方法设置或获取匹配元素的value属性的值3111.3.4DOM元素操作1. 插入元素节点（1） 内部插入append(),appendTo(),prepend(),prependTo()（2） 外部插入after(),insertAfter(),before(),insertbBefore()2. 包裹元素节点wrap(),unwrap(),wrapAll()3. 替换元素节点replaceWith(),replaceAll()4. 复制元素节点clone()5. 删除元素节点empty(),remove()6. 遍历元素each()3211.4jQuery元素筛选3311.4.1元素过滤11.4.2元素查找11.4.1元素过滤34名称功能说明举例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)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效,都返回false由于input元素的父元素是一个表单元素，所以返回true:$("input[type='checkbox']").parent().is("form")map(callback)将一组元素转换成其他数组（不论是否是元素数组）可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立把form中的每个input元素的值建立一个列表:$("p").append($("input").map(function(){return$(this).val();}).get().join(","));not(expr)删除与指定表达式匹配的元素从p元素中删除带有select的ID的元素:$("p").not($("#selected")[0])slice(start,end)选取一个匹配的子集选择第一个p元素:$("p").slice(0,1);11.4.2元素查找35名称说明举例add(expr)把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。动态生成一个元素并添加至匹配的元素中:$("p").add("<span>Again</span>")children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。查找DIV中的每个子元素:$("div").children()closest([expr])取得与表达式匹配的最新的父元素$("li:first").closest(["ul","body"]);contents()查找匹配元素内部所有的子节点（包括文本节点）。查找所有文本节点并加粗:$("p").contents().not("[nodeType=1]").wrap("<b/>");find(expr)搜索所有与指定表达式匹配的元素。从所有的段落开始，进一步搜索下面的span元素。与$("pspan")相同:$("p").find("span")next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的那一个同辈元素的元素集合。找到每个段落的后面紧邻的同辈元素:

$("p").next()nextAll([expr])查找当前元素之后所有的同辈元素。给第一个div之后的所有元素加个类:$("div:first").nextAll().addClass("after");offsetParent()返回第一个有定位的父类(如relative或absolute).

11.4.2元素查找36名称说明举例parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。查找每个段落的父元素:

$("p").parent()parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。找到每个span元素的所有祖先元素:$("span").parents()prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。找到每个段落紧邻的前一个同辈元素:$("p").prev()prevAll([expr])查找当前元素之前所有的同辈元素给最后一个之前的所有div加上一个类:$("div:last").prevAll().addClass("before");siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。找到每个div的所有同辈元素:$("div").siblings()11.5jQuery事件处理3711.5.1页面载入事件11.5.2绑定与移除绑定事件11.5.3绑定一次性事件11.5.4触发事件11.5.5切换事件11.5.6事件方法11.5.1页面载入事件ready()方法格式：ready(fn)功能：页面载入事件，当DOM载入就绪可以查询及操纵时，绑定一个要执行的函数。参数：fn，要在DOM就绪时执行的函数写法一：$(document).ready(function(){});写法二(推荐)：$(function(){});写法三：jQuery(document).ready(function(){});写法四：jQuery(function(){});3811.5.2 绑定与移除绑定事件1. 事件绑定方法：bind()功能：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。格式：bind(type,[data],fn)参数：type,事件类型data:(可选)作为event.data属性值传递给事件对象的额外数据对象fn:绑定到每个匹配元素的事件上面的处理函数举例：$("p").bind("click",function(){alert($(this).text());});3911.5.2 绑定与移除绑定事件2. 移除绑定事件unbind()功能：从每一个匹配的元素中删除绑定的事件。格式：bind(type,fn)参数：type：事件类型，一个或多个事件,由空格分隔多个事件值。fn：移除的事件处理函数举例：$("p").unbind("click")4011.5.3

绑定一次性事件one()方法功能：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理器函数。格式：one(type,[data],fn)参数：type,事件类型data:(可选)作为event.data属性值传递给事件对象的额外数据对象fn:每当事件触发时执行的函数。举例：$("p").one("click",function(){alert($(this).text());});4111.5.4

触发事件trigger()方法功能：在每一个匹配的元素上触发某类事件。格式：trigger(type,[data])参数：type:一个事件对象或者要触发的事件类型data:(可选)传递给事件处理函数的附加参数举例：$("form:first").trigger("submit")4211.5.5切换事件1、hover()功能：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。格式：hover(over,out)参数：over：鼠标移到元素上要触发的函数out：鼠标移出元素要触发的函数举例：$(".clsTitle").hover(

function(){$(".clsContent").show();},function(){$(".clsContent").hide();}

);4311.5.5切换事件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.jpg",title:this.src});})4411.5.6事件方法45jQuery事件方法说明blur(fn)在每一个匹配元素的blur事件中绑定一个处理函数。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的change(fn)在每一个匹配元素的change事件中绑定一个处理函数。click(fn)在每一个匹配元素的click事件中绑定一个处理函数。点击事件会在指针设备的按钮在元素上单击时触发。dblclick(fn)在每一个匹配元素的dblclick事件中绑定一个处理函数。在某个元素上双击的时候就会触发dblclick事件error(fn)在每一个匹配元素的error事件中绑定一个处理函数。当页面的JavaScript发生错误时，window对象会触发error事件focus(fn)在每一个匹配元素的focus事件中绑定一个处理函数。focus事件可以通过鼠标点击或者键盘上的TAB导航触发keydown(fn)在每一个匹配元素的keydown事件中绑定一个处理函数。keydown事件会在键盘按下时触发。keyup(fn)在每一个匹配元素的keyup事件中绑定一个处理函数。keyup事件会在键盘按下时触发。keypress(fn)在每一个匹配元素的keypress事件中绑定一个处理函数。keypress事件会在敲击按键时触发。敲击按键的定义为按下并抬起同一个按键。load(fn)在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。11.5.6事件方法46jQuery事件方法说明mousedown(fn)在每一个匹配元素的mousedown事件中绑定一个处理函数。mousedown事件在鼠标在元素上点击后会触发mouseup(fn)在每一个匹配元素的mouseup事件中绑定一个处理函数。mouseup事件会在鼠标点击对象释放时触发mousemove(fn)在每一个匹配元素的mousemove事件中绑定一个处理函数。mousemove事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX和.clientY属性代表鼠标的坐标mouseover(fn)在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发mouseout(fn)在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发resize(fn)在每一个匹配元素的resize事件中绑定一个处理函数。当文档窗口改变大小时触发scroll(fn)在每一个匹配元素的scroll事件中绑定一个处理函数。当滚动条发生变化时触发select(fn)触发每一个匹配元素的select事件这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。submit(fn)在每一个匹配元素的submit事件中绑定一个处理函数。submit事件将会在表单提交时触发unload(fn)在每一个匹配元素的unload事件中绑定一个处理函数。11.6jQuery动画与特效4711.6.1显示与隐藏效果11.6.2滑动效果11.6.3淡入淡出效果11.6.4自定义动画11.6.1显示与隐藏效果48名称参数功能说明举例show()无显示隐藏匹配元素。无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西显示所有段落HTML代码：<pstyle="display:none">Hello</p>jQuery代码：$("p").show()show(speed,[callback])speed：速度的设定"slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。1秒缓慢将隐藏段落显示$("p").show(1000);400毫秒将段落显示并在之后执行回调函数$("p").show(400,function(){$(this).text("AnimationDone...");});hide()

隐藏显示的元素无动画版隐藏操作隐藏所有段落$("p").hide()11.6.1显示与隐藏效果49名称参数功能说明举例hide(speed,[callback])speed：速度的设定"slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。1秒缓慢将隐藏段落显示$("p").hide(1000);400毫秒将段落显示并在之后执行回调函数$("p").hide(400,function(){$(this).text("AnimationDone...");});toggle()

切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。切换所有段落的可见状态。$("p").toggle()toggle(speed,[callback])speed：速度的设定"slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。

1秒缓慢地切换段落的显示隐藏状态$("p").toggle(1000);400毫秒将段落切换并执行回调函数$("p").toggle(400,function(){$(this).text("AnimationDone...");});11.6.2滑动效果50名称参数功能说明举例slideDown(speed,[callback])speed：速度的设定"slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。1秒缓慢将段落滑下：$("p").slideDown(1000);400毫秒将段落滑下并在之后弹出对话框$("p").slideDown(400,function(){$(this).text("AnimationDone...");});slideUp(speed,[callback])speed：速度的设定"slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)callback:在动画完成时执行的函数，每个元素执行一次。通过高度变