jQuery中的选择器

最新推荐文章于 2024-01-31 00:15:00 发布

Woo_home

最新推荐文章于 2024-01-31 00:15:00 发布

阅读量263

点赞数

分类专栏： # Ajax and JQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/Woo_home/article/details/91353522

版权

Ajax and JQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

让我们能够更加精确找到我们要操作的元素

基本选择器

ID选择器：#ID的名称
类选择器：以 . 开头 . 类名
元素选择器：标签的名称
通配符选择器： *
选择器：选择器1，选择器2

层级选择器：

子元素选择器：选择器1 > 选择器2
后代选择器：选择器1
相邻兄弟选择器：选择器1+选择器2：找出紧挨的一个
找出所有：选择器1-选择器2：找出所有

基本选择器案例

<!DOCTYPE html>
<html>
<head>
	<title>jquery</title>
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>

	<style type="text/css">
		div,span,p{
			width: 140px;
			height: 140px;
			margin: 5px;
			background-color: #aaa;
			border: #000 1px solid;
			float: left;
			font-size: 17px;
			font-family: Verdana;
		}
		div.mini{
			width: 55px;
			height: 55px;
			background-color: #aaa;
			font-size: 12px;
		}
		div.hide{
			display: none;
		}
	</style>

	<script>
		$(function() {
			//初始化操作，给按钮绑定事件
			$("#btn1").click(function() {
				$("#two").css("background-color","palegreen")
			});
			//找出mini类的所有元素
			$("#btn2").click(function() {
				$(".mini").css("background-color","palegreen")
			});
			$("#btn3").click(function() {
				$("div").css("background-color","palegreen")
			});
			$("#btn3").click(function() {
				$("div").css("background-color","palegreen")
			});
			$("#btn4").click(function() {
				$("*").css("background-color","palegreen")
			});
			//选择器分组
			$("#btn5").click(function() {
				$(".mini,span").css("background-color","palegreen")
			});
			//取消选择器
			$("#btn6").click(function() {
				$("*").css("background-color","white")
			});
		});
	</script>

<body>

	<input type="button" value="找出id为two的元素" id="btn1">
	<input type="button" value="找出mini类的所有元素" id="btn2">
	<input type="button" value="找出所有div元素" id="btn3">
	<input type="button" value="通配符选择器" id="btn4">
	<input type="button" value="找出mini类和span元素" id="btn5">
	<input type="button" value="取消所有选择器" id="btn6">
	<br>

	<div id="one">
		<div class="mini">
			1-1
		</div>
	</div>
	<div id="two">
		<div class="mini">2-1</div>
		<div class="mini">2-2</div>
	</div>
	<div id="three">
		<div class="mini">3-1</div>
		<div class="mini">3-2</div>
		<div class="mini">3-3</div>
	</div>
	<span id="four">span</span>

</body>
</html>

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

Woo_home

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的选择器

让我们能够更加精确找到我们要操作的元素基本选择器ID选择器：#ID的名称类选择器：以 . 开头 . 类名元素选择器：标签的名称通配符选择器： *选择器：选择器1，选择器2基本选择器案例<!DOCTYPE html><html><head> <title>jquery</title> <script ty...
复制链接

扫一扫

专栏目录