<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<style type="text/css">
body{
background-color: #e6fbff;
color: #000;
font-size: 20px;
padding: 0 30px;
}
li{
list-style: none;
}
a{
color: red;
text-decoration: none;
}
.red{
color: red;
}
.pink{
background-color: #20ce7d;
padding: 3px;
color: #fff;
}
.box{
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>jQuery选择器的格式：</p>
<p class="red">$("选择器")</p>
<p>在jQuery中，基本选择器共有5种：</p>
<p class="red">
（1）元素选择器；
（2）id选择器；
（3）class选择器；
（4）群组选择器；
（5）*选择器
</p>
<div class="box">
<h2>一、元素选择器</h2>
<p>元素选择器，就是“选中”相同的元素，然后对相同的元素进行操作。</p>
<p class="red">语法：$("元素名")</p>
<p class="red pink">$("div").css("color","red");</p>
</div>
<div class="box">
<h2>二、id选择器</h2>
<p>id选择器，就是选中某个id的元素，然后对该元素进行各种操作。有一定要注意的就是：同一页面不允许出现相同id的元素。</p>
<p class="red">语法：$("#id名")</p>
<p class="red">说明：id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。</p>
</div>
<div class="box">
<h2>三、class选择器</h2>
<p>class选择器，就是我们常说的“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行各种操作。</p>
<p class="red">语法：$(".类名")</p>
<p class="red">说明：class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。</p>
</div>
<div class="box">
<h2>四、群组选择器</h2>
<p>群组选择器，就是同时对几个选择器进行相同的操作。</p>
<p class="red">语法：$("选择器1 , 选择器2 ,……,选择器n")</p>
<p class="red">说明：对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效。</p>
<p class="red">举例：$("h3,div,p,span").css("color","red");</p>
</div>
<div class="box">
<h2>五、*选择器</h2>
<p>*选择器，也成为“全选选择器”，用于选择所有的元素。在CSS中，我们常常用*选择器来去除所有元素默认的padding和margin。</p>
<p class="red">$("#list *").css("color","red");</p>
<p class="red">$("#list *")表示选择id为list的元素下面的所有元素。</p>
</div>
</body>
</html>
网友评论