jQuery学习-jQuery选择器_jquery交集选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_43368682/article/details/107987362

jQuery特有选择器

1、基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

2、层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
兄弟元素选择器	$(‘prevSibling + nextSibling’)	相邻下一个兄弟元素选择器,匹配所有紧接在prevSibling元素后的nextSibling元素。
后排兄弟元素选择器	$(‘prev ~ sibling’)	匹配所有紧接在prev元素后所有的siblings元素。

3、基本过滤选择器

名称	用法	描述
:first	#(“div:first”)	选取所有div中的第一个div元素
:last	$(“div:last”)	选取所有div中的最后一个div元素
:not(selector)	$(“input:not(.myClass)”)	选取class不是myClass的input元素（返回集合元素）
:even	$(“input:even”)	选取索引是偶数的所有元素，索引从0开始，选取索引是偶数的input元素
:odd	$(“input:odd”)	选取索引是奇数的input元素
:eq(index)	$(“input:eq(1)”)	选取索引等于1的input元素
:gt(index)	$(“input:gt(1)”)	选取索引大于1的input元素（注：大于1 而不包括1）
:lt(index)	$(“input:lt(1)”)	选取索引小于1的input元素（注：小于1 而不包括1）
:header	$(":header")	选取网页中所有的所有的标题元素如 , , ……
:animated	$(“div:animated”)	选取当前正在执行动画的所有元素
:focus	$(":focus")	选取当前获取焦点的元素

选取的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	     <style type="text/css">
	     	.table div{
				height: 40px;
				border-bottom: 1px solid #ccc;
				line-height: 40px;
			}
	     </style>
	</head>
	<body>
		<h1>内容1</h1>
		<h1>内容2</h1>
		<h1>内容3</h1>
		<h1>内容4</h1>
		<h1>内容5</h1>
		<h1>内容6</h1>
		<h1>内容7</h1>
		<h1>内容8</h1>
		<h1>内容9</h1>
		<h1>内容10</h1>
		<br><br>
		<div class="table">
			<h2>一个表格</h2>
			<div>行1</div>
			<div>行2</div>
			<div>行3</div>
			<div>行4</div>
			<div>行5</div>
			<div>行6</div>
			<div>行7</div>
			<div>行8</div>
			<div>行9</div>
			<div>行10</div>
		</div>
		<script type="text/javascript">
			//索引值大于5，不包括5
			$("h1:gt(5)").css({
				background:"skyblue",
			})
			//索引值小于5，不包括5
			$("h1:lt(5)").css({
				background:"green",
			})
			//等于5，两种方式
			$("h1:eq(5)").css({
				background:"pink",
			})
			$("h1").eq(5).css({
				color:"white",
			})
			
			//选择奇数行元素
			$(".table div:odd").css({
				background:"#efefef",
			})
			
			//选择偶数行元素
			$(".table div:even").css({
				background:"antiquewhite",
			})
		</script>
	</body>
</html>

结果：
在这里插入图片描述

4属性选择器

名称	描述	格式
属性过滤器	用于筛选给定属性等于某特定值的所有元素	格式:$(“selector[attribute=value]”);
开始过滤器	用于选择给定属性是以某特定值开始的所有元素	格式:$(“selector[attribute^=value]”)
结尾过滤器	用于选择给定属性是以某特定值结尾的所有元素	格式: $(" s e l e c t o r [a t t r i b u t e$ =value]")
任意匹配过滤器	用于选择指定属性值包含给定字符串的所有元素	格式:$(“selector[attribute*=value]”)
包含过滤器	用于选择包含给定属性的所有元素	格式:$(“selector[attribute]”)
复合过滤器	用于选择同时满足多个条件的所有元素	格式:$(“selector[selector1][selector2]…[selector[N]”)

筛选选择器

名称	描述
$(“.dd”).children(“ul”)	找到.dd下的带Ul的所有子元素
.eq(index)	匹配index下标的元素
.first()	获取第一元素
.last()	获取最后一个元素
.find()	后代查找
.parent()	查找父标签
.siblings()	兄弟元素
.next()	下一个兄弟元素
.prev()	前一个兄弟元素

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="d1">
			<ol>
				<li>内容1</li>
				<li>内容2</li>
				<li>内容3</li>
				<li>内容4</li>
				<li>内容5</li>
				<li>内容6</li>
				<li>内容7</li>
				<li>内容8</li>
				<li>内容9</li>
				<ol>
					<li>子列表</li>
					<li>子列表</li>
					<li>子列表</li>
					<li>子列表</li>
					<li>子列表</li>
				</ol>
			</ol>
		</div>
		<script type="text/javascript">
			var d1=$('.d1');
			//查找d1下的子孙元素
			var li=d1.find("li")
			console.log(li)
			
			//获取直接子元素
			var childol=d1.children("ol")
			console.log(childol)
			
			//获取兄弟元素
			var brother=d1.find("li:eq(3)").siblings()
			console.log(brother)
		</script>
	</body>
</html>

结果：
在这里插入图片描述

一个切换内容的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
        	.btnList{
				width: 900px;
				margin: 0 auto;
				height: 100px;
				display: flex;
			}
			.btn{
				width: 300px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				border: 1px solid #CCCCCC;
			}
			.btn.active{
				background-color: #CCCCCC;
			}
			.contentList{
				width: 900px;
				height: 600px;
				position: relative;
				margin: 0 auto;
			}
			.content{
				width: 900px;
				width: 900px;
				height: 600px;
				position: absolute;
				left: 0;
				top:0;
				background: #efefef;
				padding: 50px;
				box-sizing: border-box;
				opacity: 0;
				/* transition: all 0.2s; */
			}
			.content.active{
				opacity: 1;
			}
        </style>
	</head>
	<body>
		<div class="btnList">
			<div class="btn active">内容1</div>
			<div class="btn">内容2</div>
			<div class="btn">内容3</div>
		</div>
		<div class="contentList">
			<div class="content active">
				这是内容1,这是内容1,这是内容1,这是内容1,这是内容1
			</div>
			<div class="content">
				这是内容2,这是内容2，这是内容2，这是内容2，这是内容2
			</div>
			<div class="content">
				这是内容3，这是内容3，这是内容3，这是内容3，这是内容3
			</div>
		</div>
		<script type="text/javascript">
			$(".btn").click(function(){
				//获取当前索引值
				var index=$(this).index()
				$(".btn").eq(index).addClass("active").siblings().removeClass("active")
				$(".content").eq(index).addClass("active").siblings().removeClass("active")
			})
		</script>
	</body>
</html>