zoukankan      html  css  js  c++  java
  • jQuery selector中 :first :first-child :first-of-type的差别

    1.

    :first 属于#basic Filters#,

    :first 选择器用于选取第一个元素。

    最常见的用法:与其他元素一起使用,选取指定组合中的第一个元素。

    例:

    <!DOCTYPE html>
    <html>
        <head>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p:first").css("background-color","yellow");
                });
            </script>
        </head>
        <body>
    
            <p>This is the first paragraph.</p>  *选取该元素
            <p>This is the second paragraph.</p>
            <p>This is the last paragraph.</p>
    
        </body>
    </html>

      $("p:first")用于选择第一个p元素。当不指定元素组合时,即$(":first"),这样也是$("*:first")的简写,此时黄色背景就被加到html元素上。

    2.

    :first-child属于#Child Filters#

    :first-child选择器用于选取属于其父元素的第一个子元素的元素。

    最常见的用法:与其他元素一起使用,选取其父元素的第一个子元素的元素。

    例:

    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p:first-child").css("background-color","yellow");
                });
            </script>
        </head>
        <body>
    
            <p>The first paragraph in body.</p>  *选取该元素
    
            <div style="border:1px solid;">
                <p>The first paragraph in div.</p>  *选取该元素
                <p>The last paragraph in div.</p>
            </div><br>
    
            <div style="border:1px solid;">
                <span>This is a span element.</span>
                <p>The first paragraph in another div.</p>
                <p>The last paragraph in another div.</p>
            </div>
    
            <p>The last paragraph in body.</p>
    
        </body>
    </html>

      $("p:first-child")用于选取属于其父元素和所有兄弟元素的第一个为 <p> 的元素。

      被选取需要两个条件:1.为其父元素的第一个子元素

                2.为<p>元素

      当不指定元素组合时,即$(":first-child"),这样也是$("*:first-child")的简写,此时将选取所有第一个子元素。

    3.

    :first-of-type 属于#Child Filter#

    :first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素

    例:

    <!DOCTYPE html>
    <html>
        <head>
            <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p:first-of-type").css("background-color","yellow");
                });
            </script>
        </head>
        <body>
    
            <p>The first paragraph in body.</p>  *选取该元素
    
            <div style="border:1px solid;">
                <p>The first paragraph in div.</p>  *选取该元素
                <p>The last paragraph in div.</p>
            </div><br>
    
            <div style="border:1px solid;">
                <span>This is a span element.</span>
                <p>The first paragraph in another div.</p>  *选取该元素
                <p>The last paragraph in another div.</p>
            </div>
    
            <p>The last paragraph in body.</p>
    
        </body>
    </html>

       $("p:first-of-type")用于选取其父元素的第一个<p>元素的每个<p>元素。

      被选取需要两个条件:1.它的哥哥没有一个是p元素

                2.为<p>元素

      当不指定元素组合时,即$(":first-of-type"),这样也是$("*:first-of-type")的简写,此时将选取各种种类元素的第一个。

  • 相关阅读:
    docker基本命令
    vscode 保存提示运行"XXX"的保存参与者: 快速修复
    Vue 2.6 插槽
    代码大全-PartOne-变量命名
    Axure 8.0.1.3388 注册码 授权码 破解
    乱七八糟记一下乱七八糟的碎片化知识
    JavaScript需记的一些细节
    Python3.6问题
    python3.6- shape mismatch: objects cannot be broadcast to a single shape
    Angular+ng-zorro遇坑记
  • 原文地址:https://www.cnblogs.com/niulina/p/5679240.html
Copyright © 2011-2022 走看看