1.1.4 *
示例代码如图1-xx所示。
图1-xx
1.1.5 selector1,selector2,selectorN
示例代码如图1-xx所示。
图1-xx
1.1.6 小实验
示例代码如下：
<!doctype html>
<html lang="zh-CN">
<head>
<script src="jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0
}
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #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;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//选择 id为 one 的元素
$('#btn1').click(function () {
$('#one').css("background", "red");
});
//选择 class 为 mini 的所有元素
$('#btn2').click(function () {
$('.mini').css("background", "green");
});
//选择 元素名是 div 的所有元素
$('#btn3').click(function () {
$('div').css("background", "blue");
});
//选择 所有的元素
$('#btn4').click(function () {
$('*').css("background", "#ccc");
});
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function () {
$('span,#two').css("background", "yellow");
});
});
</script>
</head>
<body>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<input type="button" value="选择id为one的元素红色." id="btn1"/>
<input type="button" value="选择class为mini的所有元素绿色." id="btn2"/>
<input type="button" value="选择元素名是div的所有元素蓝色." id="btn3"/>
<input type="button" value="选择所有的元素灰色." id="btn4"/>
<input type="button" value="选择所有的span元素和id为two的元素黄色." id="btn5"/>
</body>
</html>
