jquery中几种层级选择器的详细说明

最新推荐文章于 2024-01-14 11:54:30 发布

weixin_30307267

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jia58960/archive/2012/03/09/2388156.html

版权

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>JQUERY选择器测试</title>
    </head>
    <body>
    　　<div>
   　　　　 <p>Hello World!</p>
   　　　　 <p class="foo">另外一段，但是这段有个class</p>
  　　　　  <p><span>另外一段，这段里面有个span</span></p>
  　　　　  <p id="bar">
       　　　　 <span class="foo">这个span在di为bar的段落内</span>
     　　　　   <span id="jiu">这个span也在di为bar的段落内</span>
    　　　　</p>
    　　　　<span>再来一个span</span>
   　　　　 <span class="foo2">再来一个span</span>
  　　  </div>

   　　 <span class="foo">再来一个span</span>
   　　 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    </body>
</html>

首先是选择后代元素(空格)

比如

>>> $("p span")

[span, span.foo, span#jiu]会选择所有p元素下的span元素

又如

>>> $("body span")

[span, span.foo, span#jiu, span, span.foo2, span#barr.foo]

就会选择body下的所有span元素

然后是选择子代元素(>)

如

>>> $("div>span")

[span, span.foo2]

而如果是$("div span")答案则为

>>> $("div span")

[span, span.foo, span#jiu, span, span.foo2]相信你已经发现了不同之处。、

它只选择它的子代的元素

再就是选择下一个兄弟元素(+)

如

>>> $("span+span")

[span#jiu, span.foo2]

或者

>>> $(".foo+span")

[span#jiu]

只选择下一个的兄弟元素

最后就是选择兄弟元素(~)

如

>>> $("#bar~span")

[span, span.foo2]

又如

>>> $("p~span")

[span, span.foo2]

发现结果一样，结论就是它会选择所有跟在其后的兄弟元素。

如有不懂，可继续追问！转载请说明出处~谢谢！

转载于:https://www.cnblogs.com/jia58960/archive/2012/03/09/2388156.html

weixin_30307267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中几种层级选择器的详细说明

代码如下：<!DOCTYPE html><html> <head> <title>JQUERY选择器测试</title> </head> <body> 　　<div> 　　　　 <p>Hello World!</p> 　　　　...
复制链接

扫一扫