jQuery サブ属性フィルターセレクターの使用法分析

jQuery サブ属性フィルターセレクターの使用法分析_jquery

WBOY

リリース： 2016-05-16 16:14:46

オリジナル

1102 人が閲覧しました

この記事の例では、jQuery サブ属性フィルターセレクターの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. :first-child セレクター

は、親の最初の子要素のすべての要素を選択するために使用されます。形式:

コードをコピーコードは次のとおりです:

$("selector:first-child")

例:

コードをコピーコードは次のとおりです:

$("ul:first-child" ).css( "テキスト装飾", "下線").css("色", "青");

2. :last-child セレクター

は、親の最後の子要素のすべての要素を選択するために使用されます。形式:

コードをコピーコードは次のとおりです:

$("selector:last-child")

例:

コードをコピーコードは次のとおりです:

$("ul:last-child" ).css( "テキスト装飾", "下線").css("色", "赤");

3. :n 番目の子セレクター

親要素の下にある N 番目の子要素または奇数偶数要素を選択するために使用されます。

構文形式:

コードをコピーコードは次のとおりです:

$("selector:nth-child(インデックス/偶数/奇数/方程式)");

例:

コードをコピーコードは次のとおりです:

$("ul li:nth-child (4)" ).css("color", "red");//ul 要素の下の 5 番目の要素のテキストの色を赤に設定します。つまり、li 要素のインデックス値は 4

4. :only-child セレクター

要素の選択に使用される一意のセレクター

形式:

コードをコピーコードは次のとおりです:

$("selector:only-chilid")

簡単な例:

コードをコピーコードは次のとおりです:

子元素过滤选择器

<スクリプトタイプ="text/javascript">
     $(document).ready(function() {
           $("テーブル tr:first-child").css("背景", "#FCF");
           $("テーブル tr:last-child").css("背景", "黄色");
           $("tr td:nth-child(even)").css("border", "1px 単色赤");
           $("div h3:only-child").css("color", "#999");
         });

子元素フィルターの使用例