jQueryセレクターの:first-child、:first、:first-of-typeの違いの詳細な説明-jsチュートリアル-php.cn

jQueryセレクターの:first-child、:first、:first-of-typeの違いの詳細な説明

黄舟

リリース： 2017-06-23 14:39:01

オリジナル

1418 人が閲覧しました

ちょっとした余談から始めましょう。卒業後、最初に就職したのはフロントエンドの仕事ではなく、国有企業でした。3ヶ月ほど働いた後、あまりにも快適な生活に耐えられなくなり、思い切って退職しました。お金が足りない）、そして私は「好きな方向を決めてページから始める」を選択しました。私は今、ポケベルとして働き始めてもうすぐ 3 か月目に入ります。私は小さなスタートアップ企業でインターンシップを見つけたので、フロントエンドについては最初から最後までほとんど知識がなく、必要なことをただ調べて学ぶだけです。 . なので最近はjQueryのAPIを探すしかありません。

さて、本題にいきましょう。

API の :first-child セレクターがこのように記述されているのを見ました (他の人の翻訳とコンパイルを使用しました。公式の英語版を読んだ方が良いような気がしますが、まだ怠け者です)。このバージョンを使用してください)

これに関して、返されるのはオブジェクトの配列なので、最初は非常に動揺しました (これは個人的に理解していますが、正しいかどうかはわかりません)。このセレクターの名前は :first-child です (本当に文句を言います。なぜ子供たちと呼ばないのですか)。後で自分で試してみたところ、 each() を使用しないと最初の要素が検索されることがわかりました。デフォルトでは配列の値が返されます。これはスクリーンショットにあるものです。 (実際、これは私が話したいことではありません。これは単に道を整えるためです)

この API で少し振り返ると、セレクター :first-of-type が表示されます。以下はこのセレクターの説明です

その後、この部分の冒頭で彼が言ったことをきっかけに、私は Baidu にアクセスして、first-of-type のオンライン説明を確認し、次に、first も確認しました。 -子供。一部の指示が不正確であることがわかりました。

さて、言葉が多すぎるので、コードとエフェクトに直接進みましょう。 (コード部分、jQueryの導入部分、わざわざインターネット上で探す必要はなく、ローカルパスを使います)

【:first】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

ログイン後にコピー

【:firstセレクターを複数のブラウザで表示】

【:first-child】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:firstchild").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

ログイン後にコピー

【さまざまなブラウザでの:first-child セレクター効果】(トラバーサルのため、3 つの要素が選択されています。つまり、3 つのポップアップウィンドウが表示されます。いくつかのブラウザは次のとおりです:waterfox、chrome、IE 11、Edge)

[waterfox]

[chrome] PS: chrome の下にポップアップウィンドウがあるようで、別のウィンドウに切り替えることができません。なのでスクリーンショットを3枚撮ってつなぎ合わせるしかありません

【IE 11】

【Edge】

【:first-of-type】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first-of-type").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

ログイン後にコピー

【:first-of-タイプ選択各ブラウザでの表示効果]

この部分の表示効果は、[:first-child]セレクターでの表示効果と同じです。長さを減らすため、スクリーンショットは含まれていません。

【概要】

上のスクリーンショットから、 :first 、 :first-child 、 :first-of-type 、これら 3 つのセレクターは異なるブラウザコアを持ち、jQuery と表示効果には影響を与えないことがわかります。。

一方、

[:first] セレクターは単一のノード、つまり一意かつ確実なノードを返します

【:first-child】セレクターは実際にはノードの配列を返します。各ノードがトラバーサルに使用されない場合、デフォルトで配列の最初のノードが返されます (後で size() の戻り値を確認したところ、確かにそのとおりです)。 3、これは私の考えを裏付けています)

[:first-of-type] セレクターは [:first-child] に似ています (同じではない理由は、この例では結果が同じであるためです。 2 つのセレクター。関数は異なります）、返されるものもノードの配列です。それぞれがトラバーサルに使用されない場合は、デフォルトで配列の最初のノードが返されます（後で size() の戻り値を確認しました）。それは確かに 3 であり、私の考えを裏付けました)。

PS: first に対応する last があるようですが、私はまだ見ていませんが、個人的には、一方が最初でもう一方が最後であることを除いて、それらは同じであると感じています。時間が来たら、最後の3つのセレクターの検証結果を投稿します

以上がjQueryセレクターの:first-child、:first、:first-of-typeの違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。