02-JQuery学习之基础选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

​ jQuery 选择器按照功能主要分为"选择"和"过滤"。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03-基础选择器</title>
	</head>
	<body>
		<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv2" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//id选择器
		console.log('======id=====');
		var idSelecter = $('#mydiv1');
		console.log(idSelecter);
		
		// 类选择器
		console.log('======class=====');
		var classSelecter = $('.blue');
		console.log(classSelecter);
		
		// 元素选择器
		console.log('======元素=====');
		var spans = $('span');
		console.log(spans);
		
		// 通用选择器
		console.log('======通用=====');
		var all = $('*');
		console.log(all);
		
		//组合选择器
		var group = $('#mydiv1,div,.blue');
		console.log(group);
		
	</script>
	<!-- 
		基础选择器
			id选择器		#ID属性值			$('#id属性值')			选择id为指定值的元素对象（如果有多个，返回第一个）
			类选择器		.class属性值			$('.class属性值')		选择class为指定值的元素对象
			元素选择器	标签名/元素名			$('标签名/元素名')		选择所有指定标签的元素对象
			
			通用选择器	*					$('*')					选择页面所有元素对象
			组合选择器	选择器1,选择器2,..	$('选择器1,选择器2,..')	选择指定选择器的元素对象
	 -->
	 
</html>
posted @ 2021-03-29 20:54  雪漠阳光  阅读(37)  评论(0)  编辑  收藏  举报