示例代码:
<!DOCTYPE html>
<html>
<head>
<title>基本选择器</title>
<meta charset="utf-8">
</head>
<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
<li>AAA</li>
<li title="hello">BBB(title="hello")</li>
<li class="box">CCC(class="box")</li>
<li title="hello">DDD(title="hello")</li>
</ul>
<!--
需求:
1.选择id为div1的元素;
2.选择所有div元素;
3.选择所有class属性为box的元素;
4.选择所有div和span元素;
5.选择所有class属性为box的div元素
-->
<script type="text/javascript" src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript">
//1.选择id为div1的元素;
$("#div1").css('background','yellow'); //给div添加背景颜色
//2.选择所有div元素;
$('div').css('background','red');
//3.选择所有class属性为box的元素;
$('.box').css('background','red');
//选择所有div和span元素;
$('div, span').css('background','red');
//5.选择所有class属性为box的div元素
$('div.box').css('background','red');
//$('*').css('background','red'); 网页出现一片红
</script>
</body>
</html>