欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
欢迎加入团队圈子！与作者面对面！直接点击！
1.引言
说到选择器，大家可能会想到层叠样式表。在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。今天就来介绍一下zepto的常用选择器——层次选择器、属性选择器。
2.层次选择器详解
层次选择器是通过DOM元素之间的层次关系来获取元素的。zepto层次选择器与css的相同之处都是更具元素与其父元素、子元素、兄弟元素之间的关系构成的选择器，但使用zepto层次选择器为最佳选择。
图2.1 层次选择器说明
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> |
图2.1.1 后代选择器效果
后代选择器选择的是元素的后代。这里我们选择了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> |
图2.1.2 子选择器效果
子选择器选择的是元素的子代。这里我们选择了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> |
图2.1.3 相邻元素选择器效果
相邻元素选择器选择的是元素之后的相邻对应元素。这里我们选择了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> |
图2.1.4 同辈元素选择器效果
同辈元素选择器选择的是元素之后的同辈元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到除p1外的所有p元素背景都变成了变成了pink。在这里可以看出同辈元素选择器的选择顾名思义，其选择的元素是元素之后所有同辈的元素。
3.总结
zepto框架有四大常用选择器，基本选择器、层次选择器、属性选择器和基本过滤选择器。在这里笔者只介绍了其中的一种，但也可以看出层次选择器十分有趣，同时相较于CSS层次选择器来说，它通过元素之间的层次关系来获取元素的方法也更加实用。如果读了这篇文章你感兴趣的话，可以继续了解zepto选择器和zepto框架哦。
END
编 辑 | 王楠岚
责 编 | 杨金月
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
扫一扫
8711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
