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

时间：2022-09-05 09:28:54

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 本章小结

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

《jQuery权威指南》学习笔记之第2章 jQuery选择器的更多相关文章

  1. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

  2. 《HTTP 权威指南》笔记&colon;第十六章&amp&semi;第十七章 国际化、内容协商与转码

    <HTTP 权威指南>笔记:第十六章 国际化 客户端通过在请求报文中的 Accept-Language 首部和 Accept-Charset 首部来告知服务器:“我理解这些语言.”服务器通 ...

  3. CSS权威指南学习笔记系列&lpar;1&rpar;CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  4. Hadoop权威指南学习笔记二

    MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...

  5. Hadoop权威指南学习笔记一

    Hadoop简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出.一起学习一起进步. 转载请注明:http://blog.csdn.net/ ...

  6. Hadoop权威指南学习笔记三

    HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...

  7. IDA Pro权威指南学习笔记&lpar;一&rpar;

    一直不懂逆向,最近刚好不忙,于是学习逆向,用来做笔记,顺便和大家分享交流. 参考书籍<IAD PRO权威指南> 工具: PETools: ETools 是另一款很好的PE文件编辑工具,以前 ...

  8. JavaScript权威指南学习笔记6

    这两天主要翻看了书中的第18-22章,重点看了第17章:事件化处理,其它几章节主要是翻了下书知道有相关的概念,没有真正理解其中的内容,或者没有考虑究竟如何能把里面的内容应用到实际的项目中.说的讽刺一点 ...

  9. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

随机推荐

  1. IncDec Sequence（codevs 2098）

    题目描述 Description 给定一个长度为n的数列{a1,a2...an},每次可以选择一个区间[l,r],使这个区间内的数都加一或者都减一. 问至少需要多少次操作才能使数列中的所有数都一样,并 ...

  2. java反射机制浅谈

    一.Java的反射机制浅谈 最近研究java研究得很给力,主要以看博文为学习方式.以下是我对java的反射机制所产生的一些感悟,希望各位童鞋看到失误之处不吝指出.受到各位指教之处,如若让小生好好感动, ...

  3. source insight快捷键及使用技巧

      source insight快捷键及使用技巧 退出程序                             : Alt+F4 重画屏幕                             ...

  4. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  5. java&period;lang&period;ClassNotFoundException&colon; com&period;sun&period;jna&period;Native

    在使用sprng boot加elasticsearch的时候遇到 java.lang.ClassNotFoundException: com.sun.jna.Native,百度之后要我导入 <d ...

  6. GNOME 3&period;28 启用桌面图标

    原由 GNOME 3.28合并了移除桌面图标支持 Nautilus从此不在支持桌面图标,直到找到新的解决方案 Issues地址:https://gitlab.gnome.org/GNOME/nauti ...

  7. 小程序自定义tabBar，动态控制tabBar

    最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单.当时我就有点小懵逼了,这个不是小程序自带的组件么?还要做成动态?这就有点尴尬了..... 不过也只是一时尴尬而 ...

  8. easyui改变tab标题

    截图:   代码: //更改tab的标题 var tab = $('#microAppVersionTabs').tabs('getTab',0);// 取得第一个tab $('#microAppVe ...

  9. windows安装xgboost

    https://blog.csdn.net/leo_xu06/article/details/52300869 参考部分共同安装的部分: https://www.cnblogs.com/kongcon ...

  10. PHP标准库 SPL

    PHP SPL笔记 这几天,我在学习PHP语言中的SPL. 这个东西应该属于PHP中的高级内容,看上去很复杂,但是非常有用,所以我做了长篇笔记.不然记不住,以后要用的时候,还是要从头学起. 由于这是供 ...

相关文章