jQuery

1 jQuery描述

jQuery是一个优秀的Javascript库。它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器（jQuery 1.x和2.x一直在更新）。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。

 

 

l 轻量级

l 强大的选择器

l 出色的 DOM 操作的封装

l 可靠的事件处理机制

l 出色的浏览器兼容性

l 链式操作方式

l 可拓展性强

l …

2 jQuery与Dom

2.1 jQuery与Dom对象区别

jQuery对象就是使用jQuery()或$()包装了dom对象后的对象；其中符号$是jQuery的一个别名。如果不喜欢或者发生了冲突完全可以将$改成其它的；如：

var j = jQuery.noConflict();//这样的话，以后就使用j表示jQuery

 

了解：$符号通常是jQuery的标识符（别名），一般不改动；$ 定义为 选取 英文是selector的意思。如：

$("#divID") 表示选取 id为divID的元素；

$("input") 表示 选取所有input标签

 

jQuery对象是jQuery 库中独有的；如果是一个jQuery对象那么它就可以使用jQuery库中的所有方法。需要注意的是：jQuery对象不能使用Dom对象中的任何方法。同样地；Dom对象也不能使用jQuery对象中的任何方法。

约定：如果一个对象是jQuery对象；那么其对应的变量名前面加$，表明该对象是一个jQuery。(只是约定…between us)

2.2 jQuery与Dom对象转换

1、 jQuery对象转为Dom对象；有时jQuery对象没有Dom对象中对应的方法的话，可以将jQuery对象转为Dom对象。可通过如下两种方式来取得Dom对象。

方式一：jQuery是一个数组对象，可使用下标

var $div = $("#divID");

var divElement = $div[0];

方式二：使用jQuery对象自带的get方法

var $div = $("#divID");

var divElement = $div.get(0);

2、 Dom对象转为jQuery对象；这个更简单；值需要将dom对象使用$()包裹起来就是一个jQuery对象。如：

var $div = $(divElement);//将dom对象转为jQuery对象

 

3 jQuery操作

3.1 引入jQuery

要使用jQueryjavascript库，只需要将jQuery 对应的“jquery-x.x.js”脚本文件引入到页面中即可。

 

3.2 常用基础方法

3.2.1 初始事件

在未使用jQuery之前；在页面中常常需要用到window.onload来初始化一些元素事件。引入jQuery之后，它也对应有类似方法:ready；当DOM载入就绪可以查询及操纵时绑定一个要执行的函数；该方法是对向window.load事件注册事件的替代。两种写法：

写法一：直写

$(document).ready(function(){

  // 在这里写你的代码...

});

 

写法二：$(document).ready() 的简写

$(function() {

  // 你可以在这里继续使用$作为别名...

});

 

3.2.2 基本选择

用法

描述

