12

http://api.jquery.com/category/selectors/によると、jQueryでは大量のCSSセレクターを使用できますが、たとえば、:nth-last-child()ここでは言及されていません。ただし、以下をテストすると（GoogleのjQuery 1.7.1を使用）、実際にはFirefox、Chrome、およびIE 9で動作しますが、IE8エミュレーションモードのIE9では動作しません。

$('li:nth-last-child(2)').css('color', 'red');

では、何が起こっているのでしょうか。jQueryがCSSコードを生成したように見えますli:nth-last-child(2) { color: red }。これは、使用されているセレクターをサポートするブラウザーで正常に機能します。しかし、それは奇妙だろう。

最も重要なことは、jQueryがすべてのブラウザーでそのようなセレクターをサポートするようにするためのトリックがありますか？

4

1 に答える 1

37

jQuery はセレクター レベル 3標準への準拠をホームページで宣伝していますが、仕様を完全には実装していません。独自のセレクターのドキュメントでは、「CSS 1–3 から [借用] し、独自のセレクターを [追加] する」ことを明確にしています。1

jQuery 1.9 以降、レベル 3 標準のほぼすべてのセレクターがSizzle (その基礎となるセレクター ライブラリ) でサポートされていますが、次の例外があります。

次のレベル 3 セレクターは jQuery 1.9 以降で実装されていますが、 jQuery 1.8 以前では実装されていません2 :

さらに：

  • :lang()CSS2 で導入された も欠落しています。

セレクターが Firefox、Chrome、および IE9 で機能しているように見える理由は、jQuery が最初にセレクター文字列をネイティブdocument.querySelectorAll()実装に渡してから Sizzle にフォールバックするためです。これは有効な CSS セレクタであるdocument.querySelectorAll()ため、jQuery が使用するノード リストを正常に返すため、Sizzle を使用する必要がなくなります。

失敗したdocument.querySelectorAll()場合、jQuery は自動的に Sizzle にフォールバックします。失敗する可能性のあるシナリオはいくつかあります。

  • セレクターが無効であるか、サポートされていないか、または使用できません (詳細については、セレクター API 仕様を参照してください)。

  • メソッド自体はサポートされdocument.querySelectorAll()ていません (jQuery は実際には単純な if ステートメントでこれをテストするため、その意味で失敗することはありませんが、全体像はわかります)。

あなたの場合、IE9とIE8は実装していますdocument.querySelectorAll()が、IE8はサポートしていません:nth-last-child()。jQuery/Sizzle:nth-last-child()もどちらも実装していないため、使用するフォールバック動作がなく、IE8 では完全に失敗します。

少なくとも jQuery を 1.9 (下位互換性のあるリリース ブランチ) に更新できない場合は、いつでもカスタム セレクター拡張機能を使用して、欠落している疑似クラスを自分で実装できます。ただし、jQuery 1.9 では、古い IE バージョンとの互換性を維持しながら、上記のセレクターのサポートが追加されているため、互換性が必要な場合は、最低限そのバージョンに更新することをお勧めします。

1は、後で削除される前に 仕様のこの古い CR リビジョンで最後に定義された をサポートし、標準から拡張しています。jQuery の実装と現在の標準の違いは、この質問で説明されています。:contains():not()

2 他のいくつかのセレクター (+および~兄弟コンビネーター:empty、:lang()および一部の CSS2 属性セレクターなど) も、jQuery の初期の開発中に削除される予定でした。いくつかの追加テストが利用可能になった後、それらのほとんどすべてが最終リリースになりました。:lang()上で述べたように、1.9 より前にリリースされなかったのは 1 つだけでした。

于 2012-07-31T17:05:45.490 に答える