其他分享
首页 > 其他分享> > 网页|Zepto框架层次选择器

网页|Zepto框架层次选择器

作者:互联网

1.引言

说到选择器,大家可能会想到层叠样式表。在css中,选择器可以获取元素,为其添加css样式;但zepto框架与css选择器相比,它更加强大,因为zepto选择器为元素添加的是行为,行为的添加使得页面的交互更加丰富多彩。今天就来介绍一下zepto的常用选择器——层次选择器、属性选择器。

2.层次选择器详解

层次选择器是通过DOM元素之间的层次关系来获取元素的。zepto层次选择器与css的相同之处都是更具元素与其父元素、子元素、兄弟元素之间的关系构成的选择器,但使用zepto层次选择器为最佳选择。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图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>

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图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>

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图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>

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图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>

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图2.1.4 同辈元素选择器效果

同辈元素选择器选择的是元素之后的同辈元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink,在实现的效果中可以看到除p1外的所有p元素背景都变成了变成了pink。在这里可以看出同辈元素选择器的选择顾名思义,其选择的元素是元素之后所有同辈的元素。

3.总结

zepto框架有四大常用选择器,基本选择器、层次选择器、属性选择器和基本过滤选择器。在这里笔者只介绍了其中的一种,但也可以看出层次选择器十分有趣,同时相较于CSS层次选择器来说,它通过元素之间的层次关系来获取元素的方法也更加实用。如果读了这篇文章你感兴趣的话,可以继续了解zepto选择器和zepto框架哦。

END

编  辑   |   王楠岚

责  编   |   杨金月

 where2go 团队


             

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

标签:pink,网页,parent,元素,Zepto,选择器,css,zepto
来源: https://blog.51cto.com/u_15281984/2957229