2.1 jQuery选择器概述
2.1.1 什么使选择器
2.1.2 选择器的优势: 代码更简单，完善的检测机制
1.代码更简单
示例2-1 使用javascript实现隔行变色
<html>
<head>
<title>使用Javascript实现隔行变色</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
#tbStu {
width: 260px;
border: solid 1px #666;
background-color: #eee;
}
#tbStu tr {
line-height: 23px;
text-align: center;
}
#tbStu tr th {
background-color: #ccc;
color: #fff;
}
#tbStu .trOdd {
background-color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oTb = document.getElementById("tbStu");
for(var i=0; i<oTb.rows.length-1; i++) {
if(i%2) {
oTb.rows[i].className = "trOdd";
}
}
}
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!--奇数行 -->
<tr>
<td>1001</td><td>张小明</td><td>男</td><td>320</td>
</tr>
<!--偶数行 -->
<tr>
<td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
</tbody>
</table>
</body>
</html>
示例2-2 使用jQuery选择器实现隔行变色
<html>
<head>
<title>使用jQuery选择器实现隔行变色</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
#tbStu {
width: 260px;
border: solid 1px #666;
background-color: #eee;
}
#tbStu tr {
line-height: 23px;
text-align: center;
}
#tbStu tr th {
background-color: #ccc;
color: #fff;
}
#tbStu .trOdd {
background-color: #fff;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tbStu tr:nth-child(even)").addClass("trOdd");
});
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!--奇数行 -->
<tr>
<td>1001</td><td>张小明</td><td>男</td><td>320</td>
</tr>
<!--偶数行 -->
<tr>
<td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
</tbody>
</table>
</body>
</html>
2.完善的检测机制
示例2-3 使用javascript输出文字信息
<html>
<head>
<title>Javascript 代码检测页面元素</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function() {
if(document.getElementById("divT"))
{
var oDiv = document.getElementById("divT");
oDiv.innerHTML = "这是一个检测页面";
}
}
</script>
</head>
<body>
</body>
</html>
示例2-4 使用jQuery输出文字信息
<html>
<head>
<title>Javascript 代码检测页面元素</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#divT").html("这是一个检测页面");
});
</script>
</head>
<body>
</body>
</html>
2.2 jQuery选择器详解
基本选择器
层次选择器
过滤选择器
|-简单过滤选择器
|-内容过滤选择器
|-可见性过滤选择器
|-属性过滤选择器
|-子元素过滤选择器
|-表单对象属性过滤选择性
表单选择器
2.2.1 基本选择器
基本选择器语法：
选择器
|
功能
|
返回值
|
#id
|
根据给定的ID匹配一个元素
|
单个元素
|
element
|
根据给定的元素名匹配所有元素
|
元素集合
|
.class
|
根据给定的类匹配元素
|
元素集合
|
*
|
匹配所有元素
|
元素集合
|
selector1,selectorN
|
将每一个选择器匹配到的元素合并后一起返回
|
元素集合
|
示例2-5 使用jQuery基本选择器选择元素
<html>
<head>
<title>使用jQuery基本选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
.clsFrame {
width: 300px;
height: 100px;
}
.clsFrame div,span {
float: left;
width: 65px;
height: 65px;
border: solid 1px #ccc;
margin: 8px;
display: none;
}
.clsOne {
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() {
$("#divOne").css("display", "block");
});
$(function() {
$("div span").css("display", "block");
});
$(function() {
$(".clsFrame .clsOne").css("display", "block");
});
$(function() {
$("*").css("display", "block");
});
*/
$(function() {
$("#divOne,span").css("display", "block");
});
</script>
</head>
<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
2.2.2 层次选择器
层次选择器语法：
选择器
|
功能
|
返回值
|
ancestor descendant
|
根据祖先元素匹配所有的后代元素
|
元素集合
|
parent>child
|
根据父元素匹配所有的子元素
|
元素集合
|
prev+next
|
匹配所有紧接在prev元素后的相邻元素
|
元素集合
|
prev~siblings
|
匹配prev元素之后的所有兄弟元素
|
元素集合
|
|
|
|
元素集合
|
说明: ancestor descendant与 parent>child所选择的的元素集合是不同的，前者的层次关系是祖先和后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
示例2-6 使用jQuery层次选择器选择元素
<html>
<head>
<title>使用jQuery层次选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div,span {
float: left;
border: solid 1px #ccc;
margin: 8px;
display: none;
}
.clsFraA {
width: 65px;
height: 65px;
}
.clsFraP {
width: 45px;
height: 45px;
background-color: #eee;
}
.clsFraC {
width: 25px;
height: 25px;
background-color: #ddd;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //匹配后代元素
$("#divMid").css("display", "block");
$("div span").css("display", "block");
});
$(function() { //匹配子元素
$("#divMid").css("display", "block");
$("div>span").css("display", "block");
});
$(function() { //匹配后面元素
$("#divMid + div").css("display", "block");
$("#divMid").next().next().css("display", "block");
});
$(function() { //匹配后面所有元素
$("#divMid ~ div").css("display", "block");
$("#divMid").nextAll().css("display", "block");
});
*/
$(function() { //匹配所有相邻元素
$("#divMid").siblings("div").css("display", "block");
});
</script>
</head>
<body>
<div class="clsFraA">Left</div>
<div class="clsFraA" id="divMid">
<span class="clsFraP" id="Span1">
<span class="clsFraC" id="Span2"></span>
</span>
</div>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
</body>
</html>
说明:siblings()方法与选择器prev ~ siblings区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分
2.2.3 简单过滤选择器
简单过滤选择器语法:
选择器
|
功能
|
返回值
|
first()或:first
|
获取第一元素
|
单个元素
|
last()或:last
|
获取最后一个元素
|
单个元素
|
:not(selector)
|
获取除给定选择器外的所有元素
|
元素集合
|
:even
|
获取所有索引值为偶数的元素，索引号从0开始
|
元素集合
|
:odd
|
获取所有索引值为奇数的元素,索引号从0开始
|
元素集合
|
:eq(index)
|
获取指定索引值的元素,索引号从0开始
|
单个元素
|
:gt(index)
|
获取所有大于给定索引值的元素,索引号从0开始
|
元素集合
|
:lt(index)
|
获取所有小于给定索引值的元素,索引号从0开始
|
元素集合
|
:header
|
获取所有标题类型的元素,如h1，h2....
|
元素集合
|
:animated
|
获取正在执行动画效果的元素
|
元素集合
|
示例2-7 使用jQuery基本过滤选择器选择元素
<html>
<head>
<title>使用jQuery基本过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div {
width: 241px;
height: 83px;
border: solid 1px #eee;
}
h1 {
font-size: 13px;
}
ul {
list-style-type: none;
padding: 0px;
}
.DefClass, .NotClass {
height: 23px;
width: 60px;
line-height: 23px;
float: left;
border-top: solid 1px #eee;
border-bottom: solid 1px #eee
}
.GetFocus {
width: 58px;
border: solid 1px #666;
background-color: #eee;
}
#spnMove {
width: 238px;
height: 23px;
line-height: 23px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() {
$("li:first").addClass("GetFocus");
});
$(function() {
$("li:last").addClass("GetFocus");
});
$(function() {
$("li:not(.NotClass)").addClass("GetFocus");
});
$(function() {
$("li:even").addClass("GetFocus");
});
$(function() {
$("li:odd").addClass("GetFocus");
});
$(function() {
$("li:eq(1)").addClass("GetFocus");
});
$(function() {
$("li:gt(1)").addClass("GetFocus");
});
$(function() {
$("li:lt(4)").addClass("GetFocus");
});
$(function() {
$("div h1").css("width", "238");
$(":header").addClass("GetFocus");
});
*/
$(function() {
animateIt();
$("#spnMove:animated").addClass("GetFocus");
});
function animateIt() {
$("#spnMove").slideToggle("slow", animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>
说明: 选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt()，然后执行该函数，选择器才能获取动画效果，并增加其类别
2.2.4 内容过滤选择器
内容过滤选择器语法:
选择器
|
功能
|
返回值
|
:contains(text)
|
获取包含给定文本的元素
|
元素集合
|
:empty
|
获取所有不包含子元素或者文本的空元素
|
元素集合
|
:has(selector)
|
获取含有选择器所匹配的元素的元素
|
元素集合
|
:parent
|
获取含有子元素或者文本的元素
|
元素集合
|
示例2-8 使用jQuery内容过滤选择器选择元素
<html>
<head>
<title>使用jQuery内容过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div {
float:left;
border: solid 1px #ccc;
margin: 8px;
width: 65px;
height: 65px;
display: none;
}
span {
float: left;
border: solid 1px #ccc;
margin: 8px;
width: 45px;
height: 45px;
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //显示包含给定文本的元素
$("div:contains('A')").css("display", "block");
});
$(function() { //显示所有不包含子元素或者文本的空元素
$("div:empty").css("display", "block");
});
$(function() { //显示含有选择器所匹配的元素
$("div:has(span)").css("display", "block");
});
*/
$(function() { //显示含有子元素或者文本的元素
$("div:parent").css("display", "block");
});
</script>
</head>
<body>
<div>ABCD</div>
<div><span></span></div>
<div>EFaH</div>
<div></div>
</body>
</html>
说明:在:contains(text)内容过滤选择器中，如果是查找字母，则有大小写的区别
2.2.5 可见性过滤选择器
可见性过滤选择器语法:
选择器
|
功能
|
返回值
|
:hidden
|
获取所有不可见元素,或者type为hidden的元素
|
元素集合
|
:visible
|
获取所有的可见元素
|
元素集合
|
示例2-9 使用jQuery可见性过滤选择器选择元素
<html>
<head>
<title>使用jQuery可见性过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div, span {
float:left;
border: solid 1px #ccc;
margin: 8px;
width: 65px;
height: 65px;
}
.GetFocus {
border: solid 1px #666;
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //增加所有可见元素的类别
$("span:hidden").show();
$("div:visible").addClass("GetFocus");
});
*/
$(function() { //增加所有不可见元素类别
$("span:hidden").show().addClass("GetFocus");
});
</script>
</head>
<body>
<span style="display:none">Hidden</span>
<div>Visible</div>
</body>
</html>
说明: :hidden选择器所选择的不仅包括样式为display:none所有元素,而且还包括属性type="hidden"和样式为visibility:hidden的所有元素
2.2.6 属性过滤选择器
属性过滤选择器语法:
选择器
|
功能
|
返回值
|
[attribute]
|
获取包含给定属性的元素
|
元素集合
|
[attribute=value]
|
获取等于给定的属性是某个特定值的元素
|
元素集合
|
[attribute!=value]
|
获取不等于给定的属性是某个特定值的元素
|
元素集合
|
[attribute^=value]
|
获取给定的属性是以某些值开始的元素
|
元素集合
|
[attribute$=value]
|
获取给定的属性是以某些值结束的元素
|
元素集合
|
[attribute*=value]
|
获取给定的属性是以包含某些值的元素
|
元素集合
|
[selector1][selectorN]
|
获取满足多个条件的复合属性的元素
|
元素集合
|
示例2-10 使用jQuery属性过滤选择器选择元素
<html>
<head>
<title>使用jQuery属性过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div {
float: left;
border: solid 1px #ccc;
margin: 8px;
width: 65px;
height: 65px;
display: none;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //显示所有含有id属性的元素
$("div[id]").show(3000);
});
$(function() { //显示所有属性title的值是"A"的元素
$("div[title='A']").show(3000);
});
$(function() { //显示所有属性title的值不是"A"的元素
$("div[title!='A']").show(3000);
});
$(function() { //显示所有属性title的值以"A"开始的元素
$("div[title^='A']").show(3000);
});
$(function() { //显示所有属性title的值以"C"结束的元素
$("div[title$='C']").show(3000);
});
$(function() { //显示所有属性title的值包含"A"的值的元素
$("div[title*='A']").show(3000);
});
*/
$(function() { //显示所有属性title的值中包含"B"且属性id的值时"divAB"的元素
$("div[id='divAB'][title*='B']").show(3000);
});
</script>
</head>
<body>
<div id="divID">ID</div>
<div title="A">Title A</div>
<div id="divAB" title="AB">ID <br /> Title AB</div>
<div title="ABC">Title ABC </div>
</body>
</html>
说明:show()是jQuery库中的一个显示元素的函数，括号中的参数表示显示时间,单位是毫秒，show(3000)表示用3000毫秒显示。
2.2.7 子元素过滤选择器
子元素过滤选择器语法:
选择器
|
功能
|
返回值
|
:nth-child(eq|even|odd|index)
|
获取每个父元素下的特定位置元素,索引号从1开始
|
元素集合
|
:first-child
|
获取每个父元素下的第一个子元素
|
元素集合
|
:last-child
|
获取每个父元素下的最后一个子元素
|
元素集合
|
:only-child
|
获取每个父元素下的仅有一个子元素
|
元素集合
|
示例2-11 使用jQuery子元素过滤选择器选择元素
<html>
<head>
<title>使用jQuery子元素过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
ul {
width: 241px;
list-style-type:none;
padding: 0px;
}
ul li {
height: 23px;
width: 60px;
line-height: 23px;
float: left;
border-top: solid 1px #eee;
border-bottom: solid 1px #eee;
margin-bottom: 5px;
}
.GetFocus {
width: 58px;
border: solid 1px #666;
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //增加每个父元素下的第2个子元素类别
$("li:nth-child(2)").addClass("GetFocus");
});
$(function() { //增加每个父元素下的第1个子元素类别
$("li:first-child").addClass("GetFocus");
});
$(function() { //增加每个父元素下的最后1个子元素类别
$("li:last-child").addClass("GetFocus");
});
*/
$(function() { //增加每个父元素下的只有一个子元素的类别
$("li:only-child").addClass("GetFocus");
});
</script>
</head>
<body>
<ul>
<li>Item 1-0</li>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-0</li>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul>
<ul>
<li>Item 3-0</li>
</ul>
</body>
</html>
2.2.8 表单对象属性过滤选择器
表单对象属性过滤选择器语法:
选择器
|
功能
|
返回值
|
:enabled
|
获取表单中所有属性为可用的元素
|
元素集合
|
:disabled
|
获取表单中所有属性为不可用的元素
|
元素集合
|
:checked
|
获取表单中所有被选中的元素
|
元素集合
|
:selected
|
获取表单中所有被选中option的元素
|
元素集合
|
示例2-12 通过表单对象属性过滤选择器获取表单对象
<html>
<head>
<title>使用jQuery表单对象属性过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div {
display: none;
}
select {
height: 65px;
}
.clsIpt {
width: 100px;
padding: 3px;
}
.GetFocus {
border: solid 1px #666;
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //增加表单中所有属性为可用的元素类别
$("#divA").show(3000);
$("#form1 input:enabled").addClass("GetFocus");
});
$(function() { //增加表单中所有属性为不可用的元素类别
$("#divA").show(3000);
$("#form1 input:disabled").addClass("GetFocus");
});
$(function() { //增加表单中所有被选中的元素类别
$("#divB").show(3000);
$("#form1 input:checked").addClass("GetFocus");
});
*/
$(function() { //显示表单中所有被选中option的元素内容
$("#divC").show(3000);
$("#Span2").html("选中项是:" +
$("select option:selected").text());
});
</script>
</head>
<body>
<form id="form1" style="width:241px">
<div id="divA">
<input type="text" value="可用文本框" class="clsIpt" />
<input type="text" disabled="disabled" value="不可用文本框" class="clsIpt" />
</div>
<div id="divB">
<input type="checkbox" checked="checked" value="1" />选中
<input type="checkbox" value="0" /> 未选中
</div>
<div id="divC">
<select multiple="multiple">
<option value="0"> Item 0 </option>
<option value="1" selected="selected"> Item 1</option>
<option value="2"> Item 2 </option>
<option value="3" selected="selected"> Item 3</option>
</select>
<span id="Span2"></span>
</div>
</form>
</body>
</html>
2.2.9 表单选择器
表单选择器语法:
选择器
|
功能
|
返回值
|
:input
|
获取所有input,textarea,select
|
元素集合
|
:text
|
获取所有单行文本框
|
元素集合
|
:password
|
获取所有密码框
|
元素集合
|
:radio
|
获取所有单选按钮
|
元素集合
|
:checkbox
|
获取所有复选框
|
元素集合
|
:submit
|
获取所有提交按钮
|
元素集合
|
:image
|
获取所有图像域
|
元素集合
|
:reset
|
获取所有重置按钮
|
元素集合
|
:button
|
获取所有按钮
|
元素集合
|
:file
|
获取所有文件域
|
元素集合
|
示例2-13 使用jQuery表单过滤选择器获取元素
<html>
<head>
<title>使用jQuery表单过滤选择器</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
form {
width:241px;
}
textarea, select, button, input, span {
display: none;
}
.btn {
border: solid 1px #666;
padding: 2px;
width: 60px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff,EndColorStr=#ECE9D8);
}
.txt {
border: solid 1px #666;
padding: 3px;
}
.img {
padding: 2px;
border: solid 1px #ccc;
}
.div {
border: solid 1px #ccc;
background-color: #eee;
padding: 5px;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
/*
$(function() { //显示Input类型元素的总数量
$("#form1 div").html("表单共找出Input类型元素: " +
$("#form1 :input").length);
$("#form1 div").addClass("div");
});
$(function() { //显示所有文本框对象
$("#form1 :text").show(3000);
});
$(function() { //显示所有密码框对象
$("#form1 :password").show(3000);
});
$(function() { //显示所有单选按钮对象
$("#form1 :radio").show(3000);
$("#form1 #Span1").show(3000);
});
$(function() { //显示所有复选框对象
$("#form1 :checkbox").show(3000);
$("#form1 #Span2").show(3000);
});
$(function() { //显示所有提交按钮对象
$("#form1 :submit").show(3000);
});
$(function() { //显示所有图片域对象
$("#form1 :image").show(3000);
});
$(function() { //显示所有重置按钮对象
$("#form1 :reset").show(3000);
});
$(function() { //显示所有按钮对象
$("#form1 :button").show(3000);
});
*/
$(function() { //显示所有文件域对象
$("#form1 :file").show(3000);
});
</script>
</head>
<body>
<form id="form1">
<textarea class="txt"> TextArea </textarea>
<select><option value="0">Item 0</option></select>
<input type="text" value="Text" class="txt" />
<input type="password" value="PassWord" class="txt" />
<input type="radio"/> <span id="Span1"> Radio</span>
<input type="checkbox"/>
<span id="Span2">CheckBox</span>
<input type="submit" value="Submit" class="btn" />
<input type="image" title="Image" src="data:images/logo.gif" class="img" />
<input type="reset" value="Reset" class="btn" />
<input type="button" value="Button" class="btn" />
<input type="file" title="File" class="txt" />
<div id="divShow"></div>
</form>
</body>
</html>
2.3 综合案例分析---导航条在项目中的应用
2.3.1 需求分析
2.3.2 效果界面
2.3.3 功能实现
示例2-14 导航条在项目中的应用
<html>
<head>
<title>导航条在项目中的应用</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
#divFrame {
border: solid 1px #666;
width: 310;
overflow: hidden;
}
#divFrame .clsHead{
background-color: #eee;
padding: 8px;
height: 18px;
cursor: hand;
}
#divFrame .clsHead h3 {
padding: 0px;
margin: 0px;
float: left;
}
#divFrame .clsHead span {
float: right;
margin-top: 3px;
}
#divFrame .clsContent {
padding: 8px;
}
#divFrame .clsContent ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#divFrame .clsContent ul li {
float: left;
width: 95px;
height: 23px;
line-height: 23px;
}
#divFrame .clsBot {
float: right;
padding-top: 5px;
}
.GetFocus {
background-color: #eee;
}
</style>
<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".clsHead").click(function() {
if($(".clsContent").is(":visible")) {
$(".clsHead span img")
.attr("src", "images/a1.gif");
$(".clsContent").css("display","none");
} else {
$(".clsHead span img")
.attr("src", "images/a2.gif");
$(".clsContent").css("display", "block");
}
});
$(".clsBot > a").click(function() {
if($(".clsBot > a").text() == "简化") {
$("ul li:gt(4):not(:last)").hide();
$(".clsBot > a").text("更多");
} else {
$("ul li:gt(4):not(:last)").show().addClass("GetFocus");
$(".clsBot > a").text("简化");
}
});
});
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>图书分类</h3>
<span><img src="data:images/a2.gif" alt="" /></span>
</div>
<div class="clsContent">
<ul>
<li><a href="#">小说</a><i>( 1110 )</i></li>
<li><a href="#">文艺</a><i>( 1110 )</i></li>
<li><a href="#">青春</a><i>( 1110 )</i></li>
<li><a href="#">少儿</a><i>( 1110 )</i></li>
<li><a href="#">生活</a><i>( 1110 )</i></li>
<li><a href="#">社科</a><i>( 1110 )</i></li>
<li><a href="#">管理</a><i>( 1110 )</i></li>
<li><a href="#">计算机</a><i>( 1110 )</i></li>
<li><a href="#">教育</a><i>( 1110 )</i></li>
<li><a href="#">工具书</a><i>( 1110 )</i></li>
<li><a href="#">引进版</a><i>( 1110 )</i></li>
<li><a href="#">其他类</a><i>( 1110 )</i></li>
</ul>
<div class="clsBot"><a href="#">简化</a><img src="data:images/a5.gif" alt="" />
</div>
</div>
</div>
</body>
</html>
2.3.4 代码分析
2.4 本章小结