• jQuery学习——层级


    Child Selector (“parent > child”)

    描述: 选择所有指定“parent”元素中指定的"child"的直接子元素。

    parent: 任何有效的选择器。

    child: 用来筛选子元素的选择器。

    作为一个CSS选择器,这个子元素组合器被Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7 及以上版本等现代浏览器支持,但尤其不被Internet Explorer6及以下版本支持。然而在jQuery中,这个选择器(与其他所有选择器)能在所有支持的浏览器中工作,包括IE6。

    这个子元素组合器(E > F)和(E F)都作为后代组合,但是他们有所不同,更具体的是(E > F)它只会选择第一级的后代。

    <script>$("ul.topnav > li").css("border", "3px double red");</script>

    Descendant Selector (“ancestor descendant”)

    描述: 选择给定的祖先元素的所有后代元素。

    ancestor: 任何有效的选择器。

    descendant: 一个用来筛选后代元素的选择器。

    一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。 

    <script>$("form input").css("border", "2px dotted blue");</script>

    Next Adjacent Selector (“prev + next”)

    prev: 任何有效的选择器。

    next: 用于筛选紧跟在 "prev" 后面的元素的选择器。

    其中重要的一点既要考虑下一个相邻兄弟选择器( prev + next )和一般兄弟选择器( prev ~ siblings )所选择到的元素,必须在同一个父元素下。

    <script>$("label + input").css("color", "blue").val("Labeled!")</script>

    Next Siblings Selector (“prev ~ siblings”)

    prev: 任何有效的选择器

    siblings: 一个选择器来过滤第一选择器以后的兄弟元素。

    (prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素,后者扩展了该达到跟随其的所有同级元素。

    查找所有跟在 id 为 #prev 的元素后面的所有 div。注意,跟在后面的 span 不会被选中,因为它不是 div 。同时 "niece" 也不会被选中,因为它是某个兄弟元素的子元素,而不是兄弟元素。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div,span {
        display:block;
        width:80px;
        height:80px;
        margin:5px;
        background:#bbffaa;
        float:left;
        font-size:14px;
      }
      div#small {
        width:60px;
        height:25px;
        font-size:12px;
        background:#fab;
      }
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <div>div (doesn't match since before #prev)</div>
      <span id="prev">span#prev</span>
      <div>div sibling</div>
     
      <div>div sibling <div id="small">div niece</div></div>
      <span>span sibling (not div)</span>
      <div>div sibling</div>
    <script>$("#prev ~ div").css("border", "3px groove blue");</script>
     
    </body>
    </html>
     

     

  • 相关阅读:
    TCC
    使用RocketMQ实现分布式事务
    CentOS关机
    使用grub手动引导linux和windows
    CentOS下X Window与命令行界面的切换
    Centos下 为firefox安装flash插件
    tar.xz文件如何解压
    用Linux命令wget进行整站下载
    CentOS关闭火狐浏览器Flash过期提示
    CentOS普通用户添加sudo权限
  • 原文地址:https://www.cnblogs.com/pilee/p/3469969.html
Copyright © 2020-2023  润新知