ホームページ > 記事 > ウェブフロントエンド > jQueryセレクターの:first-child、:first、:first-of-typeの違いの詳細な説明
jQueryセレクターの:first-child、:first、:first-of-typeの違いの詳細な説明
- 黄舟オリジナル
- 2017-06-23 14:39:011399ブラウズ
ちょっとした余談から始めましょう。卒業後、最初に就職したのはフロントエンドの仕事ではなく、国有企業でした。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 サイトの他の関連記事を参照してください。