在jQuery中选择器有多种多样 其中经常用的有 id选择器 类选择器 标签选择器
css选择器选择元素有
1.基本选择器(类选择器、id选择器、并集选择器、全局选择器、标签选择器)(下面的1~5)
2.层次选择器(后代选择器、子代选择器、同辈元素选择器)
3.属性选择器
1.类选择器
顾名思义根据类名(class)来选中页面中的元素,如页面中有两个标签给相同的class名字
需求:使用类选择器选中这两个标签给字体渲染上红色
<h1 class="label">这个是h1标签</h1>
<h2 class="label">这个是h2标签</h2>
<script>
$(document).ready(function () {
$(".label").css("color","red")
})
</script>
2.id选择器
根据id名字选中对应的元素给设置样式,如使用id选中器选中div给设置背景颜色
<div style="width: 100px;height: 100px" id="div">
</div>
<script>
$(document).ready(function () {
// 需要注意的是使用id选择器选择元素需要加 # 符号
$("#div").css("background-color","skyblue")
})
</script>
3.并集选择器 jquery中的并集选择器和css中的并集选择器是很相似的 都是有","隔开的
<span id="first">我是span标签</span>
<h4 id="last">我是h4标签</h4>
<script>
$(document).ready(function () {
// 这里的并集选择器 是由两个id选择器组成的 第一个id和第二个id选择器都需要使用 # 符号
$("#first,#last").css("color","red")
})
</script>
4.全局选择器 用 * 符号调用 全局选择器调用页面中所有的内容
<div style="width: 200px;height: 20px">
我是div里面的文字
</div>
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<script>
$(document).ready(function () {
$("*").css("color","red")
})
</script>
5.标签选择器 根据标签来选中元素
<h4>我是h4标签</h4>
<script>
$(document).ready(function () {
$("h4").css("color","blue")
})
</script>
6.层次选择器
层次选择器根据层次来进行对应的选择如页面中有一个ul里面有三个li标签
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
1.后代选择器 选择ul所有的后代(注意需要使用空格隔开)
<script>
$(document).ready(function () {
// 用空格隔开
$("ul li").css("color","red")
})
</script>
2.子代选择器(这里用 > 符号隔开) 选中ul的子代
<script>
$(document).ready(function () {
// 用 > 隔开
$("ul>li").css("color","red")
})
</script>
3. 同辈选择器
<script>
$(document).ready(function () {
// 用 + 隔开
$("ul+li").css("color","red")
})
</script>
7. 属性选择器
(1).根据是否包含属性选择元素
$("a[class]").css()
(2).根据属性的值来选择元素
$("a[class = 'hot']")
(3).选中class值不等于hot的元素
$("a[class != 'hot']").css()
(4).选取属性值以开头的元素
$("a[href ^= 'sale']")
(5).选取属性值以结尾的元素
(a[href $= 'com'])
(6).选取属性包含的指定值的元素
a[href *= 'id']