$(“#elementID”)

#表示根据id查找；查找id为elementID的元素；建议的用法。所以一般推荐给标签设置ID。

类似：

document.getElementById_x_x_x_x_x_x("elementID") 但两者之间返回类型不同

 

$(“.className”)

.表示根据class样式名称查找；查找样式名称为className的所有标签

 

$(“input”)

查找所有input标签

 

3.2.3 基本取/设值

用法

描述

$(“#elementID”).val()

$(“#elementID”).val(“新值”)

 

分别表示取值和设置值

$(“#elementID”).html()

$(“#elementID”).html(“新值”)

 

分别表示获取标签内部的html文本内容和设置html文本内容。类似innerHTML

$(“#elementID”).text()

$(“#elementID”).text(“新值”)

 

分别表示获取标签内部的纯文本内容和设置纯文本内容。

$(“#elementID”).attr(“name”)

$(“#elementID”).attr(“name”,”itcast”)

 

attr为获取对应属性的值或设置对应属性的值。如果遇上具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 则使用prop()

 

3.2.4 基本访问与工具

用法

描述

empty()

 

删除匹配的元素集合中所有的子节点。

each()

以每一个匹配的元素作为上下文来执行一个函数；每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素。

 

jQuery.each()

通用例遍方法，可用于例遍对象和数组

 

jQuery.trim()

去掉字符串起始和结尾的空格。

$.trim("  hello, how are you?  ");去掉字符串起始和结尾的空格。

 

focus()

定焦或当元素获得焦点时，触发 focus 事件

 

4 jQuery Ajax

4.1 jQuery.ajax

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post, $.getJSON, $getScript。使用该方法进行异步数据通讯可以很灵活地设置请求的各个参数。常用参数和说明：

参数

描述

url

发送请求的地址

 

data

发送到服务器的数据。将自动转换为请求字符串格式。

 

type

请求方式 ("POST" 或 "GET")， 默认为 "GET"

 

dataType

预期服务器返回的数据类型。可用值: xml,html,script,json,jsonp,text

 

success

请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据

 

error

默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"

async

默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行

示例：

$.ajax({

   type: "POST",

   url: "testServlet",

   data: {"name":"itcast","location":"guangzhou"},

   success: function(msg){

     alert( "Data Saved: " + msg );

   }

});

 

4.2 jQuery.get

$.get(url, [data], [callback], [type]) 通过远程 HTTP GET 请求载入信息；这是$.ajax的一个高级实现。

参数

描述

url

发送请求的地址

 

data

待发送 Key/value 参数

 

type

返回内容格式，xml, html, script, json, text, _default

 

callback

请求成功后的回调函数。参数：由服务器返回，并根据type参数进行处理后的数据

 

示例：

$.get("testServlet", { name: "John", time: "2pm" },

  function(data){

    alert("Data Loaded: " + data);

  });

 

4.3 jQuery.post

$.post(url, [data], [callback], [type]) 通过远程 HTTP POST 请求载入信息；这是$.ajax的一个高级实现。

参数

描述

url

发送请求的地址

 

data

待发送 Key/value 参数

 

type

返回内容格式，xml, html, script, json, text, _default

 

callback

请求成功后的回调函数。参数：由服务器返回，并根据type参数进行处理后的数据

 

示例：

$.post("testServlet", { name: "John", time: "2pm" },

  function(data){

    alert("Data Loaded: " + data);

  });

 

 

4.4 jQuery.getJSON

$.getJSON(url, [data], [callback]) 通过远程 HTTP GET 请求载入json信息；这是$.ajax的一个高级实现。

参数

描述

url

发送请求的地址

 

data

待发送 Key/value 参数

 

callback

请求成功后的回调函数。

 

示例：

$.getJSON("testServlet", { name: "John", time: "2pm" }, function(json){

  alert("JSON Data: " + json.users[3].name);

});

 

4.5 jQuery.getScript

$.getScript(url, [callback]) 通过远程 HTTP GET 请求载入并执行一个 JavaScript 文件。

参数

描述

url

待载入 JS 文件地址。

 

callback

请求成功后的回调函数。

 

示例：

$.getScript("test.js", function(){

  alert("Script loaded and executed.");

});

 

4.6 load

load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

参数

描述

url

待装入 HTML 网页网址

 

data

待发送 Key/value 参数

 

callback

请求成功后的回调函数。

示例：

$("#divID").load("feeds.jsp", {limit: 25}, function(){

   alert("The last 25 entries in the feed have been loaded");

 });

 

5 jQuery 选择器

jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。

5.1 基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素。

选择器

描述

返回

#id

根据给定的ID匹配一个元素

单个元素组成的集合

element

根据给定的元素名匹配所有元素

元素集合

.class

根据给定的类匹配元素

元素集合

*

匹配所有元素

元素集合

seletor1,seletor2

…,selectorN

将每一个选择器匹配到的元素合并后一起返回；可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

元素集合

 

5.2 层级选择器

适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。

选择器

描述

返回

ancestor descendant

 

后代元素选择器

$(“div span”)选取

里的所有的元素

 

元素集合

parent > child

 

子元素选择器

$(“div>span”)选取

元素下元素名是的子元素

 

元素集合

prev + next

 

相邻元素选择器

$(“.one+div”)选取class为one的下一个

兄弟元素

 

元素集合

prev ~ siblings

 

兄弟元素选择器

$(“#two~div”)选取Id为two的元素后面的所有

兄弟元素

 

元素集合

注意：$(“prev~siblings”)选择器与siblings()方法的区别。

 

      $(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

 

5.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单过滤和表单对象属性过滤选择器共七种选择器。

 

5.3.1 基本过滤

 

选择器

描述

返回

:first

选取第一个元素

$('li:first');

 

单元素

:last

选取最后一个元素

$('li:last');

 

单元素

:not(selector)

去除所有与给定选择器匹配的元素。

$("input:not(:checked)")；查找所有未选中的 input 元素

元素集合

:even

选取索引号为偶数的元素，索引号从0开始

$("tr:even")

 

元素集合

:odd

选取索引号为奇数的元素，索引号从0开始

$("tr:odd”)

 

元素集合

:eq(index)

选取索引号为index的元素，索引号从0开始

$("tr:eq(1)")

 

单元素

:gt(index)

选取索引号大于index的元素，索引号从0开始

$("tr:gt(1)")

 

元素集合

:lt(index)

选取索引号小于index的元素，索引号从0开始

$("tr:lt(1)")

 

元素集合

:header

选取如 h1, h2, h3之类的标题元素$(":header").css("background", "#EEE")

 

元素集合

:animated

选取所有正在执行动画效果的元素

$("div:animated")

元素集合

 

5.3.2 内容过滤

主要对所选择的元素中所包含的子元素或内容进行过滤。

选择器

描述

返回

:contains(text)

选取包含给定文本的元素

$("div:contains('John')")

 

元素集合

:empty

选取所有不包含子元素或者文本的空元素

$("td:empty")

 

元素集合

:has(selector)

选取含有选择器所匹配的元素的元素

$("div:has(p)").addClass("text");给所有包含 p 元素的 div 元素添加一个 text 样式

 

元素集合

:parent

选取含有子元素或者文本的元素

$("td:parent")

元素集合

 

5.3.3 可见性过滤

主要对元素的可见性（可见或不可见）进行过滤。

选择器

描述

返回

:hidden

选取所有不可见元素，或者type为hidden的元素

$("div:hidden")

 

元素集合

:visible

选取所有的可见元素

$("input:visible")

 

元素集合

可见选择器:hidden，可以对样式的display的值为none的元素进行过滤选择；以外；还可以对表单的隐藏元素（即类型为hidden的表单项）或visible:hidden的元素进行过滤选择。

 

5.3.4 属性过滤

主要对元素的属性进行过滤选择符合属性特征符合的元素。

选择器

描述

返回

[attribute]

选取包含给定属性的元素 $("div[id]")

查找所有含有 id 属性的 div 元素

 

元素集合

[attribute=value]

选取给定的属性是某个特定值的元素 $("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素

 

元素集合

[attribute!=value]

选取所有不含有指定的属性，或者属性不等于特定值的元素 $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素

 

元素集合

[attribute^=value]

选取给定的属性是以某些值开始的元素

$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

元素集合

[attribute$=value]

选取给定的属性是以某些值结尾的元素

 $("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

元素集合

[attribute*=value]

选取给定的属性是以包含某些值的元素

$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

元素集合

[attrSel1][attrSel2][attrSelN]

复合属性选择器，需要同时满足多个条件时使用

 $("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

 

元素集合

 

 

5.3.5 子元素过滤

主要选择元素中所含有的子元素。

选择器

描述

返回

:nth-child

选取父元素下的第N个子或奇偶元素（index序号从1开始）

$("ul li:nth-child(2)") 在每个 ul 查找第 2 个li

 

元素集合

:first-child

选取父元素的第一个子元素

$("ul li:first-child") 在每个 ul 中查找第一个 li

 

元素集合

:last-child

选取父元素中的最后一个子元素 $("ul li:last-child") 在每个 ul 中查找最后一个 li

 

元素集合

:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配；如果父元素中含有其他元素，那将不会被匹配。 $("ul li:only-child") 在 ul 中查找是唯一子元素的 li

元素集合

:nth-child 过滤选择器：

:nth-child(even) 选取父元素下索引号为偶数的子元素

:nth-child(odd) 选取父元素下索引号为奇数的子元素

:nth-child(5n) 选取父元素下索引号为5n的子元素

:nth-child(5n+1) 选取父元素下索引号为5n+1的子元素

 

5.3.6 表单过滤

主要对表单元素进行过滤选择。

选择器

描述

返回

: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")

 

元素集合

:hidden

匹配所有不可见元素（display:none），或者type为hidden的元素

$("tr:hidden")

 

元素集合

 

 

5.3.7 表单对象属性过滤

主要对所选择的表单元素进行过滤。

选择器

描述

返回

:enabled

选取所有可用元素

$("input:enabled")

 

元素集合

:disabled

选取所有不可用元素

$("input:disabled")

 

元素集合

:checked

选取所有被选中的元素（单、复选框）

$("input:checked")

 

元素集合

:selected

选取所有被选中的选项元素（下拉列表

$("select option:selected")查找所有选中的选项元素

元素集合

 

6 文档处理

jQuery中对dom元素进行操作。

属性/方法

描述

append(content|fn)

向每个匹配的元素内部追加内容。$("p").append("Hello");向所有段落中追加一些HTML标记。

 

appendTo(content)

把所有匹配的元素追加到另一个指定的元素中。使用这个方法是颠倒了常规的$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中。

$("p").appendTo("div");把所有段落追加到div元素中

 

prepend(content|fn)

向每个匹配的元素内部前置内容。$("p").prepend("Hello");向所有段落中前置一些HTML标记代码。

 

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。$("p").prependTo("#foo"); 把所有段落追加到ID值为foo的元素中。

 

after(content|fn)

在每个匹配的元素之后插入内容。$("p").after("Hello");在所有段落之后插入一些HTML标记代码。

 

before(content|fn)

在每个匹配的元素之前插入内容。$("p").before("Hello");在所有段落之前插入一些HTML标记代码。

 

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。$("p").insertAfter("#foo");把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

 

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。$("p").insertBefore("#foo");把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

 

wrap(html|ele|fn)

 

把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("

"); 把所有的段落用一个新创建的div包裹起来

 

unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。

$("p").unwrap(); 把所有段落的父元素直接移除

 

wrapAll(html|ele)

将所有匹配的元素用单个元素包裹起来。$("p").wrapAll("

");用一个生成的div将所有段落包裹起来

 

wrapInner(html|ele|fn)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。$("p").wrapInner("");把所有段落内的每个子内容加粗

 

replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("Paragraph. ");把所有的段落标记替换成加粗的标记。

 

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

$("Paragraph. ").replaceAll("p");把所有的段落标记替换成加粗标记

 

empty()

删除、清空匹配的元素集合中所有的子节点。$("p").empty();把所有段落的子元素（包括文本节点）删除

 

remove([expr])

从DOM中删除所有匹配的元素。$("p").remove();从DOM中把所有段落删除

 

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。（传入参数布尔值（true 或者 false）指示事件处理函数是否会被复制。）

$("b").clone().prependTo("p");克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

 

 

 

7 筛选

jQuery中对dom元素进行筛选判断。

属性/方法

描述

first()

first() 获取第一个元素。

$('li').first()

 

last()

last() 获取最后个元素。

$('li').last()

 

is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。

$("input[type='checkbox']").parent().is("form");由于input元素的父元素是一个表单元素，所以返回true。

 

has(expr|ele)

保留包含特定后代的元素，去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。

$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色

 

find(e|o|e)

搜索所有与指定表达式匹配的元素。

$("p").find("span");从所有的段落开始，进一步搜索下面的span元素。

 

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

$("p").parent(".selected");查找段落的父元素中每个类名为selected的父元素。

 

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

$("div").siblings();找到每个div的所有同辈元素。

 

 

8 样式

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

addClass(class|fn)

为每个匹配的元素添加指定的类名 $("p").addClass("selected"); 为匹配的元素加上 'selected' 类

 

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类 $("p").removeClass("selected"); 从匹配的元素中删除 'selected' 类

 

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类。$("p").toggleClass("selected"); 为匹配的元素切换 'selected' 类

 

hasClass(class)

检查元素是否含有某个特定的类，如果有，则返回true。

$("div").hasClass("protected")

 

css(name|pro|[,val|fn])

访问匹配元素的样式属性 $("p").css("color") 取得第一个段落的color样式属性的值。$("p").css("color","red"); 将所有段落字体设为红色

 

height/width([val|fn])

取得匹配元素当前计算的高/宽度值（px）

$("p").height();$("p").width();

 

offset([coordinates])

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );

 

9 事件

 jQuery中dom元素事件的操作。

属性/方法

描述

on(eve,[sel],[data],fn)1.7+

在选择元素上绑定一个或多个事件的事件处理函数

$("p").on("click", function(){

   alert( $(this).text() );

});

 

off(eve,[sel],[fn])1.7+

在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序

$("p").off( "click", "**" )

 

bind(type,[data],fn)

为每个匹配元素的特定事件绑定事件处理函数。

$(document).bind('mousemove',function(e){

   $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);

});

 

unbind(t,[d|f])

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。

$("p").unbind( "click" )

 

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){

  alert( $(this).text() );

});

 

hover([over,]out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

$("td").hover(

  function () {

    $(this).addClass("hover");

  },

  function () {

    $(this).removeClass("hover");

  }

);

 

事件冒泡：事件在dom文档中，会逐层往上触发。如点击了div里面的一个p元素，那么div及其上层元素的click也会被触发。如要阻止事件的冒泡可以在里层的元素的事件方法中return false。

 

10 效果

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

show([s,[e],[fn]])

显示隐藏的匹配元素。

$("p").show() 显示所有段落

 

hide([s,[e],[fn]])

隐藏显示的元素。

$("p").hide() 隐藏所有段落

 

slideDown([s],[e],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

$("p").slideDown("slow"); 用600毫秒缓慢的将段落滑下

 

slideUp([s,[e],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

$("p").slideUp("slow");用600毫秒缓慢的将段落滑上

 

slideToggle([s],[e],[fn])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

$("p").slideToggle("slow");用600毫秒缓慢的将段落滑上或滑下

 

fadeIn([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。$("p").fadeIn("slow");用600毫秒缓慢的将段落淡入

 

fadeOut([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeOut("slow");用600毫秒缓慢的将段落淡出

 

fadeTo([[s],o,[e],[fn]])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

 

fadeToggle([s,[e],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeToggle("slow");用600毫秒缓慢的将段落淡入/出

 

animate(p,[s],[e],[fn])1.8*

用于创建自定义动画的函数。

 

11 案例

11.1 手机品牌展示

12 练习

12.1 城市列表（下拉框）

12.2 学科多选（复选框）

12.3 选课

 

J