CH03-JQuery过滤选择器
本章目标
- 掌握基本过滤选择器的使用
- 掌握可见性过滤选择器的使用
- 掌握表单对象过滤器的使用
一、过滤选择器分类
1、什么是jQuery过滤选择器
- 过滤选择器通过特定的过滤
- 规则来筛选元素语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素
2、jQuery过滤选择器分类
二、过滤选择器
1、基本过滤选择器
基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
基本过滤选择器案例的公用Html代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <style>
.one {
background-color:yellow;
}
.two {
color:blue;
font-weight:bold;
}
.three {
background-color:yellowgreen;
font-style:italic;
}
</style>
<h2 id="title">网络小说</h2>
<ul>
<li class="black">王妃不好当</li>
<li>致命交易</li>
<li class="blue">迦兰寺</li>
</ul>
<h2>畅销小说</h2>
<ul>
<li class="black">逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li><h2>第一次亲密接触</h2></li>
</ul>
|
选取第一个元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:first").addClass("one");
});
</script>
|
选取最后一个元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:last").addClass("two");
});
</script>
|
选取索引为偶数的元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:even").addClass("three");
});
</script>
|
选取索引为奇数的元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:odd").addClass("three");
});
</script>
|
基本过滤选择器可以根据索引的值选取元素
选取索引值等于3的元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:eq(3)").addClass("one");
});
</script>
|
选取索引值大于3的元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:gt(3)").addClass("two");
});
</script>
|
选取索引值小于3的元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:lt(3)").addClass("three");
});
</script>
|
基本过滤选择器可以选取子元素
为每个父级元素匹配第一个子元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:first-child").addClass("one");
});
</script>
|
为每个父级元素匹配最后一个子元素
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:last-child").addClass("two");
});
</script>
|
匹配其父元素下的第2个子元素
nth-child从1开始计数
效果图：
1
2
3
4
5
6
7
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("li:nth-child(2)").addClass("three");
});
</script>
|
基本过滤选择器还支持一些特殊的选择方式
2、可见性过滤选择器
可见性过滤选择器:可以通过元素显示状态来选取元素
例：点击hide按钮时：获取显示的p元素，使其隐藏
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#hide").click(function () {
$("p:visible").hide();
});
});
</script>
<p>点击按钮，我会隐身哦~</p>
<input id="hide" type="button" value="点击隐藏文字" />
<input id="show" type="button" value="点击显示文字" />
|
例：点击show按钮时：获取隐藏的p元素，使其显示
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#select").click(function () {
var $sex = $("input:radio:checked").val();
alert($sex);
});
});
</script>
<p>点击按钮，我会隐身哦~</p>
<input id="hide" type="button" value="点击隐藏文字" />
<input id="show" type="button" value="点击显示文字" />
|
3、表单对象过滤器
例：点击查看弹出选择项的值
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
| <script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#hide").click(function () {
$("p:visible").hide();
});
});
</script>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<input id="select" type="button" value="查看" />
|
注：选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果
特殊符号的转义
选择器中的特殊符号需要转义，在如下html代码中
1
2
3
| <div id="id#a">aa</div>
<div id="id[2]">cc</div>
|
获取这两个元素的选择器：使用双斜杠
三、课后作业
1.使用基本过滤选择器，完成如下表格的样式设置：
效果图：
2.使用jQuery完成伸缩菜单的显示隐藏：
效果图：
3.使用jQuery实现复选框的勾选功能：选中复选框后，背景颜色随之发生改变
效果图：
