jQuery选择器

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

aqzengkuasheng

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

阅读量169

点赞数

分类专栏： js 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/122981439

版权

js 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

选择器就是"一个表示特殊语意的字符串"，只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

1.基础选择器

在这里插入图片描述
基础选择器的使用
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id"),$ (".clas"), $(" e l e m e n t "),$ ("*")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			id选择器1<span>span中的内容</span>
		</div>
		<div id="mudiv2" class="blue">
			元素选择器
		</div>
		<span class="blue">
			样式选择器
		</span>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//id选择器，只选第一个
		    var div1=$("#div1");
			console.log(div1);
			//类选择器，可以选择多个
		    var clazz=$(".blue");
			console.log(clazz);
			//元素选择器
			var spa=$("span");
			console.log(spa);
			//通用选择器
			var all=$("*");
			console.log(all);
			
		</script>
	</body>
</html>

2层级选择器

<!DOCTYPE html>
<html>
	<head>
	<!-- 
		层次选择器
			后代选择器
				格式： 父元素 指定元素 （空格隔开）
				示例： $("父元素 指定元素")
				选择父元素的所有指定元素（包含第一代、第二代等）
			子代选择器
				格式： 父元素 > 指定元素 （大于号隔开）
				示例： $("父元素 > 指定元素")
				选择父元素的所有第一代指定元素
			相邻选择器
				格式： 元素 + 指定元素 （加号隔开）
				示例： $("元素 + 指定元素")
				选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
			同辈选择器
				格式： 元素 ~ 指定元素 （波浪号隔开）
				示例： $("元素 ~ 指定元素")
				选择元素的下面的所有指定元素
	 -->
		<meta charset="utf-8">
		<title></title>
 <style type="text/css">
 .testColor{
background: green;
 }
 .gray{
 background: gray;
 }
 </style>
	</head>
	<body>
		<div id="parent">层次择器
		  <div id="child" class="testColor">父选择器
		     <div class="gray">子选择器</div>
		 <img src="http://www.baidu.com/img/bd_logo1.png"
		                      width="270" height="129" />
		 <img src="http://www.baidu.com/img/bd_logo1.png"
		                      width="270" height="129" />
		 </div> 
		 
		 
		 <div>选择器2<div>选择器2中的div</div>
		 
		 </div>
		 </div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//后代选择器 所有的子div
		var hd=$("#parent div");
		console.log(hd);
		//子代选择器 //parent下的直接子元素
		var zd=$("#parent > div");
		console.log(zd);
		//相邻选择器 //相邻的并且是指定的
		var xl=$("#child + div");
		console.log(xl);
		//同辈选择器 同辈的所有指定的元素
		var imgs=$(".gray ~ img");
		console.log(imgs);
	</script>
</html>