CH02-JQuery选择器
本章目标
- 掌握基本选择器的使用
- 掌握层次选择器的使用
- 掌握属性选择器的使用
一、jQuery选择器
1、什么是jQuery选择器
jQuery选择器：类似于CSS选择器，用来选取网页中的元素发生的发生
例：设置网页中所有h3元素的背景
效果图：
1
2
3
4
5
6
7
8
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("h3").css("background", "yellow");
});
</script>
<h3>请开始你的表演，因为我也要开始了</h3>
|
注：
- “h3”为选择器
- $(“h3”)返回jQuery对象
- .css()是为jQuery对象设置样式的方法
2、jQuery选择器分类
jQuery选择器功能强大，种类也很多，分类如下：
二、类CSS选择器
1、基本选择器
基本选择器包括：标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
基本选择器案例的公用html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div>
<h2 class="title">游戏基地</h2>
<h3 class="title">游戏分类</h3>
<h3>热门排行</h3>
<dl id="box">
<dt>休闲游戏</dt>
<dd class="title">斗地主</dd>
<dd>QQ斗地主是国内同时在线人数最多的棋牌游戏....</dd>
</dl>
<ul>
<li>休闲游戏</li><li class="title">对战游戏</li><li>飞机游戏</li>
</ul>
</div>
|
标签选择器
根据给定的标签名匹配元素
例：设置所有h3元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("h3").css("background", "skyblue");
});
</script>
|
类选择器
根据给定的class匹配元素
例：设置所有class为title的元素的字体颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$(".title").css("color", "red");
});
</script>
|
ID选择器
根据给定的id匹配元素
例：设置id为box的元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#box").css("background", "yellow");
});
</script>
|
并集选择器
用来合并元素集合
例：设置所有h2、dt、class为title的元素的背景颜色和字体颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
//设置所有<h2>、<dt>、class为title的元素的背景颜色和字体颜色
$("h2,dt,.title").css("background", "pink").css("color", "white");
});
</script>
|
注：并集选择器表示满足一种条件即可，用逗号分割
交集选择器
可以对元素集合根据class或id再筛选
例：设置所有class为title的h3元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("h3.title").css("background", "purple");
});
</script>
|
注：交集选择器表示同时满足全部条件，没有分割
全局选择器
可以获取所有元素
例：改变所有元素的字体颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("*").css("color","red")
});
</script>
|
2、层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素，每个层级选择器都有一个参考节点。
层次选择器案例的公用html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="root">
<h2>全部旅游产品分类</h2>
<dl>
<dt>名胜古迹</dt>
<dd>故宫</dd>
<dd>清华园</dd>
</dl>
<div id="menu">
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd>按天数 海边旅游 草原</dd>
</dl>
</div>
<dl>
<dt>景点门票</dt>
<dd>名胜</dd>
<dd>山水</dd>
</dl>
<span>更多分类</span>
</div>
|
后代选择器
用来获取元素的后代元素
例：设置#root下的所有span元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#root span").css("background", "yellow");
});
</script>
|
子选择器
用来获取元素的子元素
例：设置#root下的子元素span的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#root>span").css("background", "yellow");
});
</script>
|
相邻选择器
用来选取紧邻目标元素的下一个元素
例：设置紧接在h2元素后的dl元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
//设置紧接在<h2>元素后的<dl>元素的背景颜色
$("h2+dl").css("background", "yellow");
});
</script>
|
同辈选择器
用来选取目标元素之后的所有同辈元素
例：获取并设置h2元素之后的所有同辈元素dl的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
//获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
$("h2~dl").css("background", "yellow");
});
</script>
|
注：相邻选择器和同辈选择器所选择到的元素，必须在同一个父元素下
3、属性选择器
属性选择器通过HTML元素的属性来选择元素
属性选择器案例的公用html代码：
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="ok" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li title="yh_jp">银魂</li>
<li class="ceo" title="hm_da">黑猫警长</li>
<li class="odds" title="xl_ds">仙履奇缘</li>
</ul>
</div>
|
根据属性名获取元素
例：改变含有title属性的h2元素的背景颜
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("h2[title]").css("background", "green");
});
</script>
|
根据属性的值来选取元素
例：改变class属性的值为odds的li元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li[class=odds]").css("background", "highlight");
});
</script>
|
例：改变class属性的值不为odds的li元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
//改变class属性的值不为odds的li元素的背景颜色设置h3元素的背影颜色
$("li[class!=odds]").css("background", "highlight");
});
</script>
|
根据属性名选取特定开始元素
例：以指定字符串开头
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li[class^=o]").css("background", "highlight");
});
</script>
|
根据属性名选取特定结尾元素
例：以指定字符串结尾
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li[class$=o]").css("background", "green");
});
</script>
|
根据属性名选取包含某些值的元素
例：包含指定字符串
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li[class*=s]").css("background", "purple");
});
</script>
|
多属性条件复合查找元素
例：改变包含class属性，且title属性的值中含有y的li元素的背景颜色
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li[class][title*=y]").css("background", "yellow");
});
</script>
|
Each方法
在jquery中一般使用each方法进行循环遍历
例：页面有多个 li 标签 ，这时可以用each来处理多个li
1
2
3
4
5
6
| <ul>
<li>Html</li>
<li>Css</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
|
输出每个列表项的下标和文本
效果图：
1
2
3
4
5
6
7
8
9
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li").each(function (i) {
alert(i +" "+ $(this).text());
});
});
</script>
|
三、课后作业
1.使用jQuery选择器完成开心餐厅的介绍页面
效果图：
2.使用jQuery选择器完成畅销书排行榜的页面
效果图：
