环境搭建
搭建一个jQuery的开发环境非常方便，可以通过下列几个步骤进行。
- 下载jQuery文件库
在jQuery的官方网站（http:// jquery.com）中，下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮，将jQuery框架文件下载到本地即可，本教案使用的版本为稳定版：1.8.2版。
- 引入jQuery文件库
下载完jQuery框架文件后，并不需要任何的安装，仅需要使 用<script>文件导入标记，将jQuery框架文件导入页面中即可，假设该文件下载后保存在项目文件夹Jscript中，那么，在页面 的<head></head>中加入如下代码：
<script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script>
在页面的头部分，加入上述代码后，便完成了jQuery框架开发环境的搭建，就可以开始我们的jQuery学习了。
jQuery初体验
如果你了解JavaScript语言，那将对你掌握jQuery如虎添翼，因为jQuery本身就是JavaScript，只不过是把JavaScript代码包装成拿过来就能实现特定功能的代码库！例如，我们想改变页面中所有段落标签中的文本内容：
javaScript代码：
jQuery代码：
以上两段代码完成的功能是一样的。由此可以看出，jQuery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节。 $()就是jQuery中的函数，它的功能是获得（）中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。
在jQuery中 $()方法等价于jQuery()方法,前者比较常用，是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。
任务
我来试试：
在网页中第12行处，使用$("div")可以看到文字的变化！如下图所示效果:
.class 选择器(寻找红色铅笔)
我们在上一小节介绍了通过使用元素名称查询元素的方法，其实，还可以通过元素的类别属性查找元素，就好比在文具盒中要找一个“红色”铅笔一样，根据元素的某个特征进行查找，它的调用格式如下：
$(“.class”)
其中.class参数表示元素的CSS类别(类选择器)名称。
例如，在页面中，通过class选择器获取某个元素，并显示该元素的class类别名称，如下图所示：
在浏览器中显示的效果：
从图中可以看出，通过class选择器的方式获取元素，并调用元素的attr()方法获取元素的类别名称，并将名称显示在页面中。
任务
我来试试：“向我看齐”
使用class选择器的方式获取元素，将类名为“green”div元素中的文字内容设置为与类名为“red”元素一样。
ance desc选择器
本节开始，我们将介绍层次性选择器。
在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：
$("ance desc")
其中ance desc是使用空格隔开的两个参数，ance参数任何有效的选择器，desc参数是寻找元素的选择器，类似于寻找一个家族下的全部子或孙辈，ance参数为家族名称，desc参数为子或孙辈名称。
例如，使用层次选择器，获取<div>元素中的全部<span>元素，并设置它们显示的内容，在如下图所示：
在浏览器中显示的效果：
从图中可以看出，使用层次选择器$("div span")获取了在<div>元素中的两个元素，一个是<p>元素中的子元素，另一个是<p>元素外的同级元素，但它们都是在一个<div>元素下，也就是说在一个“家族”下。
ance desc选择器
本节开始，我们将介绍层次性选择器。
在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：
$("ance desc")
其中ance desc是使用空格隔开的两个参数，ance参数任何有效的选择器，desc参数是寻找元素的选择器，类似于寻找一个家族下的全部子或孙辈，ance参数为家族名称，desc参数为子或孙辈名称。
例如，使用层次选择器，获取<div>元素中的全部<span>元素，并设置它们显示的内容，在如下图所示：
在浏览器中显示的效果：
从图中可以看出，使用层次选择器$("div span")获取了在<div>元素中的两个元素，一个是<p>元素中的子元素，另一个是<p>元素外的同级元素，但它们都是在一个<div>元素下，也就是说在一个“家族”下。
任务
我来试试：亲自给家族中子孙们一点颜色
使用层次选择器，获取<div>元素下的全部<label>元素，并改变它们的背景色。
<!DOCTYPE html>
<html>
<head>
<title>prev + next选择器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>
码农家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>
</body>
<script type="text/javascript">
$("div+label").css("background-color","red");
</script>
</html>
选择器的定义与使用
prev ~ siblings选择器
与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：
$(“prev ~ siblings”)
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
例如，使用prev ~ next选择器，获取<p>元素后面相邻的全部元素，并设置它们在页面中显示的内容，如下图所示：
在浏览器中显示的效果：
可以看出，调用$("p~span")选择器代码，获取了<p>元素下面两个(全部)的<span>元素，该元素不包含<p>元素上面的元素和不属于同辈范围的元素。
任务
我来试试:
在编辑器第19，20行处，使用prev ~ next选择器，获取<p>元素下面全部的相邻元素，并修改它们的边框色和显示内容。
:first过滤选择器
本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。
在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？
在下面的示例代码中你可能注意到我们会使用
$(“li:first”)
注意：书写时以“：”号开头。
运行结果：
使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.
:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。
任务
任务：我来试试
鉴于：first和:last功能相近,在编辑器第18行处，使用:last给最后的li标签文字添加红色。
:first过滤选择器
本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。
在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？
在下面的示例代码中你可能注意到我们会使用
$(“li:first”)
注意：书写时以“：”号开头。
运行结果：
使用li:first过滤选择器可以很方便地获取ul列表中的第一个li元素.
:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。
任务
任务：我来试试
鉴于：first和:last功能相近,在编辑器第18行处，使用:last给最后的li标签文字添加红色。
- ?不会了怎么办
:eq(index)过滤选择器
如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用
:eq(index)
其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。例如：
在浏览器中显示的效果：
从图中可以看出，通过调用$("li:eq(3)")过滤选择器代码，获取了第4个<li>元素，并使用css()方法设置了该元素在页面中显示的文字样式。
任务
我来试试：亲自“给任意一个水果披上一件紫色的外衣”
在页面中第18行，获取<li>子元素中的倒数第三个元素，并改变它显示的背景色。
:contains(text)过滤选择器
与上一节介绍的:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。
例如:
在浏览器中显示的效果：
从图中可以看出，调用li:contains('土豪')代码，可以很方便地获取<li>中包含‘土豪’字符内容的全部元素，并且只要与选择的元素中或子元素中包含该字符内容，就可以被选中。
任务
我来试试：亲自感受一下通过包含字符获取元素的功能
在页面第18行处，使用:contains(text)选择器获取包含“jQuery”文字内容的全部元素，并改变它们显示的背景颜色。
:contains(text)过滤选择器
与上一节介绍的:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。
例如:
在浏览器中显示的效果：
从图中可以看出，调用li:contains('土豪')代码，可以很方便地获取<li>中包含‘土豪’字符内容的全部元素，并且只要与选择的元素中或子元素中包含该字符内容，就可以被选中。
任务
我来试试：亲自感受一下通过包含字符获取元素的功能
在页面第18行处，使用:contains(text)选择器获取包含“jQuery”文字内容的全部元素，并改变它们显示的背景颜色。
:has(selector)过滤选择器
除了在上一小节介绍的使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。
例如：获取指定包含某个元素名的全部<li>元素，并改变它们显示文字的颜色，如下图所示：
在浏览器中显示的效果：
:hidden过滤选择器
:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。
例如，调用:hidden选择器获取不可见的<p>元素，并将该元素的内容显示在<div>元素中，如下图所示：
在浏览器中显示的效果：
从图中可以看出，先调用$("p:hidden")代码获取隐藏的<p>元素，并调用该元素的html()方法获取该元素中的内容，最后将该内容显示在<div>元素中。
任务
我来试试，亲自获取隐藏元素中内容
在编辑器第13、14行处，通过:hidden选择器获取隐藏元素，并将它的值显示在<div>元素中。
:visible过滤选择器
与上一节的:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
例如，使用:visible选择器获取可见的<p>元素，并将该元素的内容显示在<div>元素中，如下图所示：
在浏览器中显示的效果：
从图中可以看出，调用$("p:visible")选择器代码，获取那个可见的<p>元素，并调用html()方法获取该元素的内容，最后将该内容显示在<div>元素中。
任务
我来试试：亲自给“可见的水果披上一件蓝色外衣”
在页面中第18行处，使用:visible选择器获取全部可见的<li>元素，并设置它们显示蓝色背景。
[attribute=value]属性选择器
属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
例如，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色，如图所示：
在浏览器中显示的效果：
从图中可以看出，使用$("li[title='我最爱']")属性选择器代码，获取了2个<li>元素，并调用css()方法设置它们在页面中显示的文字颜色，另外，属性值中的‘’单引号可以不写，由于属性名与属性值是等号，因此，它们之间不是包含关系，而是完全相同。
任务
我来试试：亲自“给蔬菜披上一件绿色外衣”
在编辑器第18行处，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的背景色。
[attribute=value]属性选择器
属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
例如，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色，如图所示：
在浏览器中显示的效果：
从图中可以看出，使用$("li[title='我最爱']")属性选择器代码，获取了2个<li>元素，并调用css()方法设置它们在页面中显示的文字颜色，另外，属性值中的‘’单引号可以不写，由于属性名与属性值是等号，因此，它们之间不是包含关系，而是完全相同。
任务
我来试试：亲自“给蔬菜披上一件绿色外衣”
在编辑器第18行处，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的背景色。
:image图像域选择器
当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式，如下图所示：
在浏览器中显示的效果：
从图中可以看出，使用:image选择器只能获取<input>图像域，而不能获取<img>格式的图像元素。
任务
在编辑器第17行处，使用:image选择器获取表单中指定的图像元素，并使用addClass()方法改变它的背景色。
:checked选中状态选择器
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。
例如，在表单中添加多个复选框和单选按钮，其中有一些元素处于选中状态，使用:checked获取并隐藏处于选中状态的元素，如下图所示：
在浏览器中显示的效果：
从图中可以看出，使用:checked选择器可以获取处于选中状态的元素，并调用hide()方法将它们进行隐藏
</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<h3>获取处于选中状态元素的内容</h3>
<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="0">苹果</option>
<option value="1" selected="selected">桔子</option>
<option value="2">荔枝</option>
<option value="3" selected="selected">葡萄</option>
<option value="4">香蕉</option>
</select><br /><br />
<div id="tip"></div>
</form>
</body>
<script type="text/javascript">
var $txtOpt = $("#frmTest :selected").test();
$("#tip").html("选中内容为:" + $txtOpt);
</script>
</html>
查看选中内容的状态
<script type="text/javascript">
var $content = "<b>唉，我又变胖了！</b>";
$("#html").html($content);
$("#text").text($content);
</script>
使用append()方法向元素内追加内容
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
例如，在页面的<body>元素中追加一个具有“id”、“title”属性和显示内容的<div>元素，如下图所示：
在浏览器中显示的效果：
从图中可以看出，由于使用append()方法在<body>元素中追加了一些HTML 元素标记，因此追加后，这些元素标记直接生成对应的元素和属性显示在页面中。
任务
我来试试，亲自使用append()方法追加一个返回内容的函数
在下列代码的第20行，调用append()方法追加一个函数。
替换内容
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素，content为替换的内容。
例如，调用replaceWith()方法将页面中<span>元素替换成一段HTML字符串，如下图所示：
在浏览器中显示的效果：
从图中可以看出，使用replaceWith()方法替换类别名为“green”的<span>元素，替换之后，旧元素完全由新替换的元素所取代。
使用each()方法遍历元素
使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：
$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。
例如，遍历页面中的<span>元素，当元素的序列号为2时，添加名为“focus”的样式，如下图所示：
在浏览器中显示的效果：
从图中可以看出，在使用each()方法遍历<span>元素时，回调函数中的“index”参数为元素的序列号，它从0开始，当为2时，表示第3个<span>元素增加样式。
任务
我来试试，亲自使用each()方法遍历元素并改变第2个元素背景色
在编辑器的第14、16行，通过each()遍历方法，改变第2个元素<span>元素的背景色。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用each()方法遍历元素</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<h3>使用each()方法遍历元素</h3>
<span class="green">香蕉</span>
<span class="green">桃子</span>
<span class="green">葡萄</span>
<span class="green">荔枝</span>
<script type="text/javascript">
$("span").each(function (index) {
if (index == 1) {
$(this).attr("class", "red");
$(this).addClass("focus");
}
});
</script>
</body>
使用bind()方法绑定元素的事件
bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
$(selector).bind(event,[data] function)
参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
例如，绑定按钮的单击事件，单击按钮时，该按钮变为不可用。如下图所示：
在浏览器中显示的效果：
可以看出，由于使用bind()方法，绑定了按钮的单击事件，在该事件中将按钮本身的“disabled”属性值设为“true”，表示不可用，当点击时触该事件。
任务
我来试试：在ready()事件中绑定一个按钮的单击事件
在下列代码的第12行，使用bind()方法绑定单击(click)和鼠标移出(mouseout)这两个事件，触发这两个事件中，按钮将变为不可用。
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<h3>bind()方法绑多个事件</h3>
<input id="btntest" type="button" value="点击或移出就不可用了" />
<script type="text/javascript">
$(function () {
$("btntest").bind("click",function () {
$(this).attr("disabled", "true");
})
});
</script>
绑定方式的使用方法
使用hover()方法切换事件
hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：
$(selector).hover(over，out);
over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。
例如，当鼠标移到<div>元素上时，元素中的字体变成金黄色，如下图所示：
在浏览器中显示的效果：
从图中可以看出，使用hover()方法执行两个函数，当鼠标移在元素上时调用addClass()方法增加一个样式，移出时，调用removeClass()方法移除该样式。
任务
我来试试，亲自调用hover()方法实现元素背景色的切换
在下列代码的第12行，调用hover方法实现元素背景色的切换。
- ?不会了怎么办
- <script type="text/javascript">
$(function () {
$("div").hover(
function () {
$(this).addClass("orange");
},
function () {
$(this).removeClass("orange")
})
});
</script>
使用toggle()方法绑定多个函数
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)
其中，fun1，fun2就是多个函数的名称
例如，使用toggle()方法，当每次点击<div>元素时，显示不同内容，如下图所示：
在浏览器中显示的效果：
从图中可以看出，每次点击<div>元素时，都依次执行toggle()方法绑定的函数，当执行到最后一个函数时，再次点击将又返回执行第一个函数。
使用toggle()方法绑定多个函数
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)
其中，fun1，fun2就是多个函数的名称
例如，使用toggle()方法，当每次点击<div>元素时，显示不同内容，如下图所示：
在浏览器中显示的效果：
从图中可以看出，每次点击<div>元素时，都依次执行toggle()方法绑定的函数，当执行到最后一个函数时，再次点击将又返回执行第一个函数。
任务
任务：我来试试，亲自调用toggle()方法控制元素的显示与隐藏
在下列代码的第14行，使用toggle()方法控制元素的显示与隐藏属性。
调用trigger()方法手动触发指定的事件
trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：
$(selector).trigger(event)
其中event参数为需要手动触发的事件名称。
例如，当页面加载时，手动触发文本输入框的“select”事件，使文本框的默认值处于全部被选中的状态，如下图所示：
在浏览器中显示的效果：
从图中可以看出，由于文本输入框调用trigger()方法触了“select”事件，因此，当页面加载完成后，文本框中的默认值处于全部被选中的状态。
任务
我来试试，亲自调用trigger()方法手动触发自定的事件。
在下列代码的第15行，调用trigger()方法手动触发一个绑定在<div>元素中的自定义事件。
调用trigger()方法手动触发指定的事件
trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：
$(selector).trigger(event)
其中event参数为需要手动触发的事件名称。
例如，当页面加载时，手动触发文本输入框的“select”事件，使文本框的默认值处于全部被选中的状态，如下图所示：
在浏览器中显示的效果：
从图中可以看出，由于文本输入框调用trigger()方法触了“select”事件，因此，当页面加载完成后，文本框中的默认值处于全部被选中的状态。
文本框的focus和blur事件
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。
例如，在触发文本框的“focus”事件时，<div>元素显示提示内容，如下图所示：
在浏览器中显示的效果：
从图中可以看出，当点击文本框时，触发文本框的“focus”事件，在该事件中，页面中的<div>元素显示提示信息。
任务
我来试试，亲自绑定文本框的blur事件，并在该事件中检测文本框的内容是否为空，如果为空，则在<div>元素中提示相应信息。
在下列代码的第17行，绑定文本框的“blur”事件。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>下拉列表的change事件</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<h3>下拉列表的change事件</h3>
<select id="seltest">
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="荔枝">荔枝</option>
<option value="香焦">香焦</option>
</select>
<script type="text/javascript">
$(function () {
$("select").bind(
"change", function () {
if ($(this).val() == "苹果")
$(this).css("background-color", "red");
else
$(this).css("background-color", "green");
})
});
</script>
</body>
</html>
调用live()方法绑定元素的事件
与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：
$(selector).live(event,[data],fun)
参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
例如，使用live()方法绑定，页面中按钮元素的单击事件，而这个按钮是通过追加的方式添加至页面的。如下图所示：
在浏览器中显示的效果：
从图中可以看出，虽然按钮元素是在事件绑定声明之后，并且是通过追加的方式添加至页面的，但由于使用的是live()方法绑定元素的事件，因此，仍然生效。
任务
我来试试，亲自使用live()方法绑定动态添加按钮元素的两个事件
在下列代码的第11行，使用live()方法绑定按钮元素的click和mouseout两个事件，在这两个事件中，按钮将设置为不可用状态。
调用toggle()方法实现动画切换效果
第一节我们学过实现元素的显示与隐藏需要使用hide()与show()，那么有没有更简便的方法来实现同样的动画效果呢？
调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：
$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
例如，调用toggle()方法以动画的效果显示和隐藏图片元素，如下图所示：
在浏览器中显示的效果：
从图中可以看出，当按钮显示内容为“隐藏”时，点击该按钮，将调用toggle()方法以动画的方式隐藏图片元素，隐藏成功后，按钮显示的内容变为“显示”
使用slideToggle()方法实现图片“变脸”效果
使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：
$(selector).slideToggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
例如，在页面中，使用slideToggle()方法实现图片“变脸”效果，如下图所示：
在浏览器中显示的效果：
从图中可以看出，当点击第一张图片时，向上滑动收起该图片，当收起完成时，触发回调函数，调用第二张图片的slideToggle()方法，向下滑动显示第二张图片。
任务
我来试试，亲自调用slideToggle()方法实现“标题”下“内容”的滑动切换
在下列代码的第24行，调用slideToggle()方法实现“内容”区的滑动切换。
调用animate()方法制作简单的动画效果
调用animate()方法可以创建自定义动画效果，它的调用格式为：
$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
例如，调用animate()方法以由小到大的动画效果显示图片，如下图所示：
在浏览器中显示的效果：
从图中可以看出，调用animate()方法，以渐渐放大的动画效果显示图片元素，当动画执行完成后，通过回调函数在页面的<div>元素中显示“执行完成!”的字样。
任务
我来试试，亲自调用animate()方法制作一个渐渐放大的正方体
在下列代码的第13行，调用animate()方法制作一个渐渐放大的正方体。
动画制作原理：
<script type="text/javascript">
$(function () {
$("h3").animate({
width: "100px",
height: "30px"
},
5000, function () {
$("#tip").html("动画执行成功!");
});
});
</script>
使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：
load(url,[data],[callback])
参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。如下图所示：
在浏览器中显示的效果：
从图中可以看出，当点击“加载”按钮时，通过调用load()方法向服务器请求加载fruit.html文件中的内容，当加载成功后，先显示数据，并将按钮变为不可用。
任务
我来试试，亲自调用load()方法加载服务器文件中指定的元素内容
在下列代码的第23行，调用load()方法加载服务器文件 http://www.imooc.com/data/fruit_part.html 中全部的li元素内容。
使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
例如，点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。如下图所示：
在浏览器中显示的效果：
从图中可以看出，当点击“加载”按钮时，通过getJSON()方法调用服务器中的sport.json文件，获取返回的data文件数据，并遍历该数据对象，以data[“name”]取出数据中指定的内容，显示在页面中。
任务
我来试试，亲自调用getJSON()方法获取服务器中JSON格式文件的内容。
在下列代码的第21行，调用getJSON()方法获取服务器中 http://www.imooc.com/data/sport.json 的JSON格式文件中的数据，并将数据中指定的内容显示页面中。
- ?不会了怎么办
