第二章 jQuery选择器 读书笔记

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量389 收藏
点赞数
分类专栏： 《jQuery权威指南》学习笔记 js JavaScript 文章标签： jquery function javascript div html class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuoanlove/article/details/7486979
版权

2.1 jQuery 选择器概述

2.1.1 什么是选择器

          jQuery允许通过标签名，属性名或内容对DOM元素进行快速、准确的选择。

2.1.2 选择器的优势

         与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：

         代码更简单

         完善的检测机制

示例2-1 使用JavaScript实现隔行变色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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}
    #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>
首先通过ID号获取表格元素，然后遍历表格的各行，根据行号的奇偶性，动态设置该行的背景色

循环页面的元素会影响打开速度，如果使用jQuery选择器实现上述页面效果，则需要在页面中加入一些代码，如：

代码清单2-2 使用jQuery选择器实现隔行变色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery选择器实现隔行变色</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<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}
    #tbStu tr th{background-color:#ccc;color:#fff}
    #tbStu .trOdd{background-color:#fff}
</style>
<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>
:nth-child(2n)是css的一个选择器，对于在DOM树中有an+b-1个兄弟节点的元素，通过:nth-child可以选择哪些元素应用样式，这些兄弟节点中编号从1开始

语法：element:nth-child(an+b){style properties}

            表示element 对应的元素中，第an+b(n可以是任意整数)个元素应用css样式

tr:nth-child(2n+1):表示表中奇数行将显示这个定义的样式

tr:nth-child(odd):表示表中奇数行将显示这个定义的样式

tr:nth-child(2n):表示表中偶数行将显示这个定义的样式

tr:nth-child(even):表示表中偶数行将显示这个定义的样式

2.完善的检测机制

在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或者被前面代码所删除，那么浏览器将提示运行出错信息， 因此，先要检测该元素是否存在，然后再运行其属性或事件代码。

在jQuery选择器定位页面元素时，无需考虑所定位的元素在页面中是否存在，即使改元素不存在，浏览器也不提示出错。

示例2-3 使用JavaScript输出文字信息

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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输出文字信息 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 代码检测页面元素</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<script type="text/javascript">
	$(function(){
		$("#divT").html("这是一个检测页面");
	});
</script>
</head>
<body>
	
</body>
</html>
2.2 jQuery 选择器详解

根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。

其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种

基本选择器层次选择器过滤选择器表单选择器
  简单过滤选择器 
  内容过滤选择器 
  可见性过滤选择器 
  属性过滤选择器 
  子元素过滤选择器 
  表单对象属性过滤选择器器 

2.2.1 基本选择器
基本选择器由元素Id,Class,元素名，多个选择符组成

表2-1 基本选择器语法
选择器功能返回值
#id根据给定的ID匹配一个元素单个元素
element根据给定的元素名匹配所有元素元素集合
.class根据给定的类匹配元素元素集合
*匹配所有元素元素集合
selector1,selectorN将每一个选择器匹配到的元素合并后一起返回元素集合

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery基本选择器</title>
<script language="javascript" type="text/javascript"
	src="../jquery/jquery-1.3.1.js"></script>
<style type="text/css">
body {
	font-size: 12px;
	text-align: center
}

.clsFrame {
	width: 300px;
	height: 100px
}

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

