• jQuery学习笔记(一):层次选择器


    详细介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别。
    parent>child:根据父元素匹配所有的子元素,层次关系是父子关系。

    ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代。


    编写代码,进行测试,以更加清楚的区分两者的区别:
     <div id="first">1
        <span>1.1 </span> 
        <span>1.2 </span>
        <div>1.3
            <span>1.3.1 </span>
        </div>
     </div>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js">
    </script>
    <script type="text/javascript">
        $(function () {
            $("#first>span").css("color", "red");
        }); 
    </script>
    运行后发现:


    1.3.1的文字颜色不是红色,因为parent>child是父子关系;
    如果把选择器改为:
        $("#first span").css("color", "red");
    则运行后发现:

    1.3.1的文字颜色也是红色,因为ancestor descendant层次关系是祖先和后代。即id为"first"的元素下的所有span标记,不管是子辈,还是孙子辈,都会变成红色。

  • 相关阅读:
    luogu 1593
    luogu 1369
    hdu 1796
    bzoj 3398
    luogu 4587
    luogu 2152
    bzoj 3629
    bzoj 1507: [NOI2003]Editor
    bzoj 1503: [NOI2004]郁闷的出纳员
    bzoj 1497: [NOI2006]最大获利
  • 原文地址:https://www.cnblogs.com/zhouhb/p/2045292.html
Copyright © 2020-2023  润新知