任务描述
本关任务:jQuery 遍历 DOM 元素的过滤方法。效果如下:
为了完成本关任务,你需要掌握:1.first()
,2. last()
3. eq()
,4. filter()
,5.not()
。
基本的html结构如下(CSS已省略):
<div class="container">
<p>我是第一个元素</p>
<p class="active">我是第二个元素</p>
<p class="active">我是第三个元素</p>
<p>我是第四个元素</p>
<p>我是第五个元素</p>
</div>
效果图如下:
如何给div
下的第一个p
元素设置背景色呢? 这里用first()
。代码如下:
$("div p").first().css("background","orange");
效果如下:
从上面可以看出:first()
方法会返回被选元素的第一个元素。
还记得学过的过滤选择器吗?也是可以实现相同效果的。代码如下:
$("div p:first").css("background","orange");
如何给div
下的最后一个p
元素设置背景色呢? 这里用last()
。代码如下:
$("div p").last().css("background","orange");
效果如下:
从上面可以看出:last()
方法会返回被选元素的最后一个元素。
用过滤选择器实现代码如下:
$("div p:last").css("background","orange");
如何给div
下的第三个p
元素设置背景色呢? 这里用eq()
。代码如下:
$("div p").eq(2).css("background","orange");
效果如下:
从上面可以看出:eq()
方法会返回带有指定索引号的元素。
注意:索引是从0
开始的。
用过滤选择器实现代码如下:
$("div p:eq(2)").css("background","orange");
如何给div
下class="active"
的p
元素设置背景色呢? 这里用filter()
。代码如下:
$("div p").filter(".active").css("background","orange");
效果如下:
从上面可以看出:filter()
方法会规定一个标准,匹配的会被返回,不匹配的会被删除。
用选择器实现代码如下:
$("div p.active").css("background","orange");
如何给div
下没有class="active"
的p
元素设置背景色呢? 这里用not()
。代码如下:
$("div p").not(".active").css("background","orange");
效果如下:
从上面可以看出:not()
方法会返回不匹配标准的元素,和filter()
相反。
用过滤选择器实现代码如下:
$("div p:not(.active)").css("background","orange");
根据提示,在右侧编辑器Begin
至End
之间填充代码,修改指定元素的字体颜色。要求用本关介绍的方法,过滤选择器可自行调试。要求如下:
- 获取第一个
p
元素,改变字体颜色为red
; - 获取匹配
class="active"
的p
元素,改变字体颜色为orange
; - 获取第三个
p
元素,改变字体颜色为yellow
; - 获取没有
class="item"
的p
元素,改变字体颜色为green
; - 获取最后一个
p
元素,改变字体颜色为blue
;
格式注意:
- 获取元素统一用类名获取,直接获取即可;
- 统一用双引号
""
表示字符串;
效果如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.container{
width: 400px;
margin: 20px auto;
}
.container *{
display: block;
border: 2px solid #000;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="container">
<p class="item">我是第一个元素</p>
<p class="item active">我是第二个元素</p>
<p class="item">我是第三个元素</p>
<p class="four">我是第四个元素</p>
<p class="item">我是第五个元素</p>
</div>
<script>
$(function(){
//---------- Begin ------------
$(".item").first().css("color","red");
$(".item").filter(".active").css("color","orange");
$(".item").eq(2).css("color","yellow");
$(".four").not(".item").css("color","green");
$(".item").last().css("color","blue");
//----------- End -------------
})
</script>
</body>
</html>