《jQuery权威指南》学习笔记之第2章 jQuery选择器

摘要：

--偶数行--˃1002李明启女350//tr˃示例2-2使用jQuery选择器实现隔行颜色更改使用jQuery选择符实现隔行色更改body｛font-size:12px；text-align:center；｝tbStu｛260px；边框：solid1px#666；背景色：#eee；｝#tbStutr{line-height:23px；text-align:center；}#tbStutrth｛background color:#ccc；color:#fff；｝#待定。trOdd｛background color:#fff；｝$；学生编号姓名性别总分˂！

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 {
				 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   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 {
				 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="http://t.zoukankan.com/script/jquery-2.0.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#tbStu tr:nth-child(even)").addClass("trOdd");
			});
		</script>
	</head>
	<body>
		<table   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="http://t.zoukankan.com/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 {
				 300px;
				height: 100px;
			}

			.clsFrame div,span {
				float: left;
				 65px;
				height: 65px;
				border: solid 1px #ccc;
				margin: 8px;
				display: none;
			}

			.clsOne {
				background-color: #eee;
			}
		</style>

		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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 {
				 65px;
				height: 65px;
			}

			.clsFraP {
				 45px;
				height: 45px;
				background-color: #eee;
			}

			.clsFraC {
				 25px;
				height: 25px;
				background-color: #ddd;
			}
		</style>

		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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   id="divMid">
			<span   id="Span1">
				<span   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 {
				 241px;
				height: 83px;
				border: solid 1px #eee;
			}

			h1 {
				font-size: 13px;
			}

			ul {
				list-style-type: none;
				padding: 0px;
			}

			.DefClass, .NotClass {
				height: 23px;
				 60px;
				line-height: 23px;
				float: left;
				border-top: solid 1px #eee;
				border-bottom: solid 1px #eee
			}

			.GetFocus {
				 58px;
				border: solid 1px #666;
				background-color: #eee;
			}

			#spnMove {
				 238px;
				height: 23px;
				line-height: 23px;
			}
		</style>
		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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;
				 65px;
				height: 65px;
				display: none;
			}

			span {
				float: left;
				border: solid 1px #ccc;
				margin: 8px;
				 45px;
				height: 45px;
				background-color: #eee;
			}
			
		</style>
		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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;
				 65px;
				height: 65px;
			}

			.GetFocus {
				border: solid 1px #666;
				background-color: #eee;
			}
		</style>
		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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;
			 65px;
			height: 65px;
			display: none;
		}
		</style>
		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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   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 {
				 241px;
				list-style-type:none;
				padding: 0px;
			}

			ul li {
				height: 23px;
				 60px;
				line-height: 23px;
				float: left;
				border-top: solid 1px #eee;
				border-bottom: solid 1px #eee;
				margin-bottom: 5px;
			}

			.GetFocus {
				 58px;
				border: solid 1px #666;
				background-color: #eee;
			}
		</style>
		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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 {
				 100px;
				padding: 3px;
			}

			.GetFocus {
				border: solid 1px #666;
				background-color: #eee;
			}
		</style>
		<script language="javascript" type="text/javascript" src="http://t.zoukankan.com/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   style="241px">
			<div id="divA">
				<input type="text" value="可用文本框"   />
				<input type="text" disabled="disabled" value="不可用文本框"   />
			</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 {
				241px;
			}

			textarea, select, button, input, span {
				display: none;
			}

			.btn {
				border: solid 1px #666;
				padding: 2px;
				 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="http://t.zoukankan.com/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"   />
			<input type="password" value="PassWord"   />
			<input type="radio"/> <span id="Span1"> Radio</span>
			<input type="checkbox"/>
			<span id="Span2">CheckBox</span>
			<input type="submit" value="Submit"   />
			<input type="image" title="Image" src="http://t.zoukankan.com/images/logo.gif"   />
			<input type="reset" value="Reset"   />
			<input type="button" value="Button"   />
			<input type="file" title="File"   />
			<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;
				 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;
				 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="http://t.zoukankan.com/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="http://t.zoukankan.com/images/a2.gif" alt="" /></span>
			</div>

			<div class="clsContent">
				<ul>
					<li><a href="https://tool.4xseo.com/article/254312.html">小说</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">文艺</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">青春</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">少儿</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">生活</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">社科</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">管理</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">计算机</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">教育</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">工具书</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">引进版</a><i>(  1110  )</i></li>
					<li><a href="https://tool.4xseo.com/article/254312.html">其他类</a><i>(  1110  )</i></li>
				</ul>
				<div class="clsBot"><a href="https://tool.4xseo.com/article/254312.html">简化</a><img src="http://t.zoukankan.com/images/a5.gif" alt="" />
				</div>
			</div>
		</div>
	</body>
</html>

2.3.4 代码分析

2.4 本章小结

代码下载地址：《jQuery权威指南》学习笔记之第2章 jQuery选择器《jQuery权威指南》学习笔记之第2章 jQuery选择器

《jQuery权威指南》学习笔记之第2章 jQuery选择器

2.1 jQuery选择器概述

2.1.1 什么使选择器

2.1.2 选择器的优势: 代码更简单，完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色

示例2-2 使用jQuery选择器实现隔行变色

2.完善的检测机制 示例2-3 使用javascript输出文字信息

示例2-4 使用jQuery输出文字信息

2.2 jQuery选择器详解基本选择器 层次选择器 过滤选择器 |-简单过滤选择器 |-内容过滤选择器 |-可见性过滤选择器 |-属性过滤选择器 |-子元素过滤选择器 |-表单对象属性过滤选择性 表单选择器 2.2.1 基本选择器基本选择器语法：

选择器

功能

返回值

#id

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

单个元素

element

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

元素集合

.class

根据给定的类匹配元素

元素集合

*

匹配所有元素

元素集合

selector1,selectorN

将每一个选择器匹配到的元素合并后一起返回

元素集合

示例2-5 使用jQuery基本选择器选择元素

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层次选择器选择元素

说明: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.1.2 选择器的优势: 代码更简单，完善的检测机制
1.代码更简单
示例2-1 使用javascript实现隔行变色

2.完善的检测机制
示例2-3 使用javascript输出文字信息

2.2 jQuery选择器详解
基本选择器
层次选择器
过滤选择器
|-简单过滤选择器
|-内容过滤选择器
|-可见性过滤选择器
|-属性过滤选择器
|-子元素过滤选择器
|-表单对象属性过滤选择性
表单选择器

2.2.1 基本选择器
基本选择器语法：

2.2.2 层次选择器
层次选择器语法：

说明: ancestor descendant与 parent>child所选择的的元素集合是不同的，前者的层次关系是祖先和后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
示例2-6 使用jQuery层次选择器选择元素

2.2.3 简单过滤选择器
简单过滤选择器语法:

2.2.4 内容过滤选择器
内容过滤选择器语法:

2.2.5 可见性过滤选择器
可见性过滤选择器语法:

2.2.6 属性过滤选择器
属性过滤选择器语法:

2.2.7 子元素过滤选择器
子元素过滤选择器语法: