jQuery を使用して選択結果を管理する_jquery

jQuery を使用して選択された要素は配列に非常に似ており、長さ、要素の検索、段落のインターセプトなど、jQuery が提供する一連のメソッドを通じて処理できます。

1. 要素の数を取得します。

jQuery では、size() メソッドを通じてセレクター内の要素の数を取得できます。このメソッドは配列の長さ属性に似ており、整数値を返します。次に例を示します。

$("img").size()
ページ上のすべての画像の数を取得します

以下は、ページ内の

ブロックをクリックして計算することで div ブロックを追加する例です。

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

div {
枠線: 1 ピクセルの実線 #003a75;
背景色: #FFFF00;
マージン: 5px;
パディング: 20px;
text-align: center;
高さ: 20px;
幅: 20px;
float: 左;
}
}
                                                                                     

")); // div ブロックを追加します
$("#number").html(i);
}
                                                                                         

ページ内には合計 0 の DIV ブロックがあります。クリックして追加

2. 要素を抽出します

jQuery のセレクターで要素を抽出する場合、最も直接的な方法は、たとえば

のように角括弧とシリアル番号を使用することです。

$("img[タイトル]")[1]

title 属性が設定されているすべての img タグの 2 番目の要素を取得します。 jQuery には、要素を抽出するための get(index) メソッドも用意されています。次のコードは、上記の

と完全に同等です。
$("img[title]")get(1)

get メソッドがパラメーターを設定しない場合、次の例のように、要素を要素オブジェクトの配列に変換できます。

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

            div {
                ボーダー: 1px ソリッド #003a75;
                背景色: #FFFF00;
                マージン: 5px;
                パディング: 20px;
                text-align: 中央;
                高さ: 20px;
                幅: 20px;
                float: 左;
            }
        }
       
       
            関数 displayleb(ndiv) {
                for (var i = 0; i                     $(document.body).append($("

" ndiv[i].innerHTML "

")) ;
            }
            $(関数(){
                var aDiv = $("div").get();//转化化はdiv对オブジェクト数组
                displayleb(aDiv.reverse());
            });
       
       

1

       

2

       

3

       

4

       

5

       

6

上の代コードは、面自体の 6 つの

ブロックを get() メソッドで数組に変換し、その後、数組逆順 reverse() を使用して、displayleb() 関数を渡し、その 1 つを面内に配置します。

get(index) メソッドは指定された位置の要素を取得でき、逆に、index(element) メソッドは要素の要素の位置を取得できます。

var iNum=$("li").index($(li[title=isaac]")[0])

上記では、

マーク列テーブル全体の位置を取得し、その位置を iNum 内に返します。以下の例のindex(element)メソッドの典型的な用途です。
例：index() メソッドを使用した获取元素の順序

复制代码代码如下:

div {
枠線: 1 ピクセルの実線 #003a75;
背景色: #FFFF00;
マージン: 5px;
パディング: 20px;
text-align: center;
高さ: 20px;
幅: 20px;
float: 左;
}
}
                                                                                     

2

3

4

5

6

をクリックしました。

上記のコード ブロック自体は、this キーワードを使用してindex() メソッドに渡し、独自のシリアル番号を取得し、click() を使用してシリアル番号を表示するイベントを追加します。

3. 要素の追加、削除、フィルタリング

jQuery は、選択した要素を取得するだけでなく、add() メソッドを使用して要素を追加するなど、要素のコレクションを変更するための一連のメソッドも提供します。

$("img[alt]").add("img[タイトル]")

上記のコードは、alt要素が設定された画像とtitle属性が設定された画像を結合し、他のメソッドで統一配信します。

と全く同じです
$("img[alt],img[title]")

たとえば、結合された要素のセットに CSS 属性を追加できます。

$("img[alt]").add("img[タイトル]").addClass("altcss")

add() メソッドとは対照的に、not() メソッドは要素セットから特定の要素を削除して set

を形成できます。
$("li[title]").not("[title*=isaac]")

上記のコードは、title 属性が設定されているすべてのタグが選択されることを意味しますが、title 値に「isaac」が含まれる

は含まれません。

例:

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

            div {
                ボーダー: 1px ソリッド #003a75;
                背景色: #FFFF00;
                マージン: 5px;
                パディング: 20px;
                text-align: 中央;
                高さ: 20px;
                幅: 20px;
                float: 左;
            }
            .altcss {
                ボーダー: 2px ソリッド #000000;
            }
        }
       
       
            $(function() {
                $("div").not(".green, #blueone").addClass("altcss");
            });
       
       

       

       

       

       

       

       

上の Jquery は not() の方法で "green" と "blueone" の

ブロックを削除し、以下の div ブロックを altcss 形式で追加します。 not() メソッドで受け取られるパラメータには特定の要素を含めることはできません。たとえば、次のような代コードは許可されています

$("li[title]").not("img[title*=isaac]")

正确的写法是：

$("li[tile]").not("[title*=isaac]")

add() と not() に加えて、jQuery は要素を選択するためのより拡張された filter() メソッドも提供します。次のように:

$("li").filter("[title*=isaac]")

上記のコードは、isaac 文字列を含むタイトルの組み合わせを選択します。
与

$("li[title*=isaac]")

選択された組み合わせは同じです。

复制代 代码如下:

            $(function() {
                $("div").addClass("css1").filter("[class*=middle]").addClass("css2");
            });
       

       

       

       

       

       

上記のコードでは、クラス属性のうち 4 つは middle です。Jq は最初に css1 スタイルをすべての div ブロックに追加し、次に filter() メソッドを使用してクラス内の middle を含む div に css2 スタイルを追加します。

filter() のパラメータでは、一致 (=) と直接一致させることはできません。使用できるのは、一致前 (^=)、一致後 (&=)、または任意の一致 (*=) のみです。

filter() のもう 1 つのタイプのパラメータは、返された true 要素と一致して保持する関数です。それ以外の場合、コレクションは除外されます。関数パラメータは非常に強力で、ユーザーはフィルタリング関数をカスタマイズできます。

例:

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

$(function() {
$("div").addClass("css1").filter(function(index) {
戻りインデックス == 1 || $(this).attr("id") == "4 番目";
}).addClass("css2");
});
                                                                                     

上記の jq 実行:

すべての div に css1 を追加し、filter() によって返された関数を使用して、div リストの最初の div 要素 (インデックスは 1) と 4 番目の ID をフィルターで除外し、css2 を追加します。

4. 新しい要素グループのクエリとフィルタリング

jq は、クエリを通じて新しい要素の組み合わせを取得するための非常に便利なメソッドの組み合わせもいくつか提供します。たとえば、find() メソッドです。一致するセレクターによって要素をフィルター処理します

$("p").find("スパン")

タグの下に タグを含む組み合わせが見つかったことを示します。

と完全に等しい

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

$("スパン",$("p"))

$(関数(){
$("p").find("span").addClass("css1");
});

こんにちは、お元気ですか?

は、Hello に css1 スタイルを追加することを意味します。

さらに、is() メソッドを使用して、指定された要素が含まれているかどうかを検出することもできます。たとえば、次のコードを使用して、ページ内の

ブロックに画像が含まれているかどうかを検出できます。

var hisg = $("div").is("img");

想像してみてください、is() は filter() と組み合わせて使用​​することもできます。とても快適だと思いませんか?

上記がこの記事の全内容です。少し長いですが、じっくり読んでいただければ幸いです。