网页|Zepto框架层次选择器
1.引言
说到选择器，大家可能会想到层叠样式表。在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。今天就来介绍一下zepto的常用选择器——层次选择器、属性选择器。
2.层次选择器详解
层次选择器是通过DOM元素之间的层次关系来获取元素的。zepto层次选择器与css的相同之处都是更具元素与其父元素、子元素、兄弟元素之间的关系构成的选择器，但使用zepto层次选择器为最佳选择。
1）后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<div id="parent">
<div id="child">
<p>我是子孙元素</p>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script>
//后代选择器 空格
$("#parent #child").css("background-color","pink");
$("#parent p").css("color","yellow");
</script>
</body>
</html>
后代选择器选择的是元素的后代。这里我们选择了id为parent的元素里的所有id为child（后代）元素背景色变为pink的同时，又选择了id为parent的元素里的所有p（后代）元素字体颜色变为yellow。在这里可以看出后代选择器顾名思义，只要是后代都可以选择。
2）子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<div id="parent">
<div id="child">
<p>我是子孙元素</p>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script>
//子选择器
$("#parent>#child").css("background-color","pink");
$("#parent>p").css("color","yellow");//找不到元素
</script>
</body>
</html>
子选择器选择的是元素的子代。这里我们选择了id为parent的元素里的所有id为child（子）元素背景色变为pink的同时，又选择了id为parent的元素里的所有p（子）元素字体颜色变为yellow。但在实现效果中仅仅背景变成pink了但字体颜色仍是默认的黑色，即找不到id为parent的元素里的p（子）元素，因为在上面的代码中p元素属于child元素的子元素，故找不到元素。在这里可以看出子代选择器顾名思义，只能干涉子元素而对子元素以外的后代元素确实无能为力了。
3）相邻元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<p>p1</p>
<div id="d1">d1</div>
<p>p2</p>
<p>p3</p>
<div>d2</div>
<p>p4</p>
<script src="js/zepto.min.js"></script>
<script>
//相邻元素选择器
$("#d1+p").css("background-color","pink");//d1后紧邻的p
</script>
</body>
</html>
相邻元素选择器选择的是元素之后的相邻对应元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到只有p2变成了粉色。在这里可以看出相邻元素选择器顾名思义，其选择的元素只能是后面紧邻的元素。
4）同辈元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zepto</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
</style>
</head>
<body>
<p>p1</p>
<div id="d1">d1</div>
<p>p2</p>
<p>p3</p>
<div>d2</div>
<p>p4</p>
<script src="js/zepto.min.js"></script>
<script>
//同辈元素选择器
$("#d1~p").css("background-color","pink");
</script>
</body>
</html>
同辈元素选择器选择的是元素之后的同辈元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到除p1外的所有p元素背景都变成了变成了pink。在这里可以看出同辈元素选择器的选择顾名思义，其选择的元素是元素之后所有同辈的元素。
3.总结
zepto框架有四大常用选择器，基本选择器、层次选择器、属性选择器和基本过滤选择器。在这里笔者只介绍了其中的一种，但也可以看出层次选择器十分有趣，同时相较于CSS层次选择器来说，它通过元素之间的层次关系来获取元素的方法也更加实用。如果读了这篇文章你感兴趣的话，可以继续了解zepto选择器和zepto框架哦。
END
编 辑 | 王楠岚
责 编 | 杨金月
where2go 团队