1.概述
选择器可以帮助我们在html中选中想要修饰的标签
可以对比css中的选择器:参见文章:https://blog.csdn.net/qq_32224047/article/details/106976009
2.jQuery中的选择器分类
2.1基本选择器
元素名选择器:$("元素名")
类选择器:$(".类名")
id选择器:$("#id值")
*通配符:$("*")
分组选择器:$("selector1,selector2,…"
2.2扩展选择器
后代选择器:$("父选择器 后代选择器")
子元素选择器:$("父选择器>子元素选择器")
相邻兄弟选择器:$("大哥+小弟")
后面兄弟选择器:$("大哥~后面所有小弟")
层级选择器代码示例如下:
<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$().ready(function() {
/* ---------层级选择器练习--------- */
//改变 <body> 内所有 <div> 的背景色为 #F08080",字体颜色为绿色 id="b1"
$("#b1").click(function(){
$("body div").css({"background-color":"#F08080","color":"blue"})
})
//改变 <body> 内子 <div> 的背景色为 #FF0033",字体颜色为绿色 id="b2"
$("#b2").click(function(){
$("body>div").css({"background-color":"#FF0033","color":"green"})
})
//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF",字体颜色为绿色 id="b3"
$("#b3").click(function(){
$("#one+div").css({"background-color":"#0000FF","color":"green"})
})
//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32",字体颜色为蓝色 id="b4"
$("#b4").click(function(){
$("#two~div").css({"background-color":"#9ACD32","color":"blue"})
})
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347",字体颜色为蓝色 id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css({"background-color":"#FF6347","color":"blue"})
})
})
</script>
</head>
<body>
<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" onclick="fn()"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2" />
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"
id="b3" />
<input type="button"
value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4" />
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347"
id="b5" />
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
</body>
</html>
实现效果需要手动点击,可以自行验证 ,此处不再展示