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

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

実際には、フィルター セレクターを基本セレクターに追加して、特定の状況に応じて、インデックス値、コンテンツ、属性、サブ要素の位置、要素の形式を使用できます。フィルターセレクター

フィルター条件としてのドメイン属性と可視性

1. :first セレクター

形式:

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

$("selector: first")

が使用されます 現在の jQuery コレクションをフィルターし、最初に一致する要素 を選択します

例:

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

$("td:first").css ("ボーダー", "2px 青一色");

2. :last セレクター

形式:

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

$("selector: last")

が使用されます 現在の jQuery コレクションをフィルターし、最後に一致する要素を選択します
例:

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

$("td:last").css("border ", " 2px 青一色");

3. :奇数セレクター

形式:

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

$("selector: od")

が使用されます 奇数のインデックス (0 から数えます) を持つすべての要素を選択します

例:

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

$("td:odd").css ("背景", "赤");

4. :偶数セレクター

形式:

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

$("selector: Even")

が使用されます 偶数のインデックスを持つすべての要素を選択します (0 から数えます)

例:

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

$("td:even").css ("背景", "赤");

5. :eq セレクター

形式:

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

$("selector:eq(index)" )

一致するセットから指定された値に等しいインデックスを持つ要素を選択するために使用されます

例:

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

$("li:eq(1)" ).css ("色", "青");

6. :gt セレクター

形式:

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

$("selector:gt(index)" )

指定された値より大きいインデックスを持つ一致したセットからすべての要素を選択するために使用されます

例:

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

$("li:gt(0)" ).css ("色", "緑");

7. :lt セレクター

形式:

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

$("selector:lt(index)" )

指定された値より大きいインデックスを持つ一致したセットからすべての要素を選択するために使用されます

例:

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

$("li:lt(5)" ).css ("色", "緑");

n1 より大きく n2 より小さいインデックスを持つすべての要素を検索するには、配列セレクター
を使用できます。

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

$("selector:gt(n1), selector:lt(n2) )") ;

8. :not セレクター

形式:

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

$("selector1:not(selector2)" )

一致したセットから指定されたセレクターに一致するすべての要素を削除するために使用されます

例:

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

$("td:not(:first, :last) ").css("background", "red"); //最初と最後のセルを除き、他のセルの背景色は赤です

9. :ヘッダーセレクター

形式:

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

$(":header")

選択用 h1、h2、h3 などのすべての見出し要素

10. :アニメーションセレクター

形式:

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

$("selector:animated")

が使用されています アニメーションを実行しているすべての要素を選択します

簡単な例:

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

 
 
 
 
 
 
<スクリプトタイプ="text/javascript"> 
    $(document).ready(function() {
           $(":header").css("color", "#999"); 
           $("tr:first").css("背景", "#FCF"); 
           $("td:last").css("背景", "#FCF"); 
           $("td:odd").css("背景", "黄色"); 
           $("td:even").html("偶数"); 
           $("td:eq(1)").css("border", "1px 単色赤"); 
           $("td:gt(6)").css("border", "1px 青一色"); 
           $("td:lt(6)").css("色", "青"); 
           $("td:not(:first, :last").css("color", "red");
        }); 
 
 
 

简单过滤选择器使用例

 
<テーブル幅="480" 高さ="160" ボーダー="1"> 
   
     
     
     
     
     
   
   
     
     
     
     
     
   
   
     
     
     
     
     
   
 

効果图下記に示す：

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