选择器是是jQuery的基础，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟悉地使用选择器，不但能简化代码，而且能够事半功倍。
jQuery选择器的类型
1. 通过CSS选择器选取元素
- 基本选择器
- 层次选择器
- 属性选择器
2. 通过过滤选择器选择元素
- 基本过滤选择器
- 可见性过滤选择器
基本选择器
jQuery的基本选择器与CSS基本选择器相同，主要由元素标签选择器、class（类选择器）id选择器和多个选择器组成。jQuery基本选择器的详细说明如下表：
image.png
例：
image.png
代码：
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
$("#mybtn1").click(function(){
$("h1").css("color","blue");
});
$("#mybtn2").click(function(){
$(".price").css({
"background":"green","padding":"5px"
}) ;
});
$("#mybtn3").click(function(){
$("#author").css("color","red")
});
$("#mybtn4").click(function(){
$("#author,h1,.price").css("color","yellow")
});
$("#mybtn5").click(function(){
$("*").css("font-weight","bold");
});
});
</script>
</head>
<body>
<div id="book">
<div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</div>
<div style="text-align:center">
<button id="mybtn1">改变标题的颜色【标签选择器】</button>
<button id="mybtn2">改变价格区域的颜色【类选择器】</button>
<br/>
<button id="mybtn3">改变作者信息的颜色【id选择器】</button>
<button id="mybtn4">同时改变三个信息的颜色【并集选择器】</button>
<button id="mybtn5">所有信息的字符加粗【*选择器】</button>
</div>
层次选择器
image.png
siblings()
用于选取每个匹配元素的所有同辈元素（不包括自己），并以jQuery对象的形式返回，此处即是选择除当前单击菜单项之外的其他同级菜单项。
可以使用this来调用，而"~"不能使用this
toggle()
toggle()方法则用于切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
例：当在浏览器中显示该页面时，全部菜单展开后的效果如下图：
单击“上海市”菜单，则“上海市”菜单下的所有子菜单全部折叠；再次单击折叠之后的“上海市”菜单，则“上海市”菜单下的所有子菜单全部展开。
image.png
代码：
<title>无标题文档</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
$("dt").click(function(){
$(this).siblings("dd").toggle();
});
});
</script>
</head>
<body>
<dl>
<dt>北京市</dt>
<dd>昌平区</dd>
<dd>房山区</dd>
<dd>海淀区</dd>
<dd>大兴区</dd>
</dl>
<dl>
<dt>上海市</dt>
<dd>黄浦区</dd>
<dd>长宁区</dd>
<dd>宝山区</dd>
<dd>闸北区</dd>
<dd>闵行区</dd>
</dl>
<dl>
<dt>重庆市</dt>
<dd>江北区</dd>
<dd>渡中区</dd>
<dd>大渡口区</dd>
<dd>南岸区</dd>
</dl>
</body>
属性选择器
属性选择器通过HTML元素的属性来选择元素
image.png
例：
image.png
代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>京东快报</title>
<link rel="stylesheet" href="css/newStyle.css">
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(){
$("#mybtn").click(function(){
window.location.reload();//刷新页面
});
$("#mybtn1").click(function(){
$("#news a[class]").css("background","#ccc")
});
$("#mybtn2").click(function(){
$("#news a[class='hot']").css("background","#ccc")
});
$("#mybtn3").click(function(){
$("#news a[class!='hot']").css("background","#ccc")
});
$("#mybtn4").click(function(){
$("#news a[href^='www']").css("background","#ccc")
});
$("#mybtn5").click(function(){
$("#news a[href$='html']").css("background","#ccc")
});
$("#mybtn6").click(function(){
$("#news a[href*='news']").css("background","#ccc")
});
});
</script>
</head>
<body>
<div id="news">
<header>京东快报<a href="#" class="more">更多 > </a></header>
<ul>
<li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
<li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
<li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
<li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
<li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
</ul>
</div>
<br>
<div style="text-align:center">
<input type="button" id="mybtn1" value="是否包含某属性"></input>
<input type="button" id="mybtn2" value="属性的值"></input>
<input type="button" id="mybtn3" value="属性的值不等于"></input>
<br>
<input type="button" id="mybtn4" value="属性的值以指定值开头"></input>
<input type="button" id="mybtn5" value="属性值以指定值结尾"></input>
<input type="button" id="mybtn6" value="属性值包含指定值"></input>
<br>
<input type="button" id="mybtn" value="刷新"></input>
</div>
</body>
根据值设置select下拉框的默认值
attr
attr():设置或返回被选元素的属性值。
image.png
代码：
<title>任务5：根据值设置select下拉框的默认值</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#myselect option[value='上海市']").attr("selected","selected")
});
$("#btn2").click(function(){
$("#myselect option[value='重庆市']").attr("selected","selected")
});
});
</script>
</head>
<body>
<div style="text-align:center">
请选择参选城市：
<select id="myselect">
<option value="天津市" selected="selected">天津市</option>
<option value="上海市">上海市</option>
<option value="北京市">北京市</option>
<option value="重庆市">重庆市</option>
</select>
</div>
<div style="text-align:center">
<input type="button" id="btn1" value="上海" />
<input type="button" id="btn2" value="重庆" />
</div>
</body>
