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

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

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

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

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

以下は、ページ内の

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

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

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

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: 左;
}
}
                                                                                     
       

       

       

       

       

       

       

上の 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]")

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

复制代 代码如下:

<スクリプトタイプ="text/javascript">

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

       

       

       

       

       

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

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

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

例:

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

<スクリプトタイプ="text/javascript">
$(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() と組み合わせて使用​​することもできます。とても快適だと思いませんか?

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