jQueryアプリケーションの(二)jQueryを用いて選択結果を管理する(推奨)

42345 ワード

jquery

jQueryを使用して選択された要素は配列と非常に類似しており、長さ、要素の検索、段落の切り取りなど、jQueryが提供する一連の方法で処理できます.
1.要素の個数を取得します.
jQueryでは、配列内のlengthプロパティと同様に、セレクタ内の要素の個数をsize()メソッドで取得し、整数値を返します.たとえば、次のようにします.

$("img").size()

取得ページのすべてのピクチャの数
次の例では、divブロックをクリックして追加し、ページ内の

ブロックを計算します.

<style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            document.onclick = function() {
                var i = $("div").size() + 1; //  div   ，（     div ）
                $(document.body).append($("<div>" + i + "</div>")); //    div 
                $("#number").html(i);
            }
        </script>
      <span id="number">0</span> DIV 。

2.抽出要素
jQueryのセレクタで、ある要素を抽出したい場合、最も直接的な方法は、四角カッコにシーケンス番号を付ける形式を採用することです.例えば、

$("img[title]")[1]

titleプロパティが設定されているimgタグの2番目の要素をすべて取得しました.jQueryはget(index)メソッドを提供して要素を抽出し、以下のコードは上のコードと完全に等価である.

$("img[title]")get(1)

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

<style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            function displayleb(ndiv) {
                for (var i = 0; i < ndiv.length; i++)
                    $(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));
            }
            $(function(){
                var aDiv = $("div").get();//   div    
                displayleb(aDiv.reverse());
            });
        </script>
        <div style="background:#FFFFFF">1</div>
        <div style="background:#CCCCCC">2</div>
        <div style="background:#999999">3</div>
        <div style="background:#666666">4</div>
        <div style="background:#333333">5</div>
        <div style="background:#000000">6</div>

上記のコードは、ページ自体の6つの

ブロックをget()メソッドで配列に変換し、配列逆シーケンスreverse()を使用してdisplayleb()関数に渡し、現在のページに1つずつ表示します.
get(index)メソッドでは、指定した位置の要素を取得できます.逆に、index(element)メソッドでは、要素のelementが位置する場所を検索できます.たとえば

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

以上、

を取って

タグリスト全体の位置にタグを付け、その位置を整数iNumに戻す.index(element)法の典型的な運用を例に挙げる.
例:index()メソッドで要素のシーケンス番号を取得する

    <style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
        }
        </style>
        <script type="text/javascript">
            $(function() {
                //div click()      
                $("div").click(function() {
                    //     this     ，       。
                    var index = $("div").index(this) + 1;
                    $("#display").html(index.toString());
                })
            });
        </script>
        <div style="background:#FFFFFF">1</div>
        <div style="background:#CCCCCC">2</div>
        <div style="background:#999999">3</div>
        <div style="background:#666666">4</div>
        <div style="background:#333333">5</div>
        <div style="background:#000000">6</div>
             <span id="display"></span> div。

以上のコードブロック自体がthisキーワードでindex()メソッドに転送され、自身のシーケンス番号が取得され、click()でイベントが追加され、シーケンス番号が表示されます.
3.要素の追加、削除、フィルタ
選択要素の取得に加えて、jQueryは、add()の方法で要素を追加するなど、要素セットを変更する一連の方法を提供する.

$("img[alt]").add("img[title]")

以上のコードはalt要素が設定された画像と、title属性が設定された画像を組み合わせて、別の方法で統一的に転送します.それは完全に

$("img[alt],img[title]")

たとえば、組み合わせた要素セットにcssプロパティを統一的に追加することができます.

$("img[alt]").add("img[title]").addClass("altcss")

add()法とは逆にnot()法は元素集合の一部の元素形成集合を除去することができる

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

以上のコードは、titleプロパティが設定されているすべてのタグが選択されているが、titleの値に「isaac」が含まれている

は含まれていないことを示しています.
例:

<style>
            div {
                border: 1px solid #003a75;
                background-color: #FFFF00;
                margin: 5px;
                padding: 20px;
                text-align: center;
                height: 20px;
                width: 20px;
                float: left;
            }
            .altcss {
                border: 2px solid #000000;
            }
        }
        </style>
        <script type="text/javascript">
            $(function() {
                $("div").not(".green, #blueone").addClass("altcss");
            });
        </script>
        <div></div>
        <div id="blueone"></div>
        <div></div>
        <div class="green"></div>
        <div class="green"></div>
        <div class="gray"></div>
        <div></div>

以上のJqueryはnot()の方法でスタイルが「green」と「blueone」の

ブロックを取り除き、残りのdivブロックにaltcssスタイルを加える.
not()メソッドで受信したパラメータには特定の要素を含めることはできません.一般的な式、例えば次のコードが間違っているだけです.

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

正しい書き方は次のとおりです.

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

add()とnot()に加えて、jQueryは要素をフィルタするためのより強力なfilter()メソッドを提供します.filter()は、not()メソッドと同様に汎用的な式を受け入れる2種類のパラメータを受け入れることができる.コードは次のとおりです.

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

以上のコードは、title値がisaac文字列を含むli要素の組合せをフィルタしたことを示しています.
と

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

フィルタされた組み合わせは同じです.

<script type="text/javascript">
            $(function() {
                $("div").addClass("css1").filter("[class*=middle]").addClass("css2");
            });
        </script>

        <div></div>
        <div class="middle"></div>
        <div class="middle"></div>
        <div class="middle"></div>
        <div class="middle"></div>
        <div></div>

上記のコードのうち4つのclass属性はmiddleであり、Jqはまずすべてのdivブロックにcss 1スタイルを追加し、filter()メソッドによりclassにmiddleを含むdivをcss 2スタイルに追加します.
filter()のパラメータでは、直接マッチング(=)に等しくなく、前マッチング(^=)、後マッチング(&=)、または任意のマッチング(*=)しか使用できない.
filter()の別のタイプのパラメータは関数であり、返されるture要素に対して一致して保持されます.そうしないと、セットは除外されます.関数パラメータの機能は非常に強力で、ユーザーにフィルタ関数をカスタマイズすることができます.
例:

<script type="text/javascript">
            $(function() {
                $("div").addClass("css1").filter(function(index) {
                    return index == 1 || $(this).attr("id") == "fourth";
                }).addClass("css2");
            });
        </script>      
<div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth"></div>
    <div id="fifth"></div>

以上のjq実行:
すべてのdivをcss 1に追加する、filter()で返される関数を使用してdivリストの最初の(indexは1)、idがfourthのdiv要素であることをフィルタし、css 2を追加する.
4.クエリー新規要素グループのフィルタ
jqはまた、クエリによって新しい要素の組合せを取得するためのいくつかの有用な方法の組合せを提供する.例えばfind()メソッド.一致セレクタによる要素のフィルタ

$("p").find("span")

タグの下にタグが含まれている組み合わせが見つかったことを示す
完全に等しい

$("span",$("p"))

$(function(){
    $("p").find("span").addClass("css1");
});

<p><span>Hello</span>, how are you?</p>

Helloにcss 1を追加するスタイルを表す.
また、is()メソッドにより、指定された要素が含まれているか否かを検出することもでき、例えば、ページ内の

ブロックにピクチャが含まれているか否かを次のコードにより検出することもできる.

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

考えてみれば、is()はfilter()と組み合わせて使うこともできますが、快適ではありませんか?

Hibernateでehcacheを使用して二次キャッシュを管理する

使用するruntimeの小さなツール