@Secretmm
2016-12-19T09:47:32.000000Z
字数 94614
阅读 1030
web前端 js/jquery
jQuery选择器的格式如下：
jQuery选择器是跟CSS选择器完全一样的！我们只需要把CSS选择器的写法套进$("")中，就变成了jQuery选择器，非常简单！
$("选择器")
元素选择器：$("元素名")
id选择器： $("#id名")
class选择器：$(".类名")
群组选择器：$("选择器1 , 选择器2 ,……,选择器n")
*选择器：称为“全选选择器”，用于选择所有的元素，eg：
*{padding:0;margin:0;}
jQuery层次选择器
选择器 说明
$("M N") 后代选择器，选择M元素内部后代N元素（所有N元素【儿子，孙子..】）
$("M>N") 子代选择器，选择M元素内部子代N元素（所有第1级N元素【儿子】）
$("M~N") 兄弟选择器，选择M元素后所有的同级N元素
$("M＋N") 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）
注意以下2点：
（1）$("M~N")可以使用“$(M元素).nextAll()”代替；
（2）$("M+N")可以使用“$(M元素).next()”代替；
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默认的padding和margin*/
*{padding:0;margin:0}
/*去除列表项默认符号*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li+li").css("border-top", "2px solid red");
})
</script>
</head>
<body>
<ul>
<li>第1个元素</li>
<li>第2个元素</li>
<li>第3个元素</li>
<li>第4个元素</li>
<li>第5个元素</li>
<li>第6个元素</li>
</ul>
</body>
</html>
分析：
$("li+li")使用的是相邻选择器，表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素，所以对于最后一个li元素，它是没有下一个li元素可以选取的。$("li+li").css("border-top, "2px solid red")达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧，在实际开发中如果我们想要在两两元素之间实现什么效果，我们经常会用到这个技巧！大家请一定不要浪费这个强大的技巧！
选择器 说明
$("selector[attr]") 选择包含给定属性的元素
$("selector[attr='value']") 选择给定的属性是某个特定值的元素
$("selector[attr != 'value']") 选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器，需要同时满足多个条件时使用
selector指的是选择器，attr指的是属性（attribute），value指的是属性值。属性选择器最常见于表单操作
[元素类型与E相同，不需要考虑辈分，只需要考虑出现的顺序]
$("")
jQuery简单伪类选择器
伪类选择器 说明
E:not(selector) 选择除了某个选择器之外的所有元素
E:first或first() 选择某元素的第一个元素（非子元素）
E:last或last() 选择某元素的最后一个元素（非子元素）
E:odd 选择某元素的索引值为奇数的元素
E:even 选择某元素的索引值为偶数的元素
E:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
E:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始
E:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
E:header 选择h1~h6的标题元素
E:animated 选择所有正在执行动画效果的元素
E:root 选择页面的根元素
E:target 选择当前活动的目标元素（锚点）
[元素类型不需要与E相同，只需要考虑辈分]
第1类子元素伪类选择器
$("")
选择器 说明
E:first-child 选择父元素的第1个子元素
E:last-child 选择父元素的最后1个子元素
E:nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even”
E:only-child 选择父元素中唯一的子元素（该父元素只有一个子元素）
[元素类型与E相同，必须同辈分]
第2类子元素伪类选择器
选择器 说明
E:first-of-type 选择同元素类型的第1个同级兄弟元素
E:last-of-type 选择同元素类型的最后1个同级兄弟元素
E:nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”
E:only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）
选择器 说明
E:hidden 选取所有不可见元素
E:visible 选取所有可见元素，与:hidden相反
“:hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#list *
{
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("#list :hidden").css("display", "block");
})
})
</script>
</head>
<body>
<div id="list">
<div>（1）HTML</div>
<p>（2）CSS</p>
<span>（3）JavaScript</span>
</div>
<input id="btn" type="button" value="显示" />
</body>
</html>
内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
jQuery内容伪类选择器
选择器 说明
E:contains(text) 选择包含给定文本内容的元素
E:has(selector) 选择含有选择器所匹配元素的元素
E:empty 选择所有不包含子元素或者不包含文本的元素
E:parent 选择含有子元素或者文本的元素（跟:empty相反）
一、:contains()
在jQuery中，我们可以使用:contains()选择器来选择包含指定文本内容的元素。
语法：
$("E:contains(text)")
说明：
E表示元素名，text表示所包含的文本内容。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默认外边距以及内边距*/
*{padding:0;margin:0;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("p:contains(jQuery)").css("background-color", "red");
})
</script>
</head>
<body>
<div>jQuery入门教程</div>
<p>write less do more</p>
<p>从JavaScript到jQuery</p>
<div>欢迎来到绿叶学习网</div>
</body>
</html>
分析：
$("p:contains(jQuery)")表示选择包含“jQuery”这一个文本内容的p元素。
二、:has(selector)
在jQuery中，我们可以使用E:has(selector)选择器来选择“符合条件（selector）”的元素（选择内部含有“selector”的E元素）。
语法：
$("E:has(selector)")
说明：
selector表示一个 jQuery选择器表达式。所谓的jQuery选择器表达式，说白了就是我们在前几章所学到的选择器。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默认外边距以及内边距*/
*{padding:0;margin:0;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("div:has(span)").css("background-color", "red");
})
</script>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
<div>
<p>这是一个段落</p>
<span>这是一个span</span>
</div>
</body>
</html>
分析：
$("div:has(span)")表示选择内部含有span元素的div元素。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默认padding以及margin*/
*{padding:0;margin:0;}
/*去除列表项符号*/
ul{list-style-type:none;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("div:has(#red,#yellow)").css("background-color", "red");
})
</script>
</head>
<body>
<div><span id="red">红色red</span></div>
<div><span>橙色orange</span></div>
<div><span id="yellow">黄色yellow</span></div>
<div><span>绿色green</span></div>
<div><span>蓝色blue</span></div>
<div><span>紫色purple</span></div>
</body>
</html>
分析：
$("div:has(#red,#yellow)")表示选择内部含有id为red和id为yellow子元素的div元素。E:has(selector)中的selector是一个群组选择器。
三、E:empty
在jQuery中，我们可以使用E:empty选择器选择所有“没有子元素”并且“没有文本”的空元素。
注意，只要内部有子元素或者文本内容，使用E:empty都不会被选中。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("td:empty").css("background-color", "red");
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
分析：
$("td:empty")表示选择内部没有文本内容页没有子元素的td元素。
四、E:parent
在jQuery中，我们可以使用E:parent选择器选择“含有子元素”或者“含有文本”的元素。E:parent选择器跟E:empty选择器是相反的。
注意，只要元素中有子元素或者文本内容，使用E:parent都会被选中。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,tr,td
{
border:1px solid silver;
}
td
{
width:60px;
height:60px;
line-height:60px;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("td:parent").css("background-color", "red");
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
分析：
$("td:parent")表示选择内部有文本内容页没有子元素的td元素。
选择器 说明
E:input 选择所有input元素
E:button 选择所有普通按钮，即type="button"的input元素
E:submit 选择所有提交按钮，即type="submit"的input元素
E:reset 选择所有重置按钮，即type="reset"的input元素
E:text 选择所有单行文本框
E:textarea 选择所有多行文本框
E:password 选择所有密码文本框
E:radio 选择所有单选按钮
E:checkbox 选择所有复选框
E:image 选择所有图像域
E:hidden 选择所有隐藏域
E:file 选择所有文件域
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("input:checkbox").attr("checked","checked");
})
</script>
</head>
<body>
<p>喜欢的水果：
<label><input type="checkbox"/>苹果</label>
<label><input type="checkbox"/>西瓜</label>
<label><input type="checkbox"/>蜜桃</label>
<label><input type="checkbox"/>梨子</label>
</p>
<p>性别：
<label><input type="radio" name="gendar"/>男</label>
<label><input type="radio" name="gendar"/>女</label>
</p>
</body>
</html>
分析：
$("input:checkbox")表示选择所有复选框元素，attr("checked","checked")表示设置复选框的checked属性值为checked。
jQuery表单属性伪类选择器
选择器 说明
E:checked 选择所有被选中的表单元素，一般用于radio和checkbox
Eoption:selected 选择所有被选中的option元素
E:enabled 选择所有可用元素，一般用于input、select和textarea
E:disabled 选择所有不可用元素，一般用于input、select和textarea
E:read-only 选择所有只读元素，一般用于input和textarea
E:focus 选择获得焦点的元素，常用于input和textarea
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
var a = $("input:checked").val();
alert(a);
})
</script>
</head>
<body>
<p>喜欢的水果：
<label><input type="checkbox" value="苹果"/>苹果</label>
<label><input type="checkbox" value="西瓜" checked="checked"/>西瓜</label>
<label><input type="checkbox" value="蜜桃"/>蜜桃</label>
<label><input type="checkbox" value="梨子"/>梨子</label>
</p>
</body>
</html>
分析：
$("input:checked").val()表示选择“被选中”的单选框或复选框（因为只有单选框和复选框有checked属性），并且获取表单元素的value值。val()方法用于获取表单元素的value值，我们在下一章的“jQuery内容操作”这一节会详细讲解。
对于其他表单属性伪类选择器用法跟:checked一样，在此不再累赘说明。不过我们可以参考一下CSS3教程中“UI元素状态伪类选择器”这一章
在jQuery中，关于元素属性的操作共有3种：是元素属性，不是css属性！！那么问题来了，元素属性是什么呢？？？
（1）获取元素属性；
（2）设置元素属性；
（3）删除元素属性；
一、获取元素属性
语法：
$("").attr("属性名")
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn_src").click(function () {
alert($("img").attr("src"));
});
$("#btn_alt").click(function () {
alert($("img").attr("alt"));
});
})
</script>
</head>
<body>
<img src="jquery.png" alt="jquery标志"/><br />
<input id="btn_src" type="button" value="获取src属性"/>
<input id="btn_alt" type="button" value="获取alt属性"/>
</body>
</html>
分析：
这里我们使用attr()方法获取img元素的src和alt这两个属性值。
二、设置元素属性
语法：
$("").attr("属性名","属性值")
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("a").attr("title", "欢迎来到绿叶学习网");
})
</script>
</head>
<body>
<div id="main">
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</div>
</body>
</html>
分析：
这里使用attr()方法为a标签添加了一个title属性。
三、删除元素属性
语法：
$("").removeAttr("属性名");
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("a").removeAttr("title");
})
</script>
</head>
<body>
<a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a>
</body>
</html>
分析：
在这个例子中，我们使用了removeAttr()方法把a标签的title属性删除。
此外在jQuery中，除了可以使用attr()方法来操作元素的属性之外，还可以使用prop()方法。prop()方法和attr()方法语法相同，其中prop()用于获取和设置元素属性，removeProp()用于删除元素的属性。
但是attr()和prop()这2种方法有着本质的区别，其中attr()方法用于操作元素的固有属性，所谓的“固有属性”指的是元素本身具有的属性如a标签的href、target、title等。而prop()方法用于操作元素的自定义属性，所谓的“自定义属性”指的是用户自己定义的一些属性。
获取内容！！！！！！！！！！
一、html()和text()
1、html()方法
在jQuery中，我们可以用html()方法来获取和设置某个元素中的“HTML内容”。
语法：
$("").html() //获取HTML内容
$("").html("HTML内容"); //设置HTML内容
说明：
html()方法跟JavaScript中的innerHTML是一样的效果，只不过html()是jQuery的实现方式，innerHTML是JavaScript的实现方式。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//使用html()获取HTML内容
var a = $("#p1").html();
alert(a);
});
$("#btn2").click(function () {
//使用html()设置HTML内容
$("#p2").html("<strong>jQuery入门教程</strong>");
})
})
</script>
</head>
<body>
<p id="p1"><strong>绿叶学习网</strong></p>
<p id="p2">绿叶学习网</p>
<hr />
获取p1的值：<input type="button" id="btn1" value="获取"/><br />
设置p2的值：<input type="button" id="btn2" value="设置"/>
</body>
</html>
2、text()方法
在jQuery中，我们可以使用text()方法来获取和设置某个元素的“文本内容”。
语法：
$("").text() //获取文本内容
$("").text("文本内容") //设置文本内容
说明：
text()方法跟JavaScript中的innerText是一样的效果，只不过text()是jQuery的实现方式，innerText是JavaScript的实现方式。
此外还需要注意一点，JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。这也体现了jQuery完美的兼容性。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//使用html()获取文本内容
var a = $("#p1").text();
alert(a);
});
$("#btn2").click(function () {
//使用html()设置文本内容
$("#p2").text("<strong>jQuery入门教程</strong>");
})
})
</script>
</head>
<body>
<p id="p1"><strong>绿叶学习网</strong></p>
<p id="p2">绿叶学习网</p>
<hr />
获取p1的值：<input type="button" id="btn1" value="获取"/><br />
设置p2的值：<input type="button" id="btn2" value="设置"/>
</body>
</html>
分析：
关于html()和text()两个属性的区别，我们用一个表格很能很清晰看出来了：
html()和text()属性返回值的区别:
HTML代码 html()返回值 text()返回值
<div>绿叶学习网</div> "绿叶学习网" "绿叶学习网"
<div><b>绿叶学习网</b></div> "<b>绿叶学习网</b>" "绿叶学习网"
<div><b></b></div> "<b></b>" ""（空字符串）
二、val()
表单元素不像普通元素，它们的值都是通过表单元素的value属性来传递的。因此我们不能使用html()和text()这两种方法来获取元素的内容（值）。
在jQuery中，我们可以使用val()来获取或设置“表单元素”的值。
语法：
$("").val() //获取表单元素
$("").val("表单元素的值") //设置表单元素
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//使用val()获取表单元素的值
var a = $("#txt1").val();
alert(a);
});
$("#btn2").click(function () {
//使用val()设置表单元素的值
$("#txt2").val("jQuery入门教程");
})
})
</script>
</head>
<body>
<input id="txt1" type="text" value="绿叶学习网"/><br />
<input id="txt2" type="text"/><br />
获取第1个文本框的值：<input id="btn1" type="button" value="获取" /><br />
设置第2个文本框的值：<input id="btn2" type="button" value="设置" />
</body>
</html>
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
var a = $("#lvye").html();
var b = $("#lvye").text();
$("#txt1").val(a);
$("#txt2").val(b);
})
</script>
</head>
<body>
<div id="lvye"><strong>绿叶学习网</strong></div>
.html内容是：<input id="txt1" type="text"/><br/>
.text内容是：<input id="txt2" type="text"/>
</body>
</html>
分析：
对于普通元素，我们可以使用html()和text()来获取元素的内容或者值。但是对于表单元素来说，想要“获取”或者“设置”元素的值，就必须用val()方法。
一、获取CSS属性值
语法：
$("").css("属性")
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var str = $("p").css("color");
alert("p元素的color属性值是：" + str);
})
})
</script>
</head>
<body>
<p>绿叶学习网jQuery入门教程</p>
<input id="btn" type="button" value="获取"/>
</body>
</html>
二、设置CSS属性值
设置某个元素的CSS属性值，分为2种情况：（1）设置单个CSS属性；（2）设置多个CSS属性。
1、设置单个CSS属性
语法：
$().css("属性","属性值")
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("ul li:nth-child(odd)").css("color","red");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="btn" type="button" value="设置" />
</body>
</html>
2、设置多个CSS属性
语法：
$().css({"属性1":"属性值1","属性2":"属性值2",……})
一、添加类名
在jQuery中，我们可以使用addClass()方法为元素添加类名。
语法：
$().addClass("类名")
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.myLi
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("ul li:nth-child(odd)").addClass("myLi");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="btn" type="button" value="添加" />
</body>
分析：
大家拿这个例子，跟设置多个CSS属性值的例子对比一下就知道：当需要使用jQuery为某些元素设置太多的CSS样式时，如果使用css()这个方法，jQuery里面的代码会显得比较臃肿。因此，我们更倾向于先在CSS代码中定义一个类，在这个类中定义相应的CSS代码，然后再使用jQuery对这个类名进行相应的添加、删除、切换，从而达到对样式进行批量操作，这就是CSS类名操作的真正意义所在！
二、删除类名
在jQuery中，我们可以使用removeClass()为元素删除类名。
语法：
$().removeClass("类名")
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.myLi
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
$("ul li:nth-child(odd)").addClass("myLi");
});
$("#remove").click(function () {
$("ul li:nth-child(odd)").removeClass("myLi");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="add" type="button" value="添加" />
<input id="remove" type="button" value="删除" />
</body>
</html>
分析：
在这里，我们使用addClass()方法为元素添加类名，使用removeClass()方法为元素删除类名，很方便地对元素的大量样式进行一次性地操作。
三、切换类名
在jQuery中，我们可以使用toggleClass()方法为元素切换类名。toggle就是“切换”的意思，在后面课程里面我们会大量接触这个单词，例如toggle()、slideToggle()等等，希望大家留个心眼理解一下。
语法：
$().toggleClass("类名")
说明：
toggleClass()方法用于检查元素是否具有某个类名。如果类名不存在，则为该元素添加类名；如果类名已存在，则为该元素删除类名。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.myLi
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
$("ul li:nth-child(odd)").toggleClass("myLi");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="add" type="button" value="切换" />
</body>
</html>
分析：
这里使用toggleClass()方法来切换类名，使得元素可以在“默认样式”以及“class样式”之间来回切换。我们点击一次“切换”按钮，元素就会切换到类名为myLi的样式，然后再点击一次“切换”按钮，元素又会切换到默认样式。
从这一节的学习我们知道，使用jQuery操作CSS类名是相当有用的。我们把一大块CSS代码封装到一个类中，这样使得我们每次只需要对类名进行操作即可，而无需在jQuery中使用css()方法编写大量的样式控制代码，使得我们的jQuery代码精简便于维护。当然，当样式较少的时候，我们还是使用css()方法比较方便。
总结一下：使用jQuery操作元素样式时，当样式比较少，建议使用“CSS属性操作”；当样式比较多时，建议使用“CSS类名操作”。
width()和height()一、元素的宽度
在jQuery中，如果我们想要“获取”或者“设置”元素的宽度，共有3种方法：【width指内容的width】
（1）width();
（2）innerWidth();
（3）outerWidth();
其实，这3种方法是根据盒子模型进行区分的。
width()、innerWidth()、outerWidth()三种方法区别
方法 宽度范围
width() width
innerWidth() width + padding
outerWidth() width + padding + border
对于这3种获取或设置元素宽度的方法中，一般情况下我们只用到width()方法 ，对于其他两种方法，了解一下即可。此外还要注意一点，只有width()方法可以用于window或document对象。
语法：
$("").width() //获取元素的宽度
$("").width(n) //设置元素的宽度，n是一个整数，表示npx
说明：
width()方法和css("width")方法类似，不过width()方法获得的宽度值不带单位（仅仅是数字），而css("width")获取的宽度值带“px”作为单位，例如：
$().width(); //返回数字，例如100
$().css("width"); //返回字符串，例如“100px”
由于width()方法获得的宽度值是一个数字，使得我们可以方便用来进行数值运算，这在元素定位、计算距离这些方面非常的有用。反而在这种时候，用css("width")就显得很麻烦了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#box1,#box2
{
display:inline-block;
width:100px;
height:60px;
border:1px solid gray;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//width()方法获取元素的宽度
var a = $("#box1").width();
alert(a);
});
$("#btn2").click(function () {
//width()方法设置元素的宽度
$("#box2").width(50);
});
})
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div><br />
获取第1个div的宽度：<input id="btn1" type="button" value="获取" /><br />
设置第2个div的宽度：<input id="btn2" type="button" value="设置" />
</body>
</html>
分析：
这里要注意一下，使用width()方法对元素设置宽度时不要加单位，像width(50px)这种写法是错误的，正常写法应该是width(50)。
二、元素的高度
在jQuery中，如果我们想要“获取”或者“设置”元素的高度，也有3种方法：
（1）height();
（2）innerHeight();
（3）outerHeight();
其实，这3种方法也是根据盒子模型进行区分的。
height()、innerHeight()、outerHeight()三种方法区别
方法 高度范围
height() height
innerHeight () height + padding
outerHeight () height + padding + border
对于这3种获取或设置元素高度的方法中，一般情况下我们只用到height()方法 ，对于其他两种方法，同样也是了解一下即可。此外还要注意一点，只有height()方法可以用于window或document对象。
语法：
$("").height() //获取元素的高度
$("").height(n) //设置元素的高度，n是一个整数，表示npx
offset()和position()在jQuery中，如果我们想要获取元素的位置，有2种方法：
（1）offset()；
（2）position()；
一、offset()
在jQuery中，我们可以使用offset()方法用于“获取”或“设置”元素相对于“当前文档”（也就是浏览器窗口）的偏移距离。
语法：
$("").offset().top;
$("").offset().left
说明：
$().offset()返回的是一个坐标对象，该对象有2个属性：top和left。
$().offset().top表示获取元素相对于当前文档“顶部”的距离。
$().offset().left表示获取元素相对于当前文档“左部”的距离。
这两种方法返回的都是一个数字（不带单位）。
二、position()
在jQuery中，我们可以使用position()方法来“获取”或“设置”当前元素相对于“其被定位的祖辈元素”的偏移距离。
语法：
$("").position().top
$("").position().left
说明：
$().position()返回的是一个坐标对象，该对象有2个属性：top和left。
$().position().top表示元素相对于被定位的祖辈元素的顶部的垂直距离。
$().position().left表示元素相对于被定位的祖辈元素的左部的水平距离。
这两种方法返回的都是一个数字（不带单位）。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#father
{
position:relative;
width:200px;
height:200px;
background-color:orange;
}
#son
{
position:absolute;
top:20px;
left:50px;
width:50px;
height:50px;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var top = $("#son").position().top;
var left = $("#son").position().left;
var str = "子元素相对父元素顶部距离是：" + top + "\n" + "子元素相对父元素左部距离是：" + left;
alert(str);
})
})
</script>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
分析：
当我们点击“获取”按钮之后，就可以获取所选元素相对父元素的垂直相对距离以及水平相对距离。在CSS定位布局中，如果我们对父元素设置position:relative，我们就可以使用position:absolute来设置子元素相对于父元素的定位距离，这就是我们常说的“外相对，内绝对”。如果大家对这个例子不太懂的话，建议先去打好CSS基础先。
在web应用开发中，获取元素的坐标是非常常见的操作。jQuery的offset()和position()的结合使用，方便我们快速获取元素坐标，必须予以重视
scrollTop()和scrollLeft()当一个元素的实际高度（或宽度）超过其显示区域的高度（或宽度）时，在一定设置下，浏览器会为该元素显示相应的垂直滚动条（或水平滚动条）
在jQuery中，我们可以使用scrollTop()来获取或设置元素相对于垂直滚动条顶部的距离，可以使用scrollLeft()来获取或设置元素相对于水平滚动条左部的距离。
语法：
$().scrollTop() //获取滚动距离
$().scrollTop(value) //设置滚动距离
说明：
scrollLeft()方法的用法跟scrollTop()方法一样。
scrollTop()和scrollLeft()获取的值是一个数字（不带单位），这个跟height()、width()是一样的。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{height:1800px;}
#box1,#box2
{
display:inline-block;
width:100px;
height:100px;
}
#box1
{
background-color:Red;
}
#box2
{
background-color:Orange;
position:fixed;
}
</style>
<script type="text/javascript" src="App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
//获取box2距离顶部的距离
var top = $("#box2").offset().top;
//根据滚动距离判断定位
$(window).scroll(function () {
//当滚动条距离大于box2距离顶部的距离时，设置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//当滚动条距离小于于box2距离顶部的距离时，设置相对定位
else {
$("#box2").css({ "position": "relative" });
}
});
})
</script>
</head>
<body>
<div id="box1"></div><br />
<div id="box2"></div>
</body>
</html>
分析：
[可以用于将导航栏一直置顶，不管页面怎么滚动，都出现在一个固定位置]
原理非常简单，当滚动条距离大于box2距离顶部的距离时，设置固定定位；当滚动条距离小于于box2距离顶部的距离时，设置相对定位
$(window).scroll(function () {
//滚动事件代码
}
上面这段代码表示“滚动条的滚动事件”。我们在后续课程中“jQuery事件”这一章会详细讲解，在这里我们只需要了解一下即可。$(this).scrollTop()中的this指的是window，等价于$(window).scrollTop()，表示获取滚动条距离浏览器窗口顶部的距离。
上面这个例子的开发技巧非常重要。我们常见到的回顶部特效、下拉固定特效等，其实就跟这个技巧有关，记得好好琢磨一下。
在jQuery中，对于创建节点，我们都是先用“$()方法”来创建一个节点，然后再通过append()、before()等方法把新创建的节点插入现有的节点中。
语法：
var e = $(html);
$().append(e);
说明：
$(html)中的html指的是“HTML标签字符串”。
append()方法表示向所选元素内部的“末尾”插入内容。对于append()方法，我们在下一节“jQuery插入节点”会详细给大家介绍。
举例1：创建简单节点
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var $li = "<li></li>";
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加"/>
</body>
</html>
分析：
当我们点击“添加”按钮，会往ul元素内部的“末尾”添加一个li元素。
在这里，我们使用一个变量$li来存储$("<li></li>")。大家注意一个变量命名规范，对于jQuery创建的节点，我们变量命名都习惯使用“$”开头，以表示这是一个jQuery对象。
举例2：创建复杂节点
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//注意对于复杂节点本身的属性就有双引号，所以我们这里使用单引号括起来
var $li = '<li><a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a></li>';
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a></li>
<li><a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a></li>
<li><a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a></li>
</ul>
<input id="btn" type="button" value="添加"/>
</body>
</html>
分析：
由于复杂节点的属性与属性值之间用的是双引号（如target="_blank"），因此我们构造HTML字符串的时候，最外面就不应该用双引号而是用单引号了。关于双引号和单引号的使用，请参考JavaScript入门教程中的“JavaScript基本数据类型”这一节。对于这些基本语法，jQuery和JavaScript是共通的，毕竟jQuery本身就是用JavaScript写的。
jQuery只需要使用“字符串”形式就能轻松创建任何复杂节点。学过JavaScript的同学都知道，jQuery这种创建节点的方式远远比JavaScript创建节点的方式更加方便直观。我们可以回去翻翻“JavaScript创建节点”这一节，然后跟jQuery创建节点的方式对比一下，体会一下jQuery的强大并且加深记忆。
在JavaScript中，插入节点只有appendChild()和insertBefore()这两种方法。但是jQuery却为我们插入节点提供了大量的方法，极大地方便了我们的操作。
在jQuery中，常见插入节点的方法共有4组：
（1）append()和appendTo()；
（2）prepend()和prependTo()；
（3）before()和insertBefore()；
（4）after()和insertAfter()；
这4组插入节点的方法都有所不同，其中（1）和（2）是“内部插入节点”，（3）和（4）是“外部插入节点”。下面我们一一给大家介绍。
一、append()和appendTo()
1、append()
append()表示向所选元素内部的“末尾”插入内容。
语法：
$(A).append(B)
说明：
$(A).append(B)表示在A内部的“末尾”插入B。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p{background-color:orange;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var $strong = "<strong>jQuery入门教程</strong>";
$("p").append($strong);
})
})
</script>
</head>
<body>
<p>绿叶学习网</p>
<input id="btn" type="button" value="append插入"/>
</body>
</html>
当我们点击“插入”按钮之后，得到的HTML结构如下：
<p>绿叶学习网<strong>jQuery入门教程</strong></p>
2、appendTo()
appendTo()跟append()类似，作用都是在所选元素内部的“末尾”插入内容。但是两者的“使用方式”却是颠倒操作。
语法：
$(A).appendTo(B)
说明：
$(A).appendTo(B)表示将A插入B内部的“末尾”。
append()和appendTo()作用一样。append()表示在元素中插入内容，而appendTo()表示将内容插入“到（to）”元素中。
var $strong = "<strong>jQuery入门教程</strong>";
$("p").append($strong);
var $strong = "<strong>jQuery入门教程</strong>";
$($strong).appendTo("p");
二、prepend()和prependTo()
1、prepend()
prepend()表示向所选元素内部的“开始”插入节点。
语法：
$(A).prepend(B)
说明：
$(A).prepend(B)表示在A内部的“开始”插入B。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p{background-color:orange;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var $strong = "<strong>jQuery入门教程</strong>";
$("p").prepend($strong);
})
})
</script>
</head>
<body>
<p>绿叶学习网</p>
<input id="btn" type="button" value="prepend插入"/>
</body>
</html>
分析：
当我们点击“插入”按钮之后，得到的HTML结构如下：
<p><strong>jQuery入门教程</strong>绿叶学习网</p>
2、prependTo()
prependTo()跟prepend()类似，作用都是在所选元素内部的“开始”插入内容。但是两者的“使用方式”却是颠倒操作。
语法：
$(A).prependTo(B)
说明：
$(A).prependTo(B)表示将A插入B内部的“开始”
三、before()和insertBefore()
1、before()
before()表示在所选元素外部“之前”插入节点。
语法：
$(A).before(B)
说明：
$(A).before(B)表示在A外部“之前”插入B。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p{background-color:orange;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var $strong = "<strong>jQuery入门教程</strong>";
$("p").before($strong);
})
})
</script>
</head>
<body>
<p>绿叶学习网</p>
<input id="btn" type="button" value="before插入"/>
</body>
</html>
分析：可以很清晰地知道before()方法是将内容插入元素的外部。当我们点击“插入”按钮之后，得到的HTML结构如下：
<strong>jQuery入门教程</strong>
<p>绿叶学习网</p>
2、insertBefore()
insertBefore()跟before()类似，作用也是在某个元素外部“之前”插入内容。但是两者的“使用方式”却是颠倒操作。
语法：
$(A).insertBefore(B)
说明：
$(A).insertBefore(B)表示将A插入B**外部“之前”**。
根据英文意思，我们也能很好区分before()和insertBefore()。before()表示在元素外插入内容，insertBefore()表示将内容插入元素外。
分析：
var $strong = "<strong>jQuery入门教程</strong>";
$("p").before($strong);
var $strong = "<strong>jQuery入门教程</strong>";
$($strong).insertBefore("p");
四、after()和insertAfter()
1、after()
after()表示在所选元素外部“之后”插入节点。
语法：
$(A).after(B)
说明：
$(A).after(B)表示在A**外部“之后”**插入B。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p{background-color:orange;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var $strong = "<strong>jQuery入门教程</strong>";
$("p").after($strong);
})
})
</script>
</head>
<body>
<p>绿叶学习网</p>
<input id="btn" type="button" value="after插入"/>
</body>
</html>
分析：
当我们点击“插入”按钮之后，得到的HTML结构如下：
<p>绿叶学习网</p>
<strong>jQuery入门教程</strong>
2、insertAfter()
insertAfter()跟after()作用类似，作用都是在某个元素外部“之后”插入内容。但是两者的“使用方式”却是颠倒操作。
语法：
$(A).insertAfter(B)
说明：
$(A).insertAfter(B)表示在A**外部“之后”**插入B。
分析：
var $strong = "<strong>jQuery入门教程</strong>";
$("p").after($strong);
var $strong = "<strong>jQuery入门教程</strong>";
$($strong).insertAfter("p");
在jQuery中，对于删除节点，我们有3种方法：
（1）remove()；
（2）detach()；
（3）empty()；
一、remove()
在jQuery中，我们可以使用remove()方法将某个节点删除。
语法：
$(A).remove()
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("ul li:eq(3)").remove();
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
<input id="btn" type="button" value="remove删除" />
</body>
</html>
分析：
$("ul li:eq(3)").remove()表示选择ul元素下的第4个li元素。对于eq()选择器，下标是从0开始的。eq()选择器非常实用，如果忘记的同学记得回去翻一下“jQuery简单伪类选择器”这一节。
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//remove()可以将所选元素删除，并且返回所选元素
var $li = $("ul li:eq(3)").remove();
$($li).appendTo("ul");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
<input id="btn" type="button" value="remove删除" />
</body>
</html>
分析：
关于remove()方法，还有一点需要注意，就是这个方法可以返回一个值，返回值类型为删除的jQuery节点对象。也就是说，虽然这个节点被删除了，但是还可以通过返回值来再次使用这个对象。
这里我们将删除后的元素赋值给变量$li，然后再使用appendTo()方法添加到ul元素内部末尾。
其实根据remove()方法这个特点，我们可以轻松实现互换某两个元素！请看下面一个简单例子。
举例3：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul li:nth-child(2),ul li:nth-child(4)
{
background-color:Orange;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//将内容为“CSS”这一个li删除并赋值给$li1
var $li1 = $("ul li:eq(1)").remove();
$($li1).insertAfter("ul li:eq(1)");
//将内容为“jQuery”这一个li删除并赋值给$li2
var $li2 = $("ul li:eq(3)").remove();
$($li2).insertBefore("ul li:eq(1)");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
<input id="btn" type="button" value="remove删除" />
</body>
</html>
分析：
这个例子实现了内容为“CSS”和“jQuery”这两个li元素的互换。技巧是借助“JavaScript”这一个li元素为参照物，然后使用我们上一节的“jQuery插入节点”的方法来实现。
虽然这段代码看着很简单，但是实际上需要注意的地方并不少，我们一步步来给大家分析。
当我们执行li1 = $("ul li:eq(1)").remove()这句代码之后，得到的HTML结构如下：
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
这个时候HTML结构已经变化，也就是说有些人试图使用("ul li:eq(1)")。
当我们执行$($li1).insertAfter("ul li:eq(1)")这句代码之后，得到的HTML结构如下：
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
当我们执var $li2 = $("ul li:eq(3)").remove()这句代码之后，得到的HTML结构如下：
<ul>
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>canvas</li>
</ul>
当我们执行li2).insertBefore("ul li:eq(1)")这句代码之后，得到的HTML结构如下：
<ul>
<li>HTML</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>CSS</li>
<li>canvas</li>
</ul>
二、detach()
在jQuery中，除了remove()方法之外，我们还可以使用detach()方法来将某个元素删除。
语法：
$(A).detach()
说明：
detach()方法和remove()方法作用相似，但是两者却有着本质上的区别。
remove()方法是“彻底”地删除元素。也就是说使用remove()方法，不仅元素会被删除，所绑定的事件都会被删除。
detach()方法是“半彻底”地删除元素，也就是说使用detach()方法，只有元素被删除，所绑定的事件并不会删除。
在这里，我们为每一个li元素添加一个click（单击）事件，点击任何一个li元素，都会弹出该li元素的文本内容。当我们点击“删除”按钮之后，“jQuery”这一项被添加到ul元素内部末尾。但是这个时候如果我们点击“jQuery”这一项时候，会发现之前所绑定的click事件消失了。
我们在“在线测试”中将remove()方法替换成detach()方法后，却可以发现li元素虽然被删除，但是如果重新添加使用，该元素所绑定的事件仍然存在。
终上所述，我们可以总结：当我们删除节点后，如果希望重新使用该节点，并且希望被删除的节点在重新使用后还能保留原来绑定的事件，那我们应该使用detach()而不是remove()。
三、empty()
remove()和detach()都是将某个元素删除。如果我们想要“清空”某个节点，则可以用到empty()方法。
在jQuery中，我们可以使用empty()方法清空元素内部的所有节点。
语法：
$(A).empty()
remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。
在jQuery中，如果我们想要复制某个节点，可以使用clone()方法。
语法：
$(A).clone()
说明：
其中clone()方法有一个布尔参数，默认值为false。
$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。
$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li").click(function () {
var txt = $(this).text();
alert(txt);
});
$("#btn").click(function () {
var $li = $("ul li:eq(3)").clone(true);
$($li).appendTo("ul");
// $("ul li:eq(3)").clone(true).appendTo("ul");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
<input id="btn" type="button" value="clone复制" />
</body>
</html>
分析：
在这个例子中，我们为li元素绑定了一个click事件。$("ul li:eq(3)").clone(true)表示复制所选的li元素，并且复制该li元素所绑定的事件。因此，当我们点击“复制”按钮之后，复制过去的li元素还保留之前所绑定的click事件。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
$(this).clone().appendTo("ul");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>canvas</li>
</ul>
</body>
</html>
分析：
我们随便点击其中一个列表项，该列表项会被复制，并且添加到ul元素内部末尾。但被复制出来的列表项不执行点击事件
在jQuery中，如果我们想要替换节点，有2种方法：
（1）replaceWith()；
（2）replaceAll()；
一、replaceWith()
replaceWith()方法可以将所选元素被替换成其他元素。
语法：
$(A).replaceWith(B)
说明：
$(A).replaceWith(B)表示用B来替换A。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("strong").replaceWith('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>');
});
})
</script>
</head>
<body>
<ul>
<li><strong>HTML</strong></li>
<li><strong>CSS</strong></li>
<li><strong>JavaScript</strong></li>
<li><strong>jQuery</strong></li>
<li><strong>canvas</strong></li>
</ul>
<input id="btn" type="button" value="replaceWith替换"/>
</body>
</html>
二、`replaceAll()`
replaceAll()跟replaceWith()相似，作用都是用来替换节点的。不过这两者的“使用方式”是颠倒操作。
语法：
$(A).replaceAll(B)
说明：
$(A).replaceAll(B)表示用A来替换B。
分析：
$("strong").replaceWith('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>');
$('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>').replaceAll("strong");
上面这两个代码是等价的。如果在替换节点之前，我们已经为元素绑定事件了，使用replaceWith()或replaceAll()之后，该元素所绑定的事件会消失。因此我们如果想要保留事件的话，则需要在新元素上重新绑定事件。
在jQuery中，如果我们想要将某个节点用其他标签包裹起来，共有3种方法：
（1）wrap()；
（2）wrapAll()；
（3）wrapInner()；
一、wrap()
wrap()方法表示将所选元素使用某个标签包裹起来。
语法：
$(A).wrap(B)
说明：
$(A).wrap(B)表示将A元素使用B元素包裹起来。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("strong").wrap("<em></em>")
});
})
</script>
</head>
<body>
<ul>
<li><strong>HTML</strong></li>
<li><strong>CSS</strong></li>
<li><strong>JavaScript</strong></li>
<li><strong>jQuery</strong></li>
<li><strong>canvas</strong></li>
</ul>
<input id="btn" type="button" value="wrap包裹"/>
</body>
</html>
分析：
$("strong").wrap("<em></em>")表示将strong标签使用em标签包裹起来，因此点击“包裹”按钮之后，实际的HTML代码如下：
<ul>
<li><em><strong>HTML</strong></em></li>
<li><em><strong>CSS</strong></em></li>
<li><em><strong>JavaScript</strong></em></li>
<li><em><strong>jQuery</strong></em></li>
<li><em><strong>canvas</strong></em></li>
</ul>
二、wrapAll()
注意了！wrapAll()跟wrap()这两种方法的作用是不等价的。wrap()方法是将所有元素进行单独的包裹，但是wrapAll()会将所有匹配的元素用一个元素来包裹！
<p>绿叶学习网</p>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
对于上面这段代码，如果使用$("p").wrap("<div></div>")，则会得到以下结果：
<div><p>绿叶学习网</p><div>
<div><p>绿叶学习网</p><div>
<div><p>绿叶学习网</p><div>
如果使用$("p").wrapAll("<div></div>")，则得到以下结果：
<div>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
</div>
如果使用$("p").wrapInner("<div></div>")，则得到以下结果：
<div>
<p><div>绿叶学习网</div></p>
<p><div>绿叶学习网</div></p>
<p><div>绿叶学习网</div></p>
</div>
三、wrapInner()方法
wrap()方法表示将所选元素使用某个标签包裹起来，wrapInner()方法表示将所选元素“所有内部元素”使用某个标签包裹起来。
语法：
$(A).wrapInner(B)
说明：
$(A).wrapInner(B)表示将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身）。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("strong").wrapInner("<em></em>")
});
})
</script>
</head>
<body>
<ul>
<li><strong>HTML</strong></li>
<li><strong>CSS</strong></li>
<li><strong>JavaScript</strong></li>
<li><strong>jQuery</strong></li>
<li><strong>canvas</strong></li>
</ul>
<input id="btn" type="button" value="wrapInner包裹" />
</body>
</html>
$("strong").wrapInner("<em></em>")表示将strong标签“所有内部子元素”使用em标签包裹起来，因此点击“包裹”按钮之后，实际的HTML代码如下：
<ul>
<li><strong><em>HTML</em></strong></li>
<li><strong><em>CSS</em></strong></li>
<li><strong><em>JavaScript</em></strong></li>
<li><strong><em>jQuery</em></strong></li>
<li><strong><em>canvas</em></strong></li>
</ul>
在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。
语法：
$().each(callback)
说明：
参数callback是一个function函数。该函数可以接受一个形参index，此形参为遍历元素的序号（从0开始）。如果需要访问元素中的属性，可以借助形参index，然后配合this关键字来实现元素属性的获取和设置。
each()方法完整语法如下：
$().each(function(index){
……
})
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("li").each(function (index) {
var txt = "这是第" + (index + 1) + "个li元素";
$(this).text(txt);
});
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加内容" />
</body>
</html>
举例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//定义一个数组
var arr = new Array("HTML", "CSS", "JavaScript", "jQuery", "canvas");
//使用each()将数组元素内容一一赋值给对应的li元素
$("li").each(function (index) {
var txt = arr[index];
$(this).text(txt);
});
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加内容" />
</body>
</html>
一、创建节点
在jQuery中，对于创建节点，我们都是先用“$()方法”来创建一个节点，然后再通过append()、before()等方法把新创建的节点插入现有的节点中。
语法：
var e = $(html);
$().append(e);
说明：
$(html)中的html指的是“HTML标签字符串”。
二、插入节点
在jQuery中，常见插入节点的方法共有4组：
（1）append()和appendTo()；
（2）prepend()和prependTo()；
（3）before()和insertBefore()；
（4）after()和insertAfter()；
这4组插入节点的方法都有所不同，其中（1）和（2）是“内部插入节点”，（3）和（4）是“外部插入节点”。
三、删除节点
在jQuery中，对于删除节点，我们有3种方法：
（1）remove()；
（2）detach()；
（3）empty()；
当我们删除节点后，如果希望重新使用该节点，并且希望被删除的节点在重新使用后还能保留原来绑定的事件，那我们应该使用detach()而不是remove()。
remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。
四、复制节点
在jQuery中，如果我们想要复制某个节点，可以使用clone()方法。
语法：
$(A).clone()
说明：
其中clone()方法有一个布尔参数，默认值为false。
$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。
$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。
五、复制节点
在jQuery中，如果我们想要替换节点，有2种方法：
（1）replaceWith()；
（2）replaceAll()；
$(A).replaceWith(B)表示用B来替换A。$(A).replaceAll(B)表示用A来替换B。
六、包裹节点
在jQuery中，如果我们想要将某个节点用其他标签包裹起来，共有3种方法：
（1）wrap()；//每个包裹在外部
（2）wrapAll()；//一个在外部包裹全部
（3）wrapInner()；//每个包裹在内部
七、遍历节点
在jQuery中，我们可以使用each()方法来轻松实现元素的遍历操作。
语法：
$().each(callback)
each()方法完整语法如下：
$().each(function(index){
……
})
在jQuery中，对于页面载入事件，我们使用$(document).ready()方法来替代JavaScript中的window.onload方法，但是这不是简单的替换。$(document).ready()和window.onload这2个方法功能相似，但是却有着明显的区别。
一、window.onload与$(document).ready()
1、JavaScript的window.onload方法
window.onload方法：在页面所有DOM元素（包括图片等外部文件）加载完成之后才执行，此时我们才可以操作DOM。也就是说，除了元素加载完成（说白了就是HTML代码），元素所关联的文件（如img元素就关联了图片）也必须加载完成之后，才会执行window.onload方法。
2、jQuery的$(document).ready()方法
$(document).ready()方法：在页面所有DOM元素（不包括图片等外部文件）加载完成就可以执行，此时我们就可以操作DOM。
$(document).ready()仅仅是DOM元素加载完成就可以执行，而window.onload除了DOM元素加载完成外还需要等待所有外部文件加载完成才可以执行。
很明显我们可以知道，使用$(document).ready()相对window.onload来说，可以极大地提高页面的响应速度，执行效率非常高。
拿咱们美女经常逛的淘宝网来说，每个页面都有N多大图，如果使用JavaScript的window.onload方法来处理，那么美女们必须等到每一张图片都加载完成才可以执行操作。这个时候，浏览器崩溃了，美女们崩溃了，马云也跟着崩溃了……
但是使用jQuery的$(document).ready()方法就不会这样，我们不需要等到每一张图片加载完成，而是只需要等到DOM元素加载完成就可以执行操作了（也就加载一点HTML代码的事情，能有多大？）。
二、ready()方法的4种写法
在jQuery中，对于ready()方法，共有4种写法：
（1）写法一：
$(document).ready(function(){
//代码部分
})
分析：
这种代码形式是最常见的，其中$(document)表示“选取document”，然后调用jQuery对象的ready()方法。
这个代码说白了，就是在ready()方法的括号内插入一个function(){}。也就是说在ready()方法中，传入的参数是一个匿名函数。没错，函数也可以当做参数被传入另外一个函数内。
（2）写法二：
jQuery(document).ready(function(){
//代码部分
})
分析：
在jQuery中，$就是指jQuery。因此我们可以使用$来代替jQuery，两者是等价的。
（3）写法三：
$(function(){
//代码部分
})
（4）写法四：
jQuery(function(){
//代码部分
})
在jQuery中，最常用的是写法三。我们也建议大家使用$(function(){})这种形式，方便简洁。
$(document).ready()是jQuery中最重要的一个方法，可以极大地提高页面的加载速度。
鼠标事件 说明
click 鼠标单击事件
dbclick 双击事件
mouseover 移入事件
mouseout 移出事件
mousemove 移动事件
mousedown 按下事件
mouseup 松开事件
从上面这个表， 我们可以发现：jQuery中的事件类型比普通的JavaScript事件类型少了“on”前缀。例如，鼠标单击事件在jQuery中对应的是click()方法，而在JavaScript中对应的是onclick()。其实，jQuery所有事件都有这个特点。
jQuery鼠标事件语法如下（以click事件为例），我们都是往事件方法中插入一个匿名函数function(){}，语法形式很简单：$().click(function(){})
一、单击事件
很多初学者误以为只有表单按钮才有鼠标单击事件，其实在jQuery中，任何元素都可以添加单击事件。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#btn
{
display:inline-block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
color:White;
background-color:Orange;
font-weight:bold;
border-radius:3px;
cursor:pointer;
}
#btn:hover{background-color:#FF8D12;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert("表单提交成功！");
});
})
</script>
</head>
<body>
<div id="btn">提交表单</div>
</body>
</html>
分析：
在这里，我们使用div元素模拟了一个按钮，然后为按钮添加单击事件。在实际开发中，我们更倾向于使用div元素模拟各种表单按钮，而不是使用input标签这类的按钮。小伙伴们要非常清楚这一点。
此外还需要记住一点：任何元素我们都可以为它添加单击事件！
二、鼠标移入和移出事件
1、mouseover和mouseout
在jQuery中，对于鼠标的移入和移出事件，我们最常使用的是mouseover和mouseout。这2个事件经常都是配合使用的，分别控制鼠标的“移入”和“移出”2种状态。例如在下拉菜单中，鼠标移入一级菜单时会显示对应的二级下拉菜单，鼠标移出一级菜单时二级下拉菜单就会收起来。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").mouseover(function () {
$("p").css("display","block");
});
$("h3").mouseout(function () {
$("p").css("display", "none");
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3>绿叶学习网简介</h3>
<p>绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。绿叶学习网跟其他垃圾采集站不一样，绿叶学习网中的每一个课程、每一篇文章，甚至每一个知识点，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人呕心沥血在一遍一遍地编辑，为的是给广大网站爱好者提供最精华的知识。</p>
</div>
</body>
</html>
分析：
这里使用了mouseover和mouseout分别定义了鼠标的移入和移出事件。当鼠标移入标题的时，内容块会显示；当鼠标移出标题时，内容块会隐藏。
$(function () {
$("h3").mouseover(function () {
$("p").css("display","block");
});
$("h3").mouseout(function () {
$("p").css("display", "none");
});
})
对于上面这段代码，我们可以使用jQuery链式调用的方式：
$(function () {
$("h3").mouseover(function () {
$("p").css("display","block");
}).mouseout(function () {
$("p").css("display", "none");
});
})
我们在“jQuery复制节点”这一节已经接触过链式调用的方式了。在jQuery中，如果“同一个”jQuery对象有N个操作，我们就可以使用像上面这种“链式操作”的方式。
2、mouseenter和mouseleave
在jQuery中，除了mouseover和mouseout之外，还有一组移入移出事件：mouseenter和mouseleave。
mouseenter事件在鼠标进入某个元素的时候就会触发，这个跟mouseover事件相似。但是这两者也有区别：mouseover事件在鼠标移入“所选元素及其后代子元素”时都会触发；mouseenter事件只有鼠标移入“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。
mouseleave事件在鼠标移出某个元素的时候就会触发，这个跟mouseout事件相似。但是这两者也有区别：mouseout事件在鼠标移出“所选元素及其后代子元素”时都会触发；mouseleave事件只有鼠标移出“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
div
{
display:inline-block;
width:200px;
padding:30px;
background-color:#F1F1F1;
}
.over{margin-bottom:20px;}
p{background-color:white;}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
var x = 0;
var y = 0;
$(function () {
$(".over").mouseover(function () {
$(".over span").text(x += 1);
});
$(".enter").mouseenter(function () {
$(".enter span").text(y += 1);
});
})
</script>
</head>
<body>
<div class="over">
<p>mouseover触发个数：<span></span></p>
</div><br />
<div class="enter">
<p>mouseenter触发个数：<span></span></p>
</div>
</body>
</html>
分析：
在这个例子中，我们可以清楚地看到鼠标移入“所选元素”或者“所选元素的子元素”都会触发mouseover事件，但是只有鼠标移入“所选”元素的时候才会触发mouseenter事件。
在实际开发过程中，“mouseover和mouseout”与“mouseenter和mouseleave”这两组移入移出事件并没有多大区别，对于同样一个效果，都可以实现。不过一般情况下，更倾向于使用“mouseover和mouseout”。
三、鼠标按下和松开事件
在jQuery中，鼠标的按下和松开事件分别是mousedown和mouseup。其中mousedown表示鼠标按下的一瞬间所触发的事件，而mouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，对于鼠标来说，只有“按下”才有“松开”这一说。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").mousedown(function () {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3>绿叶学习网简介</h3>
<p>绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。绿叶学习网跟其他垃圾采集站不一样，绿叶学习网中的每一个课程、每一篇文章，甚至每一个知识点，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人呕心沥血在一遍一遍地编辑，为的是给广大网站爱好者提供最精华的知识。</p>
</div>
</body>
</html>
分析：
在jQuery中，slideToggle()方法通过使用滑动效果（高度变化）来切换元素的可见状态。
在jQuery中，常用的键盘事件有3种：
（1）keypress事件；[按下键事件，不包括功能键]
（2）keydown事件；[按下键事件，包括功能键]
（3）keyup事件；[放开键事件，包括功能键]
一般情况先，jQuery都是使用这3个事件来捕获键盘事件的。对于这3个事件，有一定的先后顺序：keydown→keypress→keyup。
一、keypress事件
在jQuery中，keypress事件是在键盘上的某个键被按下到松开“整个过程”中触发的事件。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(window).keypress(function (event) {
document.write("你输入的字符是：" + String.fromCharCode(event.which));
});
})
</script>
</head>
<body>
</body>
</html>
分析：
这个例子使用了keypress事件来获取用户按下某个键的信息。其中event参数用于获取事件的基本信息.
event.which用于获取按下了哪个键或按钮，返回的是某个键的ASCII码。String.fromCharCode()方法表示将ASCII码转换为字符。
二、keydown事件
keydown跟keypress非常相似，也是在键盘的按键被按下时触发。但是这2个事件有一下2大区别：
（1）keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
（2）按下“字符键”会同时触发keydown和keypress这2个事件，但是这2个事件有一定顺序：keydown>keypress；
说实话，keydown与keypress也没多大区别。像上面keypress的例子，使用keydown同样能够实现。
三、keyup事件
在jQuery中，keyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。
keyup在实际开发也常常用到，比如在用户注册登录中，判断密码强度、判断两次输入密码是否一致等地方就用到keyup事件。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txt").keyup(function () {
var str = $(this).val().toString();
$("#num").text(str.length);
})
})
</script>
</head>
<body>
<input id="txt" type="text"/>
<div>字符串长度为：<span id="num">0</span></div>
</body>
</html>
分析：
这里实现了用户输入字符串的同时，jQuery会自动计算字符串的长度。原理是这样的：在输入字符串的时候我们需要点击键盘按钮，每输入一个字符之后都会触发keyup事件，因此我们可以使用keyup事件来统计。有人就问了，假如我想要像淘宝表单那样判断用户密码的强度或者限制用户密码的长度，该怎么做呢？这就需要大家把正则表达式教程学完了再来谈论哈，实现原理跟这个例子差不多。
在jQuery中，常用的表单事件有4种：
（1）focus()事件；
（2）blur()事件；
（3）change()事件；
（4）select()事件；
在JavaScript中，常用的表单事件如下：
（1）focus()和blur()
（3）change()
（4）select()
一、focus()和blur()
在jQuery中，focus()和blur()这2个事件往往都是配合使用。例如。在用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点。当文本框失去光标时，文本框失去焦点。
onfocus表示获取焦点触发的事件，onblur表示失去焦点触发的事件。
具有获得焦点和失去焦点事件的元素有3个（一定要记住啊）：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
//获取文本框默认值
var txt = $("#search").val();
//focus()获取焦点事件
$("#search").focus(function () {
if ($(this).val() == txt) {
$(this).val("");
}
});
//blur()失去焦点事件
$("#search").blur(function () {
if ($(this).val() == "") {
$(this).val(txt);
}
});
})
</script>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道"/><input id="btn" type="button" value="搜索" />
</body>
</html>
分析：
在这个例子中，当文本框获取焦点时，文本框提示文字就会消失；当文本框失去焦点后，会判断是否已经输入字符串，如果没有的话，文本框提示文字会重新出现。通过这个例子，大家都能感性地理解“获取焦点”和“失去焦点”事件是怎么一回事了。
focus()相当于JavaScript中的onfocus()方法，作用是获得焦点时触发的事件。
blur()相当于JavaScript中的onblur()方法，作用是失去焦点时触发的事件。
二、change()
在jQuery中，当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事件。
具有获得onchange事件的元素有3个：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txt").change(function () {
//这里的$(this)指的是$("#txt")
var len = $(this).val().length;
$("#num").text(len);
})
})
</script>
</head>
<body>
<textarea id="txt" rows="5" cols="20"></textarea><br />
输入字符长度为：<span id="num"></span>
</body>
</html>
分析：
当我们在文本框输入字符，然后让文本框失去焦点，即可看到统计字符串的长度值。
三、select()
在jQuery中，当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。select事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。
新手很容易把select和change这2个事件搞混，误以为下拉列表列表项的选中触发的事件是select。这一点大家要搞清楚：下拉列表列表项的选中触发的事件是change而不是select。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txt1").select(function () {
alert("你选中了单行文本框中的内容");
});
$("#txt2").select(function () {
alert("你选中了多行文本框中的内容");
});
})
</script>
</head>
<body>
<input id="txt1" type="text" value="欢迎来到绿叶学习网学习JavaScript入门教程"/><br />
<textarea id="txt2" cols="20" rows="5">欢迎来到绿叶学习网学习JavaScript入门教程</textarea>
</body>
</html>
分析：
当我们选中单行文本框text或多行文本框的内容时都会弹出相应的对话框。
滚动事件，指的是当滚动条位置发生改变时触发的事件。滚动事件very very有用，在“回顶部特效”以及现在扁平化网页中的动画中大量涉及到
语法：
$().scroll(fn)
说明：
参数fn表示事件处理函数，也就是function(){}。
scroll()滚动事件常常和scrollTop()和scrollLeft()这两个方法结合使用。在之前的章节，详细讲解过scrollTop()和scrollLeft()这两个方法了。
举例：固定栏目
见滚动条的距离scrollTop()和scrollLeft()
举例：回顶部特效
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
height:1800px;
}
#back-to-top
{
position:fixed;
right:50px;
bottom:50px;
display:none; /*设置默认情况下元素为隐藏状态*/
width:40px;
height:40px;
color:white;
background-color:#45B823;
font-family:微软雅黑;
font-size:15px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
/*根据滚动距离判断按钮是否显示或隐藏*/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#back-to-top").css("display","inline-block");
}
else {
$("#back-to-top").css("display","none");
}
});
/*实现点击滚动回顶部*/
$("#back-to-top").click(function () {
$("html,body").scrollTop(0);
});
})
</script>
</head>
<body>
<div id="back-to-top">回到顶部</div>
</body>
</html>
分析：
当我们拖动滚动一段距离（300px）之后，“回到顶部”按钮会出现，然后点击按钮之后，我们就实现了回到顶部效果，此时按钮也会消失
一、on()方法
在文档加载完成后，如果我们想要为元素绑定某个事件来完成某些操作，可以使用on()方法来实现。在jQuery中，我们可以使用on()方法为某些元素绑定一个事件或者多个事件。
语法：
$().on(type , fn)
说明：
type为必选参数，表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。注意一下，这里type是一个字符串。
fn为必选参数，表示事件的处理函数。
1、为“已经存在的元素”绑定事件
在jQuery中，on()方法可以为“已经存在的元素”添加绑定事件。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").on("click", function () {
alert("绿叶学习网jQuery入门教程！");
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
</body>
</html>
分析：
这里的按钮是已经在HTML中存在的了，我们使用on()方法为按钮绑定了一个单击事件。细心的小伙伴们可能回想，我们使用click()方法为按钮添加单击事件不也行吗？
$("#btn").on("click", function () {
alert("绿叶学习网jQuery入门教程！");
})
其实上面这段代码等价于：
$("#btn").click(function () {
alert("绿叶学习网jQuery入门教程！");
})
从上面分析，我们可以得出一个结论：在jQuery中，如果我们想要为某些元素添加某个事件来完成操作，可以有2种方法：
（1）基本事件；
（2）绑定事件；
基本事件，指的是使用click()、dbclick()这种“事件方法”。而绑定事件，指的是使用on()方法。
2、为“未来创建的元素”绑定事件
在jQuery中，on()方法不仅可以为“已经存在的元素”添加绑定事件，还可以为“未来创建的元素”添加绑定事件。所谓的“未来创建的元素”指的是使用jQuery创建的元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
var $btn = $('<input id="btn" type="button" value="按钮"/>');
$($btn).appendTo("body");
$("#btn").on("click", function () {
alert("绿叶学习网jQuery入门教程！");
});
})
</script>
</head>
<body>
</body>
</html>
分析：
这里的按钮本身并不存在于HTML中，而是使用jQuery来创建的。on()方法不仅可以为“已经存在的元素”添加绑定事件，而且还可以为“未来创建的元素”添加绑定事件。
像上面这个例子，我们试着用click()方法为其添加单击事件，会发现这种方式无效。这里也体现了“绑定事件”和“基本事件”的区别。“基本事件”无法为“未来创建的元素”添加绑定事件，而“绑定事件”却可以为“未来创建的元素”添加绑定事件。
此外，on()方法还有一种绑定多个事件的语法，感觉没太多卵用。就算绑定多个事件，我们直接使用多个on()方法就行了。因此大家为了减轻记忆负担，可以直接忽略掉这种语法格式。
在jQuery中，既然存在绑定事件，那肯定也存在对应的解绑事件。“绑定”与“解绑”是相反的关系。在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。
语法：
$().off(type)
说明：
type为必选参数，表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。注意一下，这里type是一个字符串。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
//为btn添加click事件
$("#btn").click(function () {
alert("绿叶学习网jQuery入门教程！");
})
//点击btn-off后，为btn解除click事件
$("#btn-off").click(function () {
$("#btn").off("click");
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/><br />
<input id="btn-off" type="button" value="按钮"/><br />
</body>
</html>
分析：
当我们点击“解绑”按钮之后，就会把另外一个按钮所绑定的click事件给解除。
此外，off()方法不仅可以解绑“使用绑定事件所添加的事件”，还可以解绑“使用基本事件所添加的事件”。
在之前的学习，我们知道，鼠标移入和鼠标移出这2个事件往往都是同时使用的，因此我们必须分别对“鼠标移入”和“鼠标移出”这2个事件分别定义。但是在jQuery中，我们可以使用hover()方法一次性地定义这2个事件，这就是所谓的合成事件。
语法：
$().hover(fn1,fn2)
说明：
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper
{
display:inline-block;
width:300px;
}
*{padding:0;margin:0;}
h3
{
height:40px;
line-height:40px;
border:1px solid gray;
border-bottom:none;
background-color:Silver;
text-align:center;
cursor:pointer;
}
#content
{
padding:10px;
border:1px solid gray;
text-indent:30px;
display:none;/*设置默认情况下内容不显示*/
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").hover(function () {
$("#content").css("display","block");
}, function () {
$("#content").css("display", "none");
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3>绿叶学习网</h3>
<div id="content">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。绿叶学习网跟其他垃圾采集站不一样，绿叶学习网中的每一个课程、每一篇文章，甚至每一个知识点，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人呕心沥血在一遍一遍地编辑，为的是给广大网站爱好者提供最精华的知识。</div>
</div>
</body>
</html>
分析：
在CSS伪类选择器中，我们可以使用:hover伪类来定义鼠标移入移出某个元素时的CSS样式的改变，但是这只限于CSS样式改变，像上面这个例子那种操作就不能实现了。
hover()方法，准确来说是替代jQuery中的mouseenter()和mouseleave()，而不是替代mouseover()和mouseout()。
初学jQuery的朋友们对于hover()这种写法感觉很陌生，有时候也记不住。其实hover()这个方法，无非就是插入了2个function函数罢了。我们每次使用合成事件的时候，先把形式写出来，如下：
$("#wrapper").hover(function () { }, function () { })
one()在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
语法：
$().one(type , fn)
说明：
type表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。这里的type是一个字符串。
fn表示事件的处理函数。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").one("click", function () {
alert("只能弹出一次！");
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
</body>
</html>
分析：
这里我们使用one()方法为按钮绑定了一个“只触发一次”的click事件。当我们第一次点击按钮之后会弹出对话框，但是第二次点击按钮就不会有任何反应。这就是one()方法的特点。
一、页面载入事件
在jQuery中，对于页面载入事件，我们使用$(document).ready()方法来替代JavaScript中的window.onload方法。
语法：
$(function(){
//代码部分
})
二、鼠标事件
鼠标事件，指的是操作鼠标时触发的事件。jQuery常见鼠标事件如下：
jQuery鼠标事件
鼠标事件 说明
click 鼠标单击事件
dbclick 双击事件
mouseover 移入事件
mouseout 移出事件
mousemove 移动事件
mousedown 按下事件
mouseup 松开事件
三、键盘事件
在jQuery中，键盘事件只有3个：
jQuery键盘事件
键盘事件 说明
keydown 按下键事件（包括数字键、功能键）
keypress 按下键事件（只包含数字键）
keyup 放开键事件（包括数字键、功能键）
三个事件的执行顺序如下：keydown → keypress → keyup。
四、表单事件
在jQuery中，常用的表单事件有4种：
jQuery表单事件
表单事件 说明
focus() 获取焦点
blur() 失去焦点
change() 改变事件
select() 选择事件
五、滚动事件
滚动事件，指的是当滚动条位置发生改变时触发的事件。
语法：
$().scroll(fn)
说明：
参数fn表示事件处理函数，也就是function(){}。
scroll()滚动事件常常和scrollTop()和scrollLeft()这两个方法结合使用。
六、绑定事件
在jQuery中，我们除了使用“基本事件”的方式来为元素添加事件之外，还可以使用“绑定事件”的方式为元素添加事件。在jQuery中，我们可以使用on()方法为某些元素绑定一个事件或者多个事件。
语法：
$().on(type , fn)
说明：
type为必选参数，表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。注意一下，这里type是一个字符串。
fn为必选参数，表示事件的处理函数。
在jQuery中，on()方法不仅可以为“已经存在的元素”添加绑定事件，还可以为“未来创建的元素”添加绑定事件。
七、解绑事件
在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。
语法：
$().off(type)
说明：
type为必选参数，表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。
八、合成事件
在jQuery中，我们可以使用hover()方法一次性地定义“鼠标移入”和“鼠标移出”这2个事件，这就是所谓的合成事件。
语法：
$().hover(fn1,fn2);
说明：
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
九、一次事件
在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
语法：
$().one(type , fn)
说明：
type表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。这里的type是一个字符串。
fn表示事件的处理函数。
【后话】：这一章我们只是给大家讲解jQuery中最常用的事件。其实在jQuery中，除了这些事件之外，还有load()、unload()、trigger()、error()等事件。不过对于初学者，我们只需要认真掌握这一章的事件操作，就已经可以让我们走得很远了。
在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：
（1）show()和hide()；
（2）toggle()；
一、show()和hide()
在jQuery中，我们可以使用show()方法来显示元素，使用hide()方法来隐藏元素。
1、简单的show()和hide()
语法：
$().hide()
$().show()
hide()方法就是把所选元素的display属性设置为none。
show()方法就是把所选元素的display属性还原为隐藏之前的显示状态（block、inline或者inline-block等）。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_hide").click(function () {
$("img").hide();
});
$("#btn_show").click(function () {
$("img").show();
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br/>
<input id="btn_hide" type="button" value="隐藏" />
<input id="btn_show" type="button" value="显示" />
</body>
</html>
分析：
当我们点击“隐藏”按钮，使用hide()方法隐藏图片；当我们点击“显示”按钮，使用show()方法显示图片。这个例子非常简单。
$("#btn_hide").click(function () {
$("img").hide();
});
$("#btn_show").click(function () {
$("img").show();
});
上面这段代码其实等价于：
$("#btn_hide").click(function () {
$("img").css("display" , "none");
});
$("#btn_show").click(function () {
$("img"). css("display" , "block");
});
2、动画的show()和hide()
在jQuery中，我们可以通过在show()和hide()方法中加入相应的参数来实现带有“动画效果”的显示和隐藏。
语法：
$().hide(speed,callback)
$().show(speed,callback)
说明：
参数speed为必选参数，表示动画执行的速度，单位是毫秒；
参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。在这里，所谓的回调函数，说白了就是在动画执行完成立刻执行的一个函数。对于回调函数，小伙伴们也别想得太复杂，你就把它当做一个普通的匿名函数即可。回调函数在show()和hide()用得不多，我们在“jQuery自定义动画”这一节会详细给大家介绍jQuery动画中“回调函数”的用法。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_hide").click(function () {
$("img").hide(500);
});
$("#btn_show").click(function () {
$("img").show(500);
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br/>
<input id="btn_hide" type="button" value="隐藏" />
<input id="btn_show" type="button" value="显示" />
</body>
</html>
分析：
这个例子相对上一个例子来说，只是在hide()和show()这两个方法上面添加了一个速度参数，然后隐藏和显示就带上了动画效果。此外，500毫秒，也就是0.5秒。
二、toggle()方法
在jQuery中，我们还可以使用toggle()方法来“切换”元素的“显示状态”。也就是说，如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。
使用toggle()来显示和隐藏元素，也有2种使用方式：（1）简单的toggle()；（2）动画的toggle()。
语法：
$().toggle() //简单的toggle()
$().toggle(speed , callback); //动画的toggle()
说明：
参数speed表示动画执行的速度，单位是毫秒；
参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_toggle").click(function () {
$("img").toggle(500);
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br/>
<input id="btn_toggle" type="button" value="切换" />
</body>
</html>
分析：
从这个例子可以看出，使用toggle()方法来切换元素的显示状态，比show ()和hide()方法更加简单快速。
在jQuery中，如果我们想要实现元素的淡入淡出这种渐变效果，有3组方法：
（1）fadeIn()和fadeOut()；
（2）fadeToggle()；
（3）fadeTo()；
淡入和淡出效果，本质上其实都是通过改变元素的“透明度”（opacity属性）来实现的。
一、fadeIn()和fadeOut()
在jQuery中，我们可以使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果。fadeIn()和fadeOut()这2个方法都是配合使用的。
语法：
$().fadeIn(speed , callback)
$().fadeOut(speed , callback)
说明：
speed为可选参数，表示动画执行的速度，单位为毫秒，默认为200毫秒。如果speed参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_out").click(function () {
$("img").fadeOut(500);
});
$("#btn_in").click(function () {
$("img").fadeIn(500);
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br />
<input id="btn_out" type="button" value="淡出" />
<input id="btn_in" type="button" value="淡入" />
</body>
</html>
分析：
很多人会发现，淡入淡出效果跟“带上速度”的显示隐藏效果几乎一模一样！Yes ,you’re right！但是不要被浮华给蒙蔽了双眼。这2组方法还是略有区别的。
（1）show()和hide()，是通过改变height、width、opacity来实现动画的显示与隐藏；
（2）fadeIn()和fadeOut()，只通过opacity来实现动画的显示与隐藏；
不过这2组方法在动画显示与隐藏完成之后，都会设置display:none或者display:block。
这2组方法它们在视觉上也有差别，例如hide()隐藏的效果是从下到上或从右下到左上慢慢折叠缩小，而fadeOut的淡出效果是整体淡化直至消失。
二、fadeToggle()
在jQuery中，我们还可以使用fadeToggle()方法通过不透明度变化来切换匹配元素的“显示状态”。也就是说，如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。fadeToggle()方法跟toggle()方法很相似，不过toggle()方法通过改变height、width、opacity来实现动画的显示与隐藏，而fadeToggle()只通过opacity来实现动画的显示与隐藏。
三、fadeTo()
在jQuery中，fadeIn()和fadeOut()这2种方法都是通过改变元素的透明度来实现淡入淡出的动画效果。其中在淡入效果中，透明度（opacity）从0.0变化到1.0；在淡出效果中，透明度（opacity）从1.0变化到0.0。
如果我们想要将元素透明度指定到某一个值，则可以使用fadeTo()方法。
语法：
$().fadeTo(speed , opacity , callback)
说明：
speed为可选参数，表示动画执行的速度，单位为毫秒，默认为500毫秒。如果speed参数省略，则采用默认速度。
opacity为必选参数，表示元素指定的透明度，取值范围为0.0~1.0。
callback为可选参数，表示动画执行完成之后的回调函数。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("img").hover(function () {
$(this).fadeTo(200, 0.8);
}, function () {
$(this).fadeTo(200, 1.0);
})
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/>
</body>
</html>
分析：
这里使用合成事件hover()来定义鼠标移入移出图片时的显示效果。当然对于这种显示效果，我们同样可以使用CSS来定义。
在jQuery中，如果我们想要实现元素的滑动效果，也有2组方法：
（1）slideUp()和slideDown()；
（2）slideToggle()；
一、slideup()和slideDown()
在jQuery中，我们可以使用slideUp()实现元素的滑上效果，使用slideDown()方法来实现元素的滑下效果。
语法：
$().slideDown(speed , callback)
$().slideUp(speed , callback)
说明：
speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
对于滑动效果，一般情况下都是先“滑下”再“滑上”。
二、slideToggle()
当使用slideDown()和slideUp()，我们需要用一个变量来判断当前元素的滑动状态，然后根据这个变量来决定是否执行slideDown()还是slideUp()方法。这种处理方式似乎显得有点复杂。
在jQuery中，我们还有一种实现滑动效果的简单方法，那就是slideToggle()。我们可以使用slideToggle()方法来切换元素的“滑动状态”。也就是说，如果元素是滑下状态，则变成滑上状态；如果元素是滑上状态，则变成滑下状态。这个跟toggle()、fadeToggle()这两个方法是类似的。
语法：
slideToggle(speed , callback)
说明：
speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。
callback为可选参数，表示动画执行完成之后的回调函数。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").mouseover(function () {
$("p").slideToggle();
});
$("h3").mouseout(function () {
$("p").slideToggle();
});
})
/*
$(function () {
$("h3").hover(function () {
$("p").slideToggle();
}, function () {
$("p").slideToggle();
})
})
*/
</script>
</head>
<body>
<div id="wrapper">
<h3>绿叶学习网简介</h3>
<p>绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。绿叶学习网跟其他垃圾采集站不一样，绿叶学习网中的每一个课程、每一篇文章，甚至每一个知识点，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人呕心沥血在一遍一遍地编辑，为的是给广大网站爱好者提供最精华的知识。</p>
</div>
</body>
</html>
分析：
鼠标移入时和移出时改变滑动状态
在实际开发中，对于滑动动画，slideToggle()方法相对slideUp()和slideDown()来得更加方便。
一、简单动画
在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。
jQuery动画其实就是通过将元素的某一个属性从“一个属性值”在指定时间内平滑地过渡到“另外一个属性值”来实现动画效果（大家仔细理解这句话，就能很深刻地理解jQuery动画的本质，非常重要）。jQuery动画原理跟CSS3动画原理是一样的。对于CSS3动画，可以关注我们的CSS3教程。
语法：
$().animate(params , speed , callback)
说明：
params，必选参数，表示“属性:值”列表，也就是元素在动画中变化的属性列表（具体形式，参考下面几个例子）；
speed，可选参数，表示动画的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度；
callback，可选参数，表示动画完成之后执行的函数（即回调函数）。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px","height":"100px"}, 1000);
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
分析：
从例子可以看出，animate()方法的params参数是以键值对的形式存在，语法如下：
{"属性1":"属性值1","属性2":"属性值2",……, "属性n":"属性值n"}
这种键值对的形式非常的简单，也非常有用，在我们以后编程生涯中也会大量接触到，例如JSON对象、JavaScript对象、Session、cookie等地方都会涉及，建议大家要认真体会一下这种数据格式。
在上面例子的基础上，如果我们还想同时将背景颜色改变为红色，很自然我们写下了如下jQuery代码：
$("#lvye").click(function () {
$(this).animate({ "width": "100px","height":"100px","background-color":"red"}, 1000);
})
纳尼？当我们测试的时候，居然背景颜色没有改变？再审查一遍也没有发现什么错误啊，那究竟是什么回事呢？其实像这种bug，新人是很难找到答案。
你没错，是jquery错了！oh，shit，jquery自己都有错？站长你逗我？
没逗大家，jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性。因此我们还需要引入一个jquery.color.js（本文底部提供下载）来修复这个bug。最终代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px", "height": "100px" ,"background-color":"red"}, 1000)
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
分析：
使用jquery.color.js这个文件就可以完美解决animate()方法无法识别color和background-color、border-color等颜色属性值的问题。
此外，读者朋友们还需要注意一点：由于jquery.color.js是依赖jQuery库而存在的，因此jquery.color.js文件必须放在jquery.1.12.0.min.js（jQuery库文件）后面引入，不然同样无效。
二、累积动画
在上面的代码中，我们设置了{"width":"100px"}作为动画参数。如果我们在100px之前加上“+=”，这种形式则表示以元素本身的width为基点进行“累加”；如果我们在100px之前加上“-=”则表示以元素本身的width为基点进行“累减”。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#simple,#sum
{
display:inline-block; /*将块元素转换为行内块元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#btn-simple").click(function () {
$("#simple").animate({ "width": "100px", "height": "100px" }, 1000);
})
$("#btn-sum").click(function () {
$("#sum").animate({ "width": "+=100px", "height": "+=100px" }, 1000);
})
})
</script>
</head>
<body>
<div id="simple"></div>
<input id="btn-simple" type="button" value="简单动画" /><br />
<div id="sum"></div>
<input id="btn-sum" type="button" value="累加动画" />
</body>
</html>
分析：
animate({ "width": "100px", "height": "100px" }由于是简单动画，使得元素最终的width为100px，height为100px；
animate({ "width": "+=100px", "height": "+=100px" }由于是累加动画，使得元素最终的width为130px，height为130px。
从上面这个例子，我们可以很直观地看出了简单动画与累积动画的不同。简单动画只是给定了元素属性的最终值，而累积动画是在元素属性的基础上的增加和减少。此外，如果我们多次点击“累加动画”按钮之后，会发现这个动画效果是不断累加的，大家可以在测试工具里面尝试操作一下。
三、回调函数
在了解回调函数之前，我们先来看一个例子。如果我们想要在简单动画那个例子中，在动画“执行完成之后”（看清楚）再调用CSS()方法来添加一个边框，该如何实现呢？有些同学可能就会写下如下代码：
如果想要在动画执行完成之后再实现某些操作，我们就需要用到了animate()方法中的回调函数。
举例：固定栏目
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 1000, function () {
$(this).css("border", "5px solid red");
});
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
分析：
使用了回调函数，我们就实现了预期的效果：动画“执行完成之后”再调用CSS()方法来添加一个边框。
回调函数不仅适用于animate()方法，也适用于jQuery所有的动画效果方法。回调函数在jQuery中大量存在，在之前我们也有过接触。所谓的回调函数说白了，就是在某个方法执行完成之后的“附加操作”。当然在jQuery动画中，回调函数用得不多，大家不必担心。
不过呢，回调函数这个概念极其重要，大家要认真理解好，知道是怎么一回事。在后面的课程例如ajax等也会经常接触。
在了解队列动画之前，我们先看一段代码：
$("#lvye").click(function(){
$(this).animate({"width":"100px",height:"100px"});
})
上面例子实现的动画效果是：元素的宽度和高度同时改变。也就是说，两个动画效果（width:"100px"和height:"100px"）是同时发生的。如果我们想要实现“先”改变宽度，“后”改变高度的话，使用之前我们所学的方法就无法实现了。这个时候我们就必须借助jQuery“队列动画”。
一、队列动画
在jQuery中，队列动画指的是在元素中按照一定的顺序执行多个动画效果，即有多个animate()方法在元素中执行，然后根据这些animate()方法执行的先后顺序，形成了动画队列，然后按照这个动画队列的顺序来进行显示。这个跟我们在饭堂排队打饭是一样的道理……
语法：
$().animate().animte()…….animte()
说明：
队列动画，就是按照animate()方法调用的先后顺序来实现的，原理很简单。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({"width":"100px"},1000).animate({"height":"100px"},1000);
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
分析：
这里使用队列动画的形式，按照animate()方法调用的先后顺序来实现。也就是说只有animate({"width":"100px"},1000)执行完成之后，才会接着执行animate({"height":"100px"},1000)。
举例：固定栏目
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:30px;
height:30px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 1000).animate({ "background-color": "red" }, 1000).fadeOut(500);
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
分析：
这个例子实现了一个复杂的队列动画效果：第1个动画改变元素的高度和宽度，第2个动画改变元素的背景颜色，第3个动画使用fadeOut()实现元素的淡出效果。这3个动画按照顺序依次执行。
细心的同学可能会发现，队列动画不是按照animate()的先后顺序执行吗？为什么fadeOut()也能加入队列动画呢？这是因为fadeOut()也属于动画的一种，本质上也是使用animate()来实现的。也就是说，队列动画包括之前我们所学到的4种动画形式：（1）显示和隐藏；（2）淡入和淡出；（3）滑上和滑下；（4）自定义动画。
在jQuery中，很多时候我们需要停止当前元素上正在执行的动画效果，可以使用stop()方法来实现。
语法：
$().stop(clearQueue,gotoEnd)
说明：
参数clearQueue和参数gotoEnd都是可选参数，取值都为布尔值。两个参数默认值都为false。
参数clearQueue表示是否要清空“未执行”的“动画队列”。这里大家要看准了，清空的是整个“动画队列”，而不仅仅是某一个动画。
参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。
默认情况下，没有参数值的stop()方法只会停止“当前正在执行”的动画。如果你使用animate()方法为当前元素设置了A、B、C这3个动画。如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止B和C的执行。如果我们想停止所有的动画，可以使用设置参数clearQueue为true来实现。
jQuery stop()方法
参数取值 说明
stop() 等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行
stop(true) 等价于stop(true,false)，停止所有动画，包括当前执行的动画
stop(true,true) 停止所有动画，但是允许执行当前动画
stop(false,true) 停止“当前执行”这段动画，然后调到最后一个动画，并且执行最后一个动画
用得比较多的是stop()和stop(true)这2种形式，而stop(true,true)和stop(false,true)这两个了解一下即可，可以直接忽略。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:50px;
height:50px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#btn-start").click(function () {
$("#lvye").animate({ "width": "200px" }, 3000).animate({ "background-color": "red" }, 3000).animate({ "height": "200px" }, 3000).animate({ "background-color": "blue" }, 3000);
});
$("#btn-stop").click(function () {
$("#lvye").stop();
})
})
</script>
</head>
<body>
<input id="btn-start" type="button" value="开始" />
<input id="btn-stop" type="button" value="停止" /><br />
<div id="lvye"></div>
</body>
</html>
分析：
在这个例子中，我们使用了4个animate()方法定义了一个队列动画，这个队列动画共有4段动画。当我们点击“开始”之后，过了一会然后点击“停止”按钮，就会立即“停止”当前执行的动画（即停止当前的animate()方法），然后跳到下一段动画（即下一个animate()方法）。如果又立即点击“停止”按钮，它又会跳到下一段动画，以此类推。大家好好感性认识一下。
如果我们想停止所有的动画，可以使用设置参数clearQueue为true来实现。jQuery实现代码如下：
$("#btn-stop").click(function () {
$("#lvye").stop(true);
})
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:50px;
height:50px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").hover(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 500);
}, function () {
$(this).animate({ "width": "50px", "height": "50px" }, 500);//移出时返回原状态
})
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
分析：
在这个例子中，我们使用了hover事件来定义鼠标移入和移出这2个状态实现的动画效果。当我们快速地移入移出div时，会发现一个效果：animation动画不断地执行！这明显就不是我们预期的效果。
其实这个bug是由于动画累积导致的，如果一个动画没有执行完，它就会被添加到“动画队列”中去。在这个例子中，每一次移入或者移出，都会添加新一个动画到“动画队列”中，然后没有执行完的动画会继续执行，直到所有动画执行完毕。这样我们不难理解这个bug是怎么产生的了。
此时要解决这个bug的话，我们只需要在移入动画或者移出动画执行之前加入stop()方法，就能解决这个问题。stop()方法会结束当前正在执行的动画，并立即执行队列中下一个动画。修改后的jQuery代码如下：
$(function () {
$("#lvye").hover(function () {
$(this).stop().animate({ "width": "100px", "height": "100px" }, 500);
}, function () {
$(this).stop().animate({ "width": "50px", "height": "50px" }, 500);//移出时返回原状态
})
})
对于这种由于动画在队列中累积而产生的bug，我们还可以通过is(":animated")判断当前动画状态来解决。这个我们在“jQuery判断动画状态”这一节会详细给大家介绍。
在jQuery中，如果我们想要对动画进行延迟操作，可以用delay()方法来实现。
语法：
$().delay(speed)
说明：
参数speed，表示动画的速度，单位为毫秒。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block; /*将块元素转换为行内块元素*/
width:50px;
height:50px;
border:1px solid orange;
background-color:#FFE7B7;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../App_js/jquery.color.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").click(function () {
$(this).animate({ "width": "200px" }, 1000).delay(1000).animate({ "height": "200px" }, 1000);
});
})
</script>
</head>
<body>
<div id="lvye"></div>
</body>
</html>
在之前的学习中，准确来说，我们接触了4种jQuery动画形式：
（1）显示和隐藏；
（2）淡入和淡出；
（3）滑上和滑下；
（4）自定义动画；
其实所有jQuery动画效果，从本质上来说，都是通过改变元素的CSS属性来实现的，也就是说：jQuery动画就是通过将元素的属性从“一个属性值”在一定时间内平滑地过渡到“另一个属性值”，从而实现动画效果。
此外在jQuery中，对于“显示和隐藏、淡入和淡出、滑上和滑下”这3种动画，实现的原理如下：
（1）显示和隐藏：通过改变width、height、opacity、display来实现动画的显示和隐藏；
（2）淡入和淡出：通过改变opacity、display来实现动画的淡入和淡出；
（3）滑上和滑下：通过改变height、display来实现动画的滑上和滑下；
通过深入剖析这3种动画形式的本质，我们得出一个道理：对于这几个动画，我们完全可以使用animate()方法来实现。其实，这3种动画形式本身就是使用animate()方法来实现的，只不过jQuery把它们封装得更为简单罢了！原来，原来……这一章学了那么多，本质上来说就一个东西：animate()。
我们接下来举几个简单的例子给大家，每一组中的2句代码都是等价的：
$().hide(500);
$().animate({"width":"0","height":"0","opacity":"0.0","display":"none"},500);
$().fadeOut(500);
$().animate({"opacity":"0.0","display":"none"},500);
$().slideUp(500);
$().animate({"height":"0,""opacity":"0.0","display":"none"},500);
在实际开发中，我们更倾向于使用“自定义动画”来实现各种动画效果，因为之前这3种动画形式在使用上给了我们有很大的限制。
在这一节中，通过深入剖析jQuery动画的本质，很多东西我们有了“柳暗花明又一村”的感觉，也使得我们知识架构更加完整。不光是jQuery，特别是针对JavaScript高级部分的知识，我们只有深入探讨各个知识的本质才有可能使得我们的JS水平更上一层楼，不然就永远卡在那个瓶颈中。在这一点上，我有过非常深刻的体会。
之前在“jQuery动画的停止”这一节中，我们接触过jQuery动画中最常见的一个小bug。也详细给大家探讨了这个bug出现的根本原因以及解决方法。
除了stop()方法，在jQuery中我们还可以使用is()方法来判断所选元素是否正处于动画状态，如果元素不处于动画状态，则添加新的动画；如果元素处于动画状态，则不添加新的动画。
语法：
if(!$().is(":animated"))
{
//如果当前没有进行动画，则添加新动画
}
说明：
这个判断方法在jQuery动画中经常被用到，大家要认真留意一下。
举例:
在线测试
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper
{
position:relative; /*设置相对定位属性，以便定位子元素*/
width:240px;
height:200px;
overflow:hidden;
}
img
{
width:240px;
height:200px;
}
#content
{
position:absolute;
left:0;
bottom:-28px;
width:100%;
height:28px;
line-height:28px;
font-family:微软雅黑;
text-align:center;
background-color:rgba(0,0,0,0.7);
color:White;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#wrapper").hover(function () {
if(!$(" #content", this).is(":animated"))
{
$(" #content", this).animate({ "bottom": "0px" }, 200);
}
}, function () {
if(!$(" #content", this).is(":animated"))
{
$(" #content", this).animate({ "bottom": "-28px" }, 200);
}
})
})
</script>
</head>
<body>
<div id="wrapper">
<img src="../App_images/lesson/run_jq/nvdi.png" alt=""/>
<div id="content">海贼王女帝</div>
</div>
</body>
</html>
分析：
在实际开发中，is(":animated")比stop()方法更加容易理解，也更加常用。
相对于JavaScript来说，使用jQuery定义动画更加方便快速。不过呢，对于动画效果，我们首选CSS3来实现，其次才是jQuery。
一、显示和隐藏
在jQuery中，如果我们想要实现元素的显示和隐藏，可以使用2组方法：
（1）show()和hide()；
（2）toggle()；
二、淡入和淡出
在jQuery中，如果我们想要实现元素的淡入淡出这种渐变效果，有3组方法：
（1）fadeIn()和fadeOut()；
（2）fadeToggle()；
（3）fadeTo()；
三、滑上和滑下
在jQuery中，如果我们想要实现元素的滑动效果，也有2组方法：
（1）slideUp()和slideDown()；
（2）slideToggle()；
四、自定义动画
在jQuery中，对于自定义动画，我们可以使用animate()方法来实现。对于自定义动画，我们分为2种形式：（1）简单动画；（2）累积动画。
语法：
$().animate(params , speed , callback)
说明：
params，必选参数，表示“属性:值”列表，也就是元素在动画中变化的属性列表（具体形式，参考下面几个例子）；
speed，可选参数，表示动画的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度；
callback，可选参数，表示动画完成之后执行的函数（即回调函数）。
此外，animate()方法无法识别color、background-color和border-color这些颜色属性。因此我们还需要引入一个jquery.color.js来修复这个bug。
五、队列动画
在jQuery中，队列动画指的是在元素中按照一定的顺序执行多个动画效果，即有多个animate()方法在元素中执行，然后根据这些animate()方法执行的先后顺序，形成了动画队列，然后按照这个动画队列的顺序来进行显示。
语法：
$().animate().animte()…….animte()
说明：
队列动画，就是按照animate()方法调用的先后顺序来实现的，原理很简单。
队列动画包括之前我们所学到的4种动画形式：（1）显示和隐藏；（2）淡入和淡出；（3）滑上和滑下；（4）自定义动画。
六、动画的停止和延迟
1、动画的停止
在jQuery中，很多时候我们需要停止当前元素上正在执行的动画效果，可以使用stop()方法来实现。
语法：
$().stop(clearQueue,gotoEnd)
说明：
参数clearQueue和参数gotoEnd都是可选参数，取值都为布尔值。两个参数默认值都为false。
参数clearQueue表示是否要清空“未执行”的“动画队列”。这里大家要看准了，清空的是整个“动画队列”，而不仅仅是某一个动画。
参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。
2、动画的延迟
在jQuery中，如果我们想要对动画进行延迟操作，可以用delay()方法来实现。
语法：
$().delay(speed)
说明：
参数speed，表示动画的速度，单位为毫秒。
七、判断动画状态
在jQuery中，我们还可以使用is()方法来判断所选元素是否正处于动画状态，如果元素不处于动画状态，则添加新的动画；如果元素处于动画状态，则不添加新的动画。
语法：
if(!$().is(":animated"))
{
//如果当前没有进行动画，则添加新动画
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
height:1800px;
}
#back-to-top
{
position:fixed;
right:50px;
bottom:50px;
display:none; /*设置默认情况下元素为隐藏状态*/
width:40px;
height:40px;
color:white;
background-color:#45B823;
font-family:微软雅黑;
font-size:15px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
/*根据滚动距离判断按钮是否显示或隐藏*/
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#back-to-top").fadeIn(200);
}
else {
$("#back-to-top").fadeOut(200);
}
});
/*实现点击滚动回顶部*/
$("#back-to-top").click(function () {
$("html,body").animate({ scrollTop: 0 }, 500);
});
})
</script>
</head>
<body>
<div id="back-to-top">回到顶部</div>
</body>
</html>
在之前的jQuery学习中，我们接触了大量的选择器，包括各种基本选择器、伪类选择器等。为了“更加灵活快速地操作元素”，除了选择器之外，jQuery还为我们提供了以“方法”（类似于函数方法）形式存在的2种方式：（1）过滤方法；（2）查找方法。
过滤和查找这2类方法与之前所学到的“选择器”是相互补充的关系。过滤和查找补充了很多使用选择器无法进行的操作，例如选取某一个元素的父元素、获取当前点击位置下的子元素、判断当前元素是否处于动画状态等等。这些都是很常见的操作。
jQuery过滤方法
方法 说明
hasClass() 判断所选元素是否含有某个类，返回值为true或false
eq(n) 选择元素集合中指定下标元素，下标从0开始（选择器作用）
is() 判断所选元素是否有符合某个条件的元素，返回值为true或false
not() 选择元素集合中不符合条件的元素（选择器作用）
filter() 使用“自定义表达式”来选择符合条件的元素（功能多）
has() 使用“自定义表达式”来选择符合条件的元素（功能少）
记住，这一章讲解的是“过滤方法”，这些过滤方法跟选择器功能类似，也是起到选择元素的作用。但是过滤方法却是以“方法”的形式表现，而不是以选择器形式表现。
hasClass()类过滤，就是根据元素的类名进行过滤操作。在jQuery中，我们可以使用hasClass()方法实现。
语法：
$().hasClass("类名")
说明：
hasClass()方法往往用于执行判断操作，判断当前jQuery对象中的某个元素是否包含了指定类名。如果包含，则返回true；如果不包含，则返回false。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
if($(this).hasClass("red")){
$(this).css("color","red");
}
})
})
</script>
</head>
<body>
<ul>
<li class="red">红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
if($(this).hasClass("red")){}这里使用hasClass()方法来判断当前的li元素是否包含red的类名。这里大家要注意一下，hasClass()方法往往都是用来实现判断操作的，而不是用来过滤。
eq()下标过滤，就是使用过滤方法来选取“元素集合”中指定下标位置的某一个元素。在jQuery中，我们使用eq()方法来实现下标过滤。
语法：
$().eq(n)
说明：
n是一个正整数，从0开始计算，表示用来选取“元素集合”中下标为n的的某一个元素。这个有点类似于JavaScript中的数组下标。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("li").eq(4).click(function () {
$(this).css("color", "yellow");
})
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
eq()方法的下标是从0开始的，第1个li元素的下标是0，第2个li元素的下标是1，……，第n个元素的下标是n-1。因此$("li").eq(4)表示选取下标为4的li元素（也就是第5个li元素）
细心的小伙伴可能看出了一点端倪，eq()方法类似于:eq()选择器。
$("li").eq(4).click(function () {
$(this).css("color", "yellow");
})
上面这段代码等价于：
$("li:eq(4)")click(function () {
$(this).css("color", "yellow");
})
明明都有一个:eq()选择器了，搞毛线还弄一个eq()方法出来呢？这是因为选择器的形式很固定，在某些情况下使用会显得很呆板且力不从心。而过滤方法使得我们更加灵活地控制元素，换一句话来说：过滤方法其实就是对选择器的一种补充！关于过滤方法的优势和特点，我们在以后的实际开发中会慢慢感受到。
is()判断过滤，指的是根据某些条件进行判断来选取符合条件的元素。在jQuery中，我们使用is()方法来实现判断过滤。
语法：
$().is(expression)
说明：
参数expression是一个jQuery选择器表达式。所谓的jQuery选择器表达式，说白了就是我们在前几章所学到的选择器。
is()方法用于判断当前选择的元素集合中，是否含有符合条件的元素。如果含有，则返回true；如果不含有，则返回false。
is()方法跟hasClass()方法类似，也是用来做判断，并不能直接过滤元素。实际上，filter()方法内部也是在调用这个函数。所以，filter()方法原有的规则在这里也适用。
is()方法非常好用，能不能用好直接决定你代码是否高效，也算是高手跟入门的众多区别之一。使用jQuery开发，没有做不到，只要想不到。这里列出is()方法的常用的做法，大家一定要认真学习一下：
//判断元素是否隐藏
$().is(":visible")
//判断元素是否处在动画中（非常重要）
$().is(":animated")
//判断复选框是否被选中
$("input[type=checkbox]").is(":checked")
//判断是否第1个子元素
$(this).is(":first-child")
//判断文本中是否包含helicopter这个词
$().is(":contains('helicopter')")
//判断是否包含某些类名
$().is(".red,.blue")
下面我们通过几个实际的例子来让大家深入感受一下。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrapper
{
position:relative; /*设置相对定位属性，以便定位子元素*/
width:240px;
height:200px;
overflow:hidden;
}
img
{
width:240px;
height:200px;
}
#content
{
position:absolute;
left:0;
bottom:-28px;
width:100%;
height:28px;
line-height:28px;
font-family:微软雅黑;
text-align:center;
background-color:rgba(0,0,0,0.7);
color:White;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#wrapper").hover(function () {
$(" #content",this).animate({ "bottom": "0px" }, 200);
}, function () {
$(" #content",this).animate({ "bottom": "-28px" }, 200);
})
})
</script>
</head>
<body>
<div id="wrapper">
<img src="../App_images/lesson/run_jq/nvdi.png" alt=""/>
<div id="content">海贼王女帝</div>
</div>
</body>
</html>
分析：
我们都知道：当我们快速地重复移入移出时，会出现一个动画累积的bug。为了避免这种情况的发生，我们只需要使用is(":animated")来对id为content的元素进行判断即可。is(":animated")这是用来判断当前所选元素是否处于动画状态，如果处于动画状态，则返回true；如果不处于动画状态，则返回false。
$("#wrapper").hover(function () {
$(" #content",this).animate({ "bottom": "0px" }, 200);
}, function () {
$(" #content",this).animate({ "bottom": "-28px" }, 200);
})
我们把上面jQuery代码改进之后，最终代码如下：
$(function () {
$("#wrapper").hover(function () {
if (!$(" #content", this).is(":animated")) {
$(" #content", this).animate({ "bottom": "0px" }, 200);
}
}, function () {
if (!$(" #content", this).is(":animated")) {
$(" #content", this).animate({ "bottom": "-28px" }, 200);
}
});
})
这样我们就可以规避掉动画效果出现的小bug了。这个例子是非常实用的例子，大家记得好好琢磨一下。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
if($(this).is(".red")){
$(this).css("color","red");
}
})
})
</script>
</head>
<body>
<ul>
<li class="red">红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
大家会发现，原来用is()方法也可以判断所选元素是否存在某个类名，这一点跟hasClass()方法相同。对于判断所选元素是否存在类名，我们可以使用2种方法：（1）hasClass()和（2）is()。那究竟用哪一个好呢？有个大牛做过实验，从查找速度（性能）来看，hasClass()方法远优于is()方法。毕竟hasClass()这个方法封装的东西很少，而is()方法封装的东西过多，运行速度肯定比较慢。
not()在之前的学习，我们知道hasClass()、is()等方法都是过滤符合条件的元素。但是在jQuery中，我们可以使用not()方法来过滤jQuery对象中“不符合条件”的元素，并且返回剩下的元素。
语法：
$().not(expression)
说明：
参数expression是一个jQuery选择器表达式。所谓的jQuery选择器表达式，说白了就是我们在前几章所学到的选择器。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").not("#red").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li id="red">红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
$("li").not("#red")表示选取id不是red的li元素。
$("ul li").not("#red").css("color", "red");
上面这段代码等价于：
$("ul li:not(#red)").css("color", "red");
其实反向过滤not()方法类似于jQuery的:not()选择器，跟eq()方法与:eq()选择器一样的道理，not()方法也是对jQuery选择器的一种补充，使得我们更加方便灵活地操作元素。
filter()和has()表达式过滤，就是根据需要使用“自定义表达式”的方式来选取符合条件的元素。这种自定义的表达式，可以是简单的选择器表达式，也可以是复杂的选择器表达式。
在jQuery中，表达式过滤方法共有2种：（1）filter()；（2）has()。
一、filter()方法
filter()方法是jQuery中功能最为强大的过滤方法。它可以使用表达式进行过滤，也可以使用函数返回值进行过滤。
1、表达式过滤
语法
filter(expression)
说明：
参数expression是一个jQuery选择器表达式。所谓的jQuery选择器表达式，说白了就是我们在前几章所学到的选择器。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").filter("#red,#yellow").click(function () {
$(this).css("color", "red");
})
})
</script>
</head>
<body>
<ul>
<li id="red">红色red</li>
<li>橙色orange</li>
<li id="yellow">黄色yellow</li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
2、函数过滤
filter()方法除了表达式过滤之外，还有一种函数过滤的方式。
语法：
filter(fn)
说明：
fn表示函数。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li")
.filter(function () {return $("span", this).length == 1;})
.css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li><span>橙色orange</span></li>
<li><span><span>黄色yellow</span></span></li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
filter(function () {return $("span", this).length == 1;})表示选择在内部子元素中span长度为1的li元素，这里只有“橙色orange”这一项符合。
虽然filter()方法非常强大，而且功能几乎涵盖我们前几节所学的到的各种过滤方法。但是由于filter()方法内部封装的东西太多，导致运行速度过慢。因此我们在实际开发中，能用其他的过滤方法，就尽量少用filter()方法。但是这句话并不是说filter()方法没啥卵用哈，当实在没办法的时候，大家还是义不容辞地去用吧。
二、has()方法
在jQuery中，表达式过滤除了filter()方法之外还有一个has()方法。has()方法也是一个过滤方法，虽然没有filter()方法那么强大，但是运行速度比较快。在实际开发中，has()相对filter()用得更多一些。
语法：
$().has(expression)
说明：
参数expression是一个jQuery选择器表达式。所谓的jQuery选择器表达式，说白了就是我们在前几章所学到的选择器。
has()方法用于选取符合条件的元素，符合的就保留，不符合的就删除。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{text-align:center;}
#main
{
text-align:left;
margin:100px auto;
padding:15px;
border:1px dashed gray;
display:inline-block;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").has("span").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li><span>橙色orange</span></li>
<li><span>黄色yellow</span></li>
<li>绿色green</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
has()方法和filter()方法功能是相似的，不过has()方法没有函数过滤的方式。实际上，我们可以把has()方法看成filter()方法的缩小版。
此外，has()方法类似于jQuery的“:has()”选择器，跟eq()方法与:eq()选择器一样的道理，has()方法也是对jQuery选择器的一种补充，使得我们更加方便灵活地操作元素。
在jQuery中，为我们提供3种查找祖先元素的方法：
（1）parent()；
（2）parents()；
（3）parentsUntil()；
所谓的祖先元素，就是某个元素的“父元素”、“爷元素”……。爷元素，在前端虽然没这个说法，但是却比较形象，所以这一节使用这一个说法。
一、parent()方法
在jQuery中，我们可以使用parent()方法来查找当前元素的“父元素”。记住，元素只有父元素。
语法：
$().parent(expression)
说明：
参数expression表示jQuery选择器表达式，用来过滤父元素。当参数省略时，则选择所有的父元素。如果参数不省略，则选择符合条件的父元素。
举例1:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
td
{
width:40px;
height:40px;
line-height:40px;
text-align:center;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("td").hover(function () {
$(this).parent().css("background-color", "#F1F1F1")
}, function () {
$(this).parent().css("background-color", "white")
})
})
</script>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td>512</td>
</tr>
</table>
</body>
</html>
分析：
$(this).parent()表示选择当前td元素的父元素，但是爷元素（即table元素）不会被选中。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("p").parent(".lvye").css("color", "red");
})
</script>
</head>
<body>
<div><p>绿叶学习网jQuery入门教程</p></div>
<div class="lvye"><p>绿叶学习网jQuery入门教程</p></div>
<div><p>绿叶学习网jQuery入门教程</p></div>
</body>
</html>
分析：
$("p").parent(".lvye")表示选择p元素的父元素，并且这个父元素必须含有类名lvye，不然不会被选中。
二、parents()方法
parents()方法和parent()方法相似，都是用来查找所选元素的祖先元素。但是这两个方法也有着本质的区别。
其实这2个方法也很好区分，parent是单数形式，查找的祖先元素只有父元素。而parents是复数形式，查找的祖先元素当然是所有的祖先元素。
语法：
$().parents(expression)
说明：
参数expression表示jQuery选择器表达式字符串，用来过滤祖先元素。当参数省略时，则选择所有的祖先元素。如果参数不省略，则选择符合条件的祖先元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var parents = $("span").parents()
.map(function () { return this.tagName; })
.get().join(",");
alert("span元素的所有祖先元素为：" + parents.toLowerCase());
});
})
</script>
</head>
<body>
<div><p><strong><span>jQuery入门教程</span></strong></p></div>
<input id="btn" type="button" value="获取" />
</body>
</html>
分析：
map()和get()往往都是配合使用来操作元素，对于这两个的使用方法请参考：jQuery map()方法。由于这2个方法用得不多，所有不在这里展开解释。一般情况下，parents()相对parent()用得较少。
三、parentsUntil()方法
parentsUntil()方法是对parents()方法的一个补充，它可以查找指定范围的所有祖先元素，相当于在parents()方法返回集合中截取部分祖先元素。
语法：
说明：
参数expression表示jQuery选择器表达式字符串，用来过滤祖先元素。当参数省略时，则选择所有的祖先元素。如果参数不省略，则选择符合条件的祖先元素。
参数selector表示jQuery选择器表达式字符串，用以确定范围的祖先元素。该参数为可选，如果省略，则将匹配所有祖先元素，这一点跟parents()方法查找结果是一样的。
由于parentsUntil()方法用得不多，为了减轻初学者的记忆负担，我们可以直接忽略。如果想要深入学习的话，可以参考：jQuery parentsUntil()方法。
【后话】：其实在jQuery中，对于查找祖先元素，除了parent()、parents()和parentsUntil()这3种方法之外，还有offsetParent()、closest()这两种方法。不过对于初学者来说，只要我们认真掌握这一节介绍的3种查找方法，就已经足够我们走得很远了。其他两种方法，我们只需要知道有这么一回事即可。
在jQuery中，提供了3种查找后代元素的方法：
（1）children()；
（2）contents()；
（3）find()；
所谓的后代元素，就是某个元素的“子元素”、“孙元素”……。孙元素，在前端虽然没这个说法，但是却比较形象，所以这一节使用这一个说法。
一、children()方法
在jQuery中，我们可以使用children()方法来查找当前元素的“所有子元素”或“部分子元素”。注意，children()方法只能查找子元素，不能查找其他后代元素。
语法：
$().children(expression)
说明：
参数expression表示jQuery选择器表达式，用来过滤子元素。当参数省略时，则将选择所有的子元素。如果参数不省略，则表示选择符合条件的子元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper").hover(function () {
$(this).children(".test").css("color", "red");
}, function () {
$(this).children(".test").css("color", "black");
})
})
</script>
</head>
<body>
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
<hr />
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
</body>
</html>
分析：
$(this).children(".test")表示选择当前元素下class为test的“子元素”。在这里我们会发现，虽然也有class为test的“孙元素”，但是使用children()方法却不会将“孙元素”选中。
二、contents()方法
与children()方法相似，contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等。因此读者可以把它视为DOM中childNodes属性的jQuery实现。contents()方法很少用，作为初学者我们可以直接忽略这个方法。
三、find()方法
find()方法和children()方法相似，都是用来查找所选元素的后代元素，但是find()方法能够查找所有后代元素，而children()方法仅能够查找子元素。
find()方法和children()方法使用频率差不多，同等重要。大家要认真掌握，并且认真区分。
语法：
find(expression)
说明：
参数expression表示jQuery选择器表达式，用来过滤子元素。当参数省略时，则将选择所有的子元素。如果参数不省略，则表示选择符合条件的子元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper").hover(function () {
$(this).find(".test").css("color", "red");
}, function () {
$(this).find(".test").css("color", "black");
})
})
</script>
</head>
<body>
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
<hr />
<div class="wrapper">
<div class="test">子元素</div>
<ul>
<li>孙元素</li>
<li class="test">孙元素</li>
<li>孙元素</li>
</ul>
<div class="test">子元素</div>
</div>
</body>
</html>
分析：
$(this).find(".test")表示选择当前元素下的class为test的所有“后代元素”，既包括子元素，也包括孙元素等所有后代元素。大家将find()方法这个例子跟children()方法那个例子对比一下，就能很直观发现两者之间的不同。
所谓的“向前查找兄弟元素”，就是找到某个元素之前的兄弟元素。在jQuery中，为我们提供了3种向前查找兄弟元素的方法：
（1）prev()；
（2）prevAll()；
（3）prevUntil()；
兄弟元素，指的是该元素在同一个父元素下的“同级”元素。
一、prev()方法
在jQuery中，我们可以使用prev()方法来查找某个元素的前一个“相邻”的兄弟元素。
语法：
$().prev()
说明：
一般情况下，prev()方法是不需要参数的。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").prev().css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
$("#lvye").prev()表示选取id为lvye的前一个相邻的兄弟元素，即内容为“黄色yellow”这个li元素。
二、prevAll()方法
prevAll()方法跟prev()方法相似，都是用来向前查找所选元素的兄弟元素。不过prev()方法只能查找所选元素前一个“相邻”的兄弟元素，而prevAll()可以查找所选元素前面“所有”同级的兄弟元素。
语法：
prevAll(expression)
说明：
参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素的前面“所有”的兄弟元素；当参数不省略时，则查找所选元素前面“符合条件”的兄弟元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").prevAll().css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
$("#lvye").prevAll()表示选择id为lvye的元素前面的所有兄弟元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").prevAll(".before").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li class="before">红色red</li>
<li>橙色orange</li>
<li class="before">黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
$("#lvye").prevAll(".before")表示选择id为lvye的元素之前的符合条件（即class为before）的兄弟元素。
三、prevUntil()方法
prevUntil()方法介于prev()方法和prevAll()方法之间。prev()方法仅选择前面相邻的一个兄弟元素，prevAll()方法选择前面所有兄弟元素，而prevUntil()方法能够选择前面指定范围的兄弟元素。
语法：
$().prevUntil(expression)
说明：
参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素的前面“所有”的兄弟元素；当参数不省略时，则查找所选元素前面“符合条件”的兄弟元素。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").prevUntil("#until").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li id="until">红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
$("#lvye").prevUntil("#until")表示以id为lvye的元素为基点，向前找到id为until的同级兄弟元素，然后选择“这个范围之间”的兄弟元素。
所谓的“向后查找兄弟元素”，就是找到某个元素之后的兄弟元素。在jQuery中，提供了3种为我们向后查找兄弟元素的方法：
（1）next()；
（2）nextAll()；
（3）nextUntil()；
兄弟元素，指的是该元素在同一个父元素下的“同级”元素。
一、next()方法
在jQuery中，我们可以使用next()方法来查找某个元素的后一个“相邻”的兄弟元素。
语法：
$().next()
说明：
一般情况下，next()方法是没有参数的，这一点跟prev()方法类似。
二、nextAll()方法
nextAll()方法跟next()方法相似，都是用来向后查找所选元素的兄弟元素，但是next()方法只能查找所选元素后一个“相邻”的兄弟元素，而nextAll()可以查找所选元素后面“所有”同级的兄弟元素。
语法：
nextAll(expression)
说明：
参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素的后面“所有”的兄弟元素；当参数不省略时，则查找所选元素后面“符合条件”的兄弟元素。
三、nextUntil()方法
nextUntil()方法介于next()方法和nextAll()方法之间。next()方法仅选择后面相邻的一个兄弟元素，nextAll()方法选择后面所有兄弟元素，而nextUntil()方法能够选择后面指定范围的兄弟元素。
语法：
nextUntil(expression)
说明：
参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素的前后面“所有”的兄弟元素；当参数不省略时，则查找所选元素后面“符合条件”的兄弟元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").nextUntil("#until").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li>蓝色blue</li>
<li id="until">紫色purple</li>
</ul>
</body>
</html>
分析：
$("#lvye").nextUntil("#until")表示以id为lvye的元素为基点，向后找到id为until的同级兄弟元素，然后选择“这个范围之间”的兄弟元素。
siblings()（1）向前查找兄弟元素：prev()、prevAll()、prevUntil()；
（2）向后查找兄弟元素：next()、nextAll()、nextUntil()；
除了上面2组方法之外，jQuery还为我们提供另外一种可以不分前后随意查找的方法：siblings()。
语法：
$().siblings(expression)
说明：
参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素“所有”同级元素（不分前后）；当参数不省略时，则查找所选元素前面“符合条件”的兄弟元素。
大家要记住这一点，使用siblings()方法来查找兄弟元素，这是不分前后的，跟之前我们学的那2组方法不一样。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").siblings().css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li>橙色orange</li>
<li>黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li>蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：$("#lvye").siblings()表示选择id为lvye元素的所有兄弟元素，这里的兄弟元素不分前面和后面。此外还要注意一下，siblings()方法选择的兄弟元素，不包括元素本身（难道你跟你自己是兄弟关系？）。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lvye").siblings(".brother").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>红色red</li>
<li class="brother">橙色orange</li>
<li>黄色yellow</li>
<li id="lvye">绿色green</li>
<li>青色cyan</li>
<li class="brother">蓝色blue</li>
<li>紫色purple</li>
</ul>
</body>
</html>
分析：
$("#lvye").siblings(".brother")表示选择id为lvye元素的所有符合条件（即class为brother）兄弟元素，这里的兄弟元素不分前面和后面。