jQuer基本y选择器，层次选择器，基本过滤选择器

最新推荐文章于 2024-01-14 11:54:30 发布

vhujbvf

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量127

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_51592187/article/details/115773352

版权

笔记专栏收录该内容

129 篇文章 0 订阅

订阅专栏

jQuery基本选择器，层次选择器，基本过滤选择器

一，基本选择器

<!DOCTYPE<!-- html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title><script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function(){//表示页面加载完成之后 相当于onload事件
				// //1.id选择器（根据id查找对象）
				// $("#1").click(function(){
				// 	$("#m1").css("background-color","red");
				// 	alert("id选择器");
				// });
				// //2.class选择器(根据class查找对象)
				// $(".2").click(function(){
				// 	$(".m2").css("background-color","blue");
				// 	alert("class选择器");
				// });
				// //3.element选择器(根据标签名查找对象)
				// $("div").click(function(){
				// 	alert("查找所有div");
				// });
				// //4.*(所有元素)
				// $("*").click(function(){
				// 	alert("查找所有元素");
				// }); -->
				//5.组合选择器
				$("#4").click(function(){
					$("span,#m1").css("background-color","grey");
				});
			});
		</script>
	</head>
	<body>
		<div id="1">
			<div id="m1">胡</div>
		</div>
		<div class="2">
			<div class="m2">马</div>
		</div>
		<div id="3">
			<span id="m3">张</span>
		</div>
		<div id="4">
			<span id="m4">王</span>
		</div>
	</body>
</html>

二，层次选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function(){//表示页面加载完成之后 相当于onload事件
				//1.选择body里面所有div元素
				$("#1").click(function(){
					$("body div").css("background-color","red");
					alert("选择body里面所有div元素");
				});
				// //2.选择body内所有div子元素
				$(".2").click(function(){
					$("body > div").css("background-color","blue");
					alert("选择body内所有div子元素");
				});
				//3.选择id为3得下一个div元素
				$("#3").click(function(){
					$("#3 + div").css("background-color","yellow");
					alert("选择id为3得下一个元素");
				});
				//4.选择id为4后面得所有div元素
				$("#4").click(function(){
					$("#4 ~ div").css("background-color","grey");
					alert("选择id为4得所有div元素");
				});
			});
		</script>
	</head>
	<body>
		<div id="1">
			<div id="m1">胡</div>
		</div>
		<div class="2">
			<div class="m2">马</div>
		</div>
		<div id="3">
			<span id="m3">张</span>
		</div>
		<div id="4">
			<span id="m4">王</span>
		</div>
		<div id="3">
			<span id="m3">张</span>
		</div>
		<div id="4">
			<span id="m4">王</span>
		</div>
	</body>
<cml>

三，基本过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本过滤选择器</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function(){//表示页面加载完成之后 相当于onload事件
				//1.选择第一个div元素
				$("#1").click(function(){
					$("div:first").css("background-color","red");
					alert("选择第一个div元素");
				});
				//2.选择最后一个div元素
				$(".2").click(function(){
					$("div:last").css("background-color","blue");
					alert("选择最后一个div元素");
				});
				//3.选择class不为2得所有div
				$("#3").click(function(){
					$("div:not(.2)").css("background-color","yellow");
					alert("选择class不为2得所有div");
				});
				//4.选择索引值为偶数得div(从0开始)
				$("#4").click(function(){
					$("div:even").css("background-color","grey");
					alert("选择索引值为偶数得div(从0开始)");
				});
				//5.选择索引值为奇数得div(从0开始)
				$("#5").click(function(){
					$("div:odd").css("background-color","grey");
					alert("选择索引值为奇数得div(从0开始)");
				});
				//6.选择索引值大于3得div(从0开始)
				$("#6").click(function(){
					$("div:gt(3)").css("background-color","grey");
					alert("选择索引值大于3得div(从0开始)");
				});
				//7.选择索引值等于3得div(从0开始)
				$("#7").click(function(){
					$("div:eq(3)").css("background-color","grey");
					alert("选择索引值等于3得div(从0开始)");
				});
				//8.选择索引值小于3得div(从0开始)
				$("#8").click(function(){
					$("div:gt(3)").css("background-color","grey");
					alert("选择索引值小于3得div(从0开始)");
				});
				//8.选择所有标题元素
				$("#8").click(function(){
					$(":header").css("background-color","grey");
					alert("选择所有标题元素");
				});
				//8.选择当前正在执行动画的元素
				$("#8").click(function(){
					$(":animated").css("background-color","grey");
					alert("选择所有标题元素");
				});
			});
		</script>
	</head>
	<body>
		<div id="1">
			<span id="m1">胡</span>
		</div>
		<div class="2">
			<span class="m2">马</span>
		</div>
		<div id="3">
			<span id="m3">张</span>
		</div>
		<div id="4">
			<span id="m4">王</span>
		</div>
		<div id="5">
			<span id="m3">张</span>
		</div>
		<div id="6">
			<span id="m4">王</span>
		</div>
		<div id="7">
			<span id="m4">王</span>
		</div>
		<div id="8">
			<span id="m3">张</span>
		</div>
		<div id="9">
			<span id="m4">王</span>
		</div>
	</body>
<cml>

vhujbvf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuer基本y选择器，层次选择器，基本过滤选择器

jQuery基本选择器，层次选择器，基本过滤选择器一，基本选择器<!DOCTYPE<!-- html><html> <head> <meta charset="utf-8"> <title>基本选择器</title><script type="text/javascript" src="jquery-3.1.0.js"></script> <script type="text/ja
复制链接

扫一扫