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

firstjqueryセレクタ

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

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

メモ帳++7.3.1

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

SublimeText3 中国語版

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

Dreamweaver Mac版

ビジュアル Web 開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。