zoukankan      html  css  js  c++  java
  • 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标记,不管是子辈,还是孙子辈,都会变成红色。

  • 相关阅读:
    注释
    选择器
    SQL语句中查找字符的位置
    SQL语句中截取字符串Substr
    IDENTITY(函数)
    SQL Server设置主键自增长列
    SQL语句操作ALTER
    表的主键
    南京夜市
    夜班
  • 原文地址:https://www.cnblogs.com/zhouhb/p/2045292.html
Copyright © 2011-2022 走看看