和使用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>