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

この記事の例では、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"); 
         }); 
 
 
 
 

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

 
<テーブル幅="462" 高さ="152" ボーダー="1"> 
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
 
 

効果图下記に示す：

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。