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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

黄舟

Jun 23, 2017 pm 02:39 PM

first jquery セレクタ

ちょっとした余談から始めましょう。卒業後、最初に就職したのはフロントエンドの仕事ではなく、国有企業でした。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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7725

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQuery 参照方法の詳細説明: クイックスタートガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

jQueryを使用してテーブルに新しい行を追加する方法の紹介 Feb 29, 2024 am 08:12 AM

jQuery は、Web 開発で広く使用されている人気の JavaScript ライブラリです。 Web 開発中は、JavaScript を使用してテーブルに新しい行を動的に追加することが必要になることがよくあります。この記事では、jQuery を使用してテーブルに新しい行を追加する方法を紹介し、具体的なコード例を示します。まず、jQuery ライブラリを HTML ページに導入する必要があります。 jQuery ライブラリは、次のコードを通じてタグに導入できます。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック