第十四章 jQuery选择器

斑马有点困

于 2022-07-04 17:22:16 发布

阅读量133

点赞数

分类专栏： # web前端笔记文章标签： jquery css css3

本文链接：https://blog.csdn.net/qq_36827283/article/details/125604700

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素

jQuery选择器分类

通过CSS选择器选取元素
基本选择器
层次选择器
属性选择器
通过过滤选择器选择元素
基本过滤选择器
可见性过滤选择器

基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	*$(“” )选取所有元素**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				//标签
				$("h1").css("color","red");
				//类选择器
				$(".a").css("background","yellowgreen");
				//id选择器
				$("#b").css("font-size","30px");
			});
		</script>
	</head>
	<body>
		<h1>aaaaaaaaa</h1>
		<h2 class="a">bbbbbbbbbbbb</h2>
		<h3 id="b">cccccccccccccc</h3>
		
	</body>
</html>

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$(“#menu span” )选取#menu下的span元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素span
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻h2元素之后的同辈元素dl
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取h2元素之后所有的同辈元素dl

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				//后代
				$("ul a").css("font-size","30px");
				//子选择器
				$("div>a").css("color","red");
				//相邻
				$("ul+a").css("font-size","40px");
				//同辈元素选择器
				$("ul~a").css("font-size","50px");
			});
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">6</a></li>
			</ul>
			<a href="#">1</a><br />
			<a href="#">2</a><br />
			<a href="#">3</a><br />
		</div>
	</body>
</html>

属性选择器

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [h r e f$ =‘.jpg’]" )选取href属性值以.jpg结尾的元素
*[attribute=value]**	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				$("[href]").css("background-color","yellowgreen")
				$("[href^='http']").css("color","red");
				$("[href$='com']").css("font-size","50px");
				$("[href*='html']").css("font-size","50px");
			});
		</script>
	</head>
		<a href="http://www.baidu.com">百度</a><br />
		<a href="http://www.sougou.com">搜狗</a><br />
		<a href="http://www.daqiang.com">大枪</a><br />
		<a href="index.html">基本选择器</a><br />
		<a href="http://www.taobao.com">taobao</a><br />
	<body>
	</body>
</html>

过滤选择器

主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、子元素过滤选择器……

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(“:header” )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(“:focus” )选取当前获取焦点的元素
:animated	选择所有动画	$(“:animated” )选取当前所有动画元素

语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤</title>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				//索引等于2的
				$("li:eq(2)").css("background-color","red");
				//大于
				$("li:gt(2)").css("background-color","blue");
				//小于
				$("li:lt(2)").css("background-color","green");
				//所有的 h元素
				$(":header").css("color","yellowgreen");
				$("input:focus").css("border","1px solid red");
				$("li:first").css("color","white");
				$("li:last").css("color","yellow");
				//奇数  索引
				$("li:odd").css("font-size","50px");
				//偶数  索引
				$("li:even").css("font-size","80px");
			});
		</script>
	</head>
	<body>
		<input type="text">
		<input type="text">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<h1>1</h1>
		<h2>2</h2>
		<h3>3</h3>
	</body>
</html>

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(“:visible” )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(“:hidden” ) 选取所有隐藏的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<style>
			.a{
				display: none;
			}
		</style>
		<script>
			$(function(){
				$(":visible").hide();//让所有元素隐藏
				$(":hidden").show();//所有隐藏的可见
			});
		</script>
	</head>
	<body>
		<h1 class="a">aaaaaaaaaaaaaa</h1>
		<h2 class="b">bbbbbbbbbbbbbb</h2>
	</body>
</html>