.clsOne {
	background-color: #eee
}
</style>
<script type="text/javascript">
	$(function(){//ID匹配元素
		$("#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>
   <span>123</span>
</div>
</body>
</html>
表2-2 页面执行效果
关键代码功能描述页面效果
$("#divOne").css("display","block");显示ID为divOne的页面元素 
$("div span").css("display","block");显示元素名为span的页面元素 
$(".clsFrame .clsOne").css("display","block");显示类别名为clsOne的页面元素 
$("*").css("display","block");显示页面中所有元素 
$("#divOne,span").css("display","block");显示ID为divOne和元素名为span页面元素 

2.2.2 层次选择器
层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系
表2-3 层次选择器
选择器功能返回值
ancestor descendant根据祖先元素匹配所有的后代元素元素集合
parent > child根据父元素匹配所有的子元素元素集合
prev + next 匹配所有紧接在prev元素后的相邻元素元素集合
prev ~ siblings匹配prev元素之后的所有兄弟元素元素集合
说明：
          ancestor descendant 与parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
示例2-6 使用jQuery层次选择器选择元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery层次选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.1.js"></script>
<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 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().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>
表2-4 页面执行效果
关键代码功能描述页面效果
$("div span").css("display","block");显示<div>中所有的<span> 
$("div>span").css("display","block");显示<div>中子<span>标记 
$("#divMid + div").css("display","block");显示ID为divMid元素后的下一个<div> 
$("#divMid ~ div").css("display","block")显示ID为divMid元素后的所有<div> 
$("#divMid").siblings("div").css("display","block")显示ID为divMid元素的所有相邻<div> 
说明 siblings()方法与选择器prev~siblings区别在于， 前者取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分。
2.2.3 简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头
表2-5 简单过滤选择器语法
选择器功能返回值
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基本过滤选择器选择元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery基本过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<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 type="text/javascript">
	/*$(function(){//增加第一个元素的类别
		$("li:first").addClass("GetFocus");
	})
	$(function(){//增加最后一个元素的类别
		$("li:last").addClass("GetFocus");
	})
	$(function(){//增加去除所有与给定选择器匹配的元素类别
		$("li:not(.NotClass)").addClass("GetFocus");
	})
	$(function(){//增加所有索引值为偶数的元素类别，从0开始计数
		$("li:even").addClass("GetFocus");
	})
	$(function(){//增加所有索引值为奇数的元素类别，从0开始计数
		$("li:odd").addClass("GetFocus");
	})
	$(function(){//增加一个给定索引值的元素类别，从0开始计数
		$("li:eq(1)").addClass("GetFocus");
	})
	$(function(){//增加所有大于给定索引值的元素类别，从0开始计数
		$("li:gt(1)").addClass("GetFocus");
	})
	$(function(){//增加所有小于给定索引值的元素类别，从0开始计数
		$("li:lt(4)").addClass("GetFocus");
	})
	$(function(){//增加标题类元素类别
		$("div h1").css("width","238")
		$(":header").addClass("GetFocus");
	})
	$(function(){
		animateIt();//增加动画效果元素类别
		$("#spnMove:animated").addClass("GetFocus");
	})
	$(function(){//动画效果
		$("#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>

关键代码功能描述页面效果
$("li:first").addClass("GetFocus");增加第一个元素的类别 
$("li:last").addClass("GetFocus");增加最后一个元素的类别 
$("li:not(.NotClass)").addClass("GetFocus");增加去除所有与给定选择器匹配的元素类别 
$("li:even").addClass("GetFocus");增加所有索引值为偶数的元素类别，从0开始计数 
$("li:odd").addClass("GetFocus");增加所有索引值为奇数的元素类别，从0开始计数 
$("li:eq(1)").addClass("GetFocus");增加一个给定索引值的元素类别，从0开始计数 
$("li:gt(1)").addClass("GetFocus");增加所有大于给定索引值的元素类别，从0开始计数 
$("li:lt(4)").addClass("GetFocus");增加所有小于给定索引值的元素类别，从0开始计数 
$(":header").addClass("GetFocus");增加标题类元素类别 
$("#spnMove:animated").addClass("GetFocus");增加动画效果元素类别 
说明 选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt(),然后执行该函数，选择器才能获取动画效果元素，并增加其类别。
2.2.4 内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。
表2-7 内容过滤选择器语法
选择器功能返回值
:contains(text)获取包含给定文本的元素元素集合
:empty获取所有不包含子元素或者文本的空元素元素集合
:has(selector)获取含有选择器所匹配的元素的元素元素集合
:parent获取含有子元素或者文本的元素元素集合
示例2-8 使用jQuery内容过滤选择器选择元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery内容过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<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 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>
		A
	</div>
	<div>
		<span>12</span>
	</div>
	<div>EFaH</div>
	<div></div>
</body>
</html>

表 2-8 页面执行效果
关键代码功能描述页面效果
$("div:contains('A')").css("display","block");显示包含给定文本"A"的元素 
$("div:empty").css("display","block");显示所有不包含子元素或者文本的空元素 
$("div:has(span)").css("display","block");显示含有<span>标记的元素 
$("div:parent").css("display","block");显示含有子元素或者文本的元素 
说明：在:contain(text)内容过滤选择器中，如果是查找字母，则有大小写的区别。

2.2.5 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素
表2-9 可见性过滤选择器语法
选择器功能返回值
:hidden获取所有不可见元素，或者type为hidden的元素元素集合
:visible获取所有的可见元素元素集合
示例2-9 使用jQuery可见性过滤选择器选择元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery可见性过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<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 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>

表2-10 页面执行结果
关键代码功能描述页面效果
$("div:visible").addClass("GetFocus");增加所有可见元素类别 
$("span:hidden").show().addClass("GetFocus");增加所有不可见元素类别 
说明  :hidden选择器所选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式visibility:hidden的所有元素
2.2.6 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以"]"号结束
表2-11 属性过滤选择器语法
选择器功能返回值
[attribute]获取包含给定属性的元素元素集合
[attribute=value]获取等于给定的属性是某个特定值的元素元素集合
[attribute!=value]获取不等于给定的属性是某个特定值的元素元素集合
[attribuge^=value]获取给定的属性是以某些值开始的元素元素集合
[attribuge$=value]获取给定的属性是以某些值结尾的元素元素集合
[attribute*=value]获取给定的属性是以包含某些值的元素元素集合
[selector1][selector2][selector3]获取满足多个条件的复合属性的元素元素集合
示例2-10 使用jQuery属性过滤选择器选择元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery属性过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<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 type="text/javascript">
	/*$(function(){//显示所有含有id属性的元素
		$("[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的值中含有"B"的元素
		$("div[title*='B']").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>
表2-12 页面执行效果
关键代码功能描述页面效果
$("[id]").show(3000)显示所有含有id属性的元素 
$("div[title='A']").show(3000);显示所有属性title的值是“A”的元素 
$("div[title!='A']").show(3000);显示所有属性title的值不是"A"的元素 
$("div[title^='A']").show(3000);显示所有属性title的值以"A"开始的元素 
$("div[title$='C']").show(3000);显示所有属性title的值以“C”结束的元素 
$("div[title*='B']").show(3000);显示所有属性title的值中含有“B”的元素 
$("div[id='divAB'][title*='B']").show(3000);显示所有属性title的值中含有"B'且属性id的值是"divAB"的元素 
说明 show()是jQuery库中的一个显示元素函数，括号中的参数表示显示时间，单位是毫秒，show(3000)表示用3000毫秒显示。
2.2.7 子元素过滤选择器
突出指定某行的需求
jQuery可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。
表 2-13 子元素过滤选择器语法
选择器功能返回值
:nth-child(eq|even|odd|index)获取每个父元素下的特定位置元素，索引号从1开始元素集合
:first-child获取每个父元素下的第一个子元素元素集合
:last-child获取每个父元素下的最后一个子元素元素集合
:only-child获取每个父元素下的仅有一个子元素元素集合
2-11 使用jQuery子元素过滤选择器选择元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery子元素过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<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 type="text/javascript">
	/*$(function(){//增加每个父元素下的第2个子元素类别
		$("li:nth-child(2)").addClass("GetFocus");
	})
	$(function(){//增加每个父元素下的第一个子元素类别
		$("li:first-child").addClass("GetFocus");
	})
	$(function(){//增加每个父元素下的最后一个子元素类别
		$("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-14 页面执行效果
关键代码功能描述页面效果
$("li:nth-child(2)").addClass("GetFocus");增加每个父元素下的第二个子元素类别 
$("li:first-child").addClass("GetFocus");增加每个父元素下的第一个子元素类别 
$("li:last-child").addClass("GetFocus");增加每个父元素下的最后一个子元素类别 
$("li:only-child").addClass("GetFocus");增加每个父元素下的仅有一个子元素类别 
2.2.8 表单对象属性过滤选择器
表单对象属性过滤器通过表单中的某对象属性特征获取该元素，如enabled、disabled、checked、selected
表2-15 表单对象属性过滤选择器
选择器功能返回值
:enable获取表单中所有属性为可用的元素元素集合
:disable获取表单中所有属性为不可用的元素元素集合
:checked获取表单中所有被选中的元素元素集合
:selected获取表单中所有被选中option的元素元素集合
示例2-12 通过表单对象属性过滤选择器获取表单对象 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery子元素过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<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 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-16 页面执行效果
关键代码功能描述页面效果
$("#form1 input:enabled").addClass("GetFocus")增加表单中所有属性为可用的元素类别 
$("#form1 input:disabled").addClass("GetFocus")增加表单中所有属性为不可用的元素类别 
$("#form1 input:checked").addClass("GetFocus");增加表中所有被选中的元素类别 
$("#Span2").html("选中项是："+$("select option:selected").text());显示表单中所有被选中option的元素内容 
2.2.9 表单选择器
表2-17 表单选择器语法
选择器功能返回值
:input获取所有input textarea select元素集合
:text获取所有单行文本框元素集合
:password获取所有密码框元素集合
:radio获取所有单选按钮元素集合
:checkbox获取所有复选框元素集合
:submit获取所有提交按钮元素集合
:image获取所有图像域元素集合
:reset获取所有重置按钮元素集合
:button获取所有按钮元素集合
:file获取所有文件域元素集合
代码清单2-13 使用jQuery表单过滤选择器获取元素 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jQuery表单过滤选择器</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
	body{font-size:12px;text-align:center}
	form{width:241px}
	textarea,select,button,input,span{display:none}
	.btn{border:#666 1px solid;padding:2px;width:60px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#Ece9D8)}
	.txt{border:#666 1px solid;padding:3px}
	.img{padding:2px;border:solid 1px #ccc}
	.div{border:solid 1px #ccc;background-color:#eee;padding:5px}	
</style>
<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>
		<input type="checkbox"/>
		<span id="Span2">Checkbox</span>
		<input type="submit" value="Submit" class="btn"/>
		<input type="image" title="Image" src="../images/twowayAdvertTest/logo_jquery.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-18 页面执行效果
关键代码功能描述页面效果
$("#form1 div").html("表单共找出Input类型元素："+$("#form1 :input").length);显示input类型元素的总数量 
$("#form1 :text").show(3000);显示所有文本框对象 
$("#form1 :password").show(3000);显示所有密码框对象 
$("#form1 :radio").show(3000);显示所有单选按钮 
$("#form1 :checkbox").show(3000);显示所有复选框对象 
$("#form1 :submit").show(3000);显示所有提交按钮对象 
$("#form1 :image").show(3000);显示所有图片域钮对象 
$("#form1 :reset").show(3000);显示所有重置按钮对象 
$("#form1 :button").show(3000);显示所有按钮对象 
$("#form1 :file").show(3000);显示所有文件域对象 
综合案例分析---导航条在项目中的应用 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>导航条在项目中的应用</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
		body{font-size:13px}
         #divFrame{border:solid 1px #666;width:301px;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;padding-bottom:5px}
         .GetFocus{background-color:#eee}
</style>
<script type="text/javascript">
	
	$(function(){//页面加载事件
		$(".clsHead").click(function(){//图片单击事件
			if($(".clsContent").is(":visible")){//如果内容可见
				$(".clsHead span img").attr("src","../images/2/a1.gif");//改变图片
				//隐藏内容
				$(".clsContent").css("display","none");
			}else{
				$(".clsHead span img").attr("src","../images/2/a2.gif");//改变图片
				//显示内容
				$(".clsContent").css("display","block");
			}
		});
		$(".clsBot > a").click(function(){//热点链接单击事件
			//如果内容为"简化"字样
			if($(".clsBot > a").text()=="简化"){
				//隐藏index号大于4且不是最后一项的元素
				$("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="../images/2/a2.gif" alt=""/></span>
		</div>
		<div class="clsContent">
			<ul>
				<li><a href="#">小说</a><li>（1110）</li></li>
				<li><a href="#">文艺</a><li>（230）</li></li>
				<li><a href="#">青春</a><li>（1430）</li></li>
				<li><a href="#">少儿</a><li>（1560）</li></li>
				<li><a href="#">生活</a><li>（870）</li></li>
				<li><a href="#">社科</a><li>（1460）</li></li>
				<li><a href="#">管理</a><li>（1450）</li></li>
				<li><a href="#">计算机</a><li>（1780）</li></li>
				<li><a href="#">教育</a><li>（930）</li></li>
				<li><a href="#">工具书</a><li>（3450）</li></li>
				<li><a href="#">引进版</a><li>（980）</li></li>
				<li><a href="#">其他类</a><li>（3230）</li></li>
			</ul>
		</div>
		<div class="clsBot">
			<a href="#">简化</a>
			<img src="../images/2/a5.gif" alt=""/>
		</div>
	</div>
</body>
</html>
以上代码在chrome浏览器下，点击“简化”按钮出现如下警告：
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
2.3.4
在页面代码中，首先通过如下代码： 
$(".clsContent").css("display","none");
获取类名称为"clsContent"的元素集合，并实现其内容的显示或者隐藏。与此同时，通过下面代码变换图片： 
$(".clsHead span img").attr("src","../images/2/a2.gif");
其中“.clsHead span img”表示获取类型clsHead中<span>下的<img>标记，即图片元素；attr(key,value)是jQuery中一个设置元素属性的函数，其功能是为所匹配的元素设置属性值，key是属性名称，value是属性值或内容。因此，此行代码的功能是，获取图片元素并改变其图片来源。
首先通过如下代码，检测当前内容的隐藏或显示状态 
if($(".clsContent").is(":visible")){
其中“$(".clsContent”)获取内容元素，“is”是判断，":visible"表示是否可见，此行代码用于判断内容元素是否可见，它返回一个布尔值，如果为true，则执行if后面的语句块，否则执行else后面的语句块
在超级链接单击事件中，通过下面的代码检测单击的是“简化”还是“更多”字样 
if($(".clsBot > a").text()=="简化"){
其中$(".clsBot > a")获取超链接元素，text()是jQuery中一个获取元素内容的函数。
在代码中 
$("ul li:gt(4):not(:last)").hide();



其中，“ul li”获取元素，":gt(4)"和":not(:last)"分别为两个并列的过滤选择条件，前者表示Index号大于4，后者表示不是最后一个元素，二者组合成一个过滤条件，即选Index号大于4并且不是最后一个的元素集合；hide()是jQuery中一个隐藏元素的函数。



 

 


                

        

        

    




    

      

        

            

              
                
                  zuoanlove
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Jquery实战_读书笔记2 选择器

				
			

			

				

					10-29
				

			

		

		

			
				
jQuery相对于其他的javascript框架优秀的特点之一就是元素选择功能，通过简单的一条件语句可以查询一些复杂的元素

			
		

	



                

              
                



	

		

			

				
					
根据页面的id隐藏当前元素所在的tr

				
			

			

				

					18妹的小窝
				

				

					07-10
					
					1408
					
				

			

		

		

			
				
.NoDisplay
    {
        display: none;
    }
  
---隐藏最后行
    $(function () {
        $('#displayTable tr:last').addClass('NoDisplay');
    });  
---根据id  FilialeId进行隐藏
    $(function () {


			
		

	



                


  
              

                


	

		

			

				
					
JQuery 学习笔记 选择器之二

				
			

			

				

					12-10
				

			

		

		

			
				
本篇学习笔记将深入探讨jQuery中的四种选择器：后代选择器、子元素选择器、相邻兄弟选择器和一般兄弟选择器。  1. **后代选择器（Descendant Selector）**  后代选择器，用空格分隔两个选择器，表示第一个选择器的...

			
		

	





	

		

			

				
					
jQuery 3.1 标准课程第二章 选择器基本选择器

				
			

			

				

					10-31
				

			

		

		

			
				
jQuery 3.1 标准课程第二章 选择器基本选择器

			
		

	



		

			
		



	

		

			

				
					
js对<span>标签隐藏显示操作

				
			

			

				

					lester的专栏
				

				

					10-24
					
					6999
					
				

			

		

		

			
				
span隐藏
html:
span显示
js:
var emailInfoSpan = document.getElementById('emailInfoSpan');
emailInfoSpan.style.display='';

			
		

	





	

		

			

				
					
第一章 加载和执行(Loading and Execution)读书笔记

				
			

			

				

					lester的专栏
				

				

					04-19
					
					517
					
				

			

		

		

			
				
当浏览器遇到标签时，浏览器会停止处理页面，先执行JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用src属性加载JavaScript的过程中，浏览器必须先花时间下载外连接文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了[注：动态加载JavaScript除外]。
1.1 脚本位置(Script Positioning)
浏览器在解析到标签之前，

			
		

	





	

		

			

				
					
第三章 jQuery操作DOM

				
			

			

				

					lester的专栏
				

				

					04-24
					
					402
					
				

			

		

		

			
				
DOM(Document Object Model,文档对象模型)为文档提供了一种结果化表示方法，通过该方法可以改变文档的内容和展示形式。
3.1 DOM基础
示例3-1 创建一个DOM页面文档





DOM树状文档

	body{font-size:13px}
	table,div,p,ul{width:280px;border:solid 1px #666;margin:10px

			
		

	





	

		

			

				
					
第一章 jquery开发入门 学习笔记

				
			

			

				

					lester的专栏
				

				

					04-22
					
					383
					
				

			

		

		

			
				
1.1 jQuery概述
1.1.1 jQuery主旨：以更少的代码，实现更多的功能(Write less,do more)
1.1.2 jQuery基本功能
         1、访问和操作DOM元素
         2、控制页面样式
         3、对页面事件的处理
              引入jQuery库后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序逻

			
		

	





	

		

			

				
					
Vue 3 和 SpringBoot 实现文件分片上传示例

				
			

			

				

					exlink2012的专栏
				

				

					07-22
					
					257
					
				

			

		

		

			
				
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。

			
		

	





	

		

			

				
					
VUE中的重点*

					
最新发布

				
			

			

				

					qq_61132537的博客
				

				

					07-22
					
					640
					
				

			

		

		

			
				
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。

			
		

	





	

		

			

				
					
jquery-选择器常见用法

				
			

			

				

					随笔
				

				

					07-18
					
					208
					
				

			

		

		

			
				
jquery-选择器，对象下有多个子元素时如何选择

			
		

	





	

		

			

				
					
Vue3企业级项目开发实战课-笔记记录

				
			

			

				

					tuku0801的专栏
				

				

					07-20
					
					938
					
				

			

		

		

			
				
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景

			
		

	





	

		

			

				
					
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询

				
			

			

				

					jwbabc的专栏
				

				

					07-18
					
					241
					
				

			

		

		

			
				
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。

			
		

	





	

		

			

				
					
谷粒商城实战笔记-35-前端基础-ES6-模块化

				
			

			

				

					epitomizelu的专栏
				

				

					07-20
					
					487
					
				

			

		

		

			
				
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。

			
		

	





	

		

			

				
					
HOW - SVG 图标组件封装（Lucide React）

				
			

			

				

					weixin_58540586的博客
				

				

					07-18
					
					1212
					
				

			

		

		

			
				
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。

			
		

	





	

		

			

				
					
web前端 React 框架面试200题（三）

				
			

			

				

					柯晓楠
				

				

					07-21
					
					416
					
				

			

		

		

			
				
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。

			
		

	





	

		

			

				
					
VUE项目中使用crypto.getRandomValues代替Math.Random

				
			

			

				

					
				

				

					07-18
					
					36
					
				

			

		

		

			
				
由于 Math.random() 的底层算法是公开的（xorshift128+ 算法），V8 源码可见，因此，是可以使用其他语言模拟的，这就导致，如果攻击者知道了当前随机生成器的状态，那就可以知道缓存中的所有随机数，那就很容易匹配与破解。为了保证足够的性能，Math.random()随机数并不是实时生成的，而是直接生成一组随机数（64个），并放在缓存中，当这一组随机数取完之后再重新生成一批，放在缓存中。crypto这个对象在目前的浏览器中大多都默认加载了，所以可以使用公共函数方式来引用和使用。

			
		

	





	

		

			

				
					
vue3 vxe-grid查询有返回数据，但是不显示的问题解决

				
			

			

				

					jwbabc的专栏
				

				

					07-18
					
					320
					
				

			

		

		

			
				
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值