カテゴリー別アーカイブ: セレクタ

セレクタについて5(フォームフィルタ)

セレクタシリーズの5回目、最後はフォームフィルタについてです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $(':input').css('background-color', '#ff0000');
                $(':text').css('background-color', '#00ff00');
                $(':password').css('background-color', '#0000ff');
                $(':radio').css('background-color', '#cc00c');
                $(':checkbox').css('background-color', '#cccc00');
                $(':submit').css('background-color', '#00cccc');
                $(':image').css('background-color', '#cccccc');
                $(':reset').css('background-color', '#660066');
                $(':button').css('background-color', '#006666');
                $(':file').css('background-color', '#660000');
                $(':checked').css('background-color', '#00ff00');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <h1>Form Input</h1>
            <form>
                <div>
                    <h2>Form Input : Text Box</h2>
                    <input type="text" />
                </div>
                <div>
                    <h2>Form Input : Password Box</h2>
                    <input type="password" />
                </div>
                <div>
                    <h2>Form Input : Radio Button</h2>
                    <label for="radio1"><input type="radio" id="radio1" name="radio" checked="checked" /> radio1</label>
                    <label for="radio2"><input type="radio" id="radio2" name="radio" /> radio2</label>
                </div>
                <div>
                    <h2>Form Input : Check Box</h2>
                    <label for="check1"><input type="checkbox" id="check1" /> checkbox1</label> 
                    <label for="check2"><input type="checkbox" id="check2" checked="checked" /> checlbox2</label> 
                    <label for="check3"><input type="checkbox" id="check3" /> checkbox3</label> 
                </div>
                <div>
                    <h2>Form Input : Submit Button</h2>
                    <input type="submit" value="submit" />
                </div>
                <div>
                    <h2>Form Input : Image Button</h2>
                    <input type="image" src="./icon_jpeg05.jpg" />
                </div>
                <div>
                    <h2>Form Input : Reset Button</h2>
                    <input type="reset" value="reset" />
                </div>
                <div>
                    <h2>Form Input : Normal Button</h2>
                    <input type="button" value="button1"/>
                    <button>button2</button>
                </div>
                <div>
                    <h2>Form Input : File Box</h2>
                    <input type="file" />
                </div>
                <div>
                    <h2>Form Input : Select Box</h2>
                    <select>
                        <option value="1">sample1</option>
                        <option value="2" selected="selected">sample2</option>
                        <option value="3">sample3</option>
                    </select>
                </div>
                <div>
                    <h2>Form Input : Text Area Box</h2>
                    <textarea value="Text Area"></textarea>
                </div>
            </form>

        </div>

    </body>
</html>

sample

セレクタシリーズ最後の地味な sample ページです。
以下に内容を説明させていただきます。

■:input
例) $(‘:input’)
input,textarea,select,buttonが対象となります。
textarea や select は個別のフィルターがないようです。
まぁ、フィルター以外の方法でも対応はできるので問題はありませんが・・・、
逆に textarea,select が対象だと違和感を感じるのは私だけでしょうか。

■:text
例) $(‘:text’)
input type = text が含まれる要素が対象となります。

■:password
例) $(‘:password’)
input type = password が含まれる要素が対象となります。

■:radio
例) $(‘:radio’)
input type = radio が含まれる要素が対象となります。

■:checkbox
例) $(‘:checkbox’)
input type = checkbox が含まれる要素が対象となります。

■:submit
例) $(‘:submit’)
input type = submit が含まれる要素が対象となります。

■:image
例) $(‘:image’)
input type = image が含まれる要素が対象となります。

■:reset
例) $(‘:reset’)
input type = reset が含まれる要素が対象となります。

■:button
例) $(‘:button’)
input type = button が含まれる要素が対象となります。

■:file
例) $(‘:file’)
input type = file が含まれる要素が対象となります。

■:hidden
例) $(‘:hideden’)
input type = hidden が含まれる要素が対象となります。
その他にも非表示項目が対象となります。
表示/非表示フィルタでも同じ内容がありましたね。

■:enabled
例) $(‘:enabled’)
使用可能の要素が対象となります。

■:disabled
例) $(‘:disabled’)
使用不可の要素が対象となります。

■:checked
例) $(‘:checked’)
チェックされた要素が対象となります。

■:selected
例) $(‘:selected’)
選択された要素が対象となります。

以上、今回にて「セレクタシリーズ」は終了となります。

セレクタによって、色々な方法でのオブジェクト選択が可能な為非常に便利です。
今までは jQuery を含む全ての Javascript で操作する要素には、全て ID を追記していました。
今後は Javascript のためだけの ID や Class は減らすことが出来そうです。

できることが段々増えていくような気分で非常に楽しいですね。
まさに、「やればやるほど面白い」の状態です。
この他にも、next(),prev() など調べていくと色々便利になるんだろうなと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクタについて4(コンテントフィルタ)

セレクタシリーズの4回目、今回はフィルタ機能についてです。

今回はコンテントフィルタを調査しました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#ul_1 li:contains(TextData)').css('color', '#ff0000');
                $('#ul_1 li:has(p)').css('color', '#0000ff');
                $('#ul_1 li:empty').text('EmptyData');
                $('#ul_1 li span:parent').css('color', '#00ff00');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            ul {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <ul id="ul_1">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data TextData</li>
                <li>4. data</li>
                <li><p>5. data</p></li>
                <li>6. data TextData</li>
                <li>7. data TextData</li>
                <li><span>8. data</span></li>
                <li>9. data</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>

    </body>
</html>

sample

引き続き地味な sample ページです。
まぁ、基本について説明させていただきます。

・コンテントフィルタ
■:contains(text)
例) $(‘#sample:contains(text)’)
指定した文字列が含まれる要素が対象となります。

■:has(selector)
例) $(‘#sample:has(selector)’)
指定した要素を含む要素のみ全て対象となります。

■:empty
例) $(‘#sample:empty’)
空の状態の要素が対象となります。

■:parent
例) $(‘#sample:parent’)
空ではないの状態の要素が対象となります。
今回は「$(‘#ul_1 li span:parent’)」を対象としています。
この場合は、spanタグの中に「8. data」が存在するため「空では無い」となります。

今回の「コンテンツフィルタ」はこんな感じですね。
う~ん・・・、ちょっと項目が少ないですね。
追加で「表示/非表示フィルタ」と「子要素フィルタ」も調査しておきます。

・表示/非表示フィルタ
■:hidden
例) $(‘#sample:hidden’)
非表示状態の要素が対象となります。
また、form項目の場合、hidden属性の要素が対象となります。

■:visible
例) $(‘#sample:visible’)
表示状態の要素が対象となります。

・子要素フィルタ
■:nth-child
例) $(‘#sample:nth-child(index)’)
親要素に対してn番目、偶数、奇数、n個おきの指定をした子要素が対象となります。
 index
  指定番数の要素
 even
  偶数番号の要素
 odd
  奇数番号の要素
 equation
  指定数ごとの要素

■:first-child
例) $(‘#sample:first-child’)
親要素に対して最初の子要素が対象となります。

■:last-child
例) $(‘#sample:last-child’)
親要素に対して最後の子要素が対象となります。

■:only-child
例) $(‘#sample:only-child’)
各親要素が1つだけ子要素を持つ場合に、その子要素を選択する。
親要素に対して1つだけの子要素の場合に子要素が対象となります。

今回の「フィルタ」はこんな感じですね。
今回書いていませんが「属性フィルタ」もありますが、いままで当サイトでもよく使っていた
「$(“input[name=’type_1′]”)」などなので説明は省きます。

次は「フォームフィルタ」ですかね。
「フォームフィルタ」が終わればセレクター調査は完了です。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクタについて3(基本フィルタ)

セレクタシリーズの3回目、今回からはフィルタ機能についてです。

今回は基本フィルタを調査しました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#ul_1 li:even').css('color', '#ff0000');
                $('#ul_1 li:odd').css('color', '#0000ff');

                $('#ul_2 li:eq(4)').css('color', '#ff00ff');
                $('#ul_2 li:gt(4)').css('color', '#ffff00');
                $('#ul_2 li:lt(4)').css('color', '#00ffff');
                $('#ul_2 li:first').css('color', '#cccc00');
                $('#ul_2 li:last').css('color', '#00cccc');

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            ul {
                margin :20px;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <ul id="ul_1">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data</li>
                <li>4. data</li>
                <li>5. data</li>
                <li>6. data</li>
                <li>7. data</li>
                <li>8. data</li>
                <li>9. data</li>
            </ul>

            <ul id="ul_2">
                <li>1. data</li>
                <li>2. data</li>
                <li>3. data</li>
                <li>4. data</li>
                <li>5. data</li>
                <li>6. data</li>
                <li>7. data</li>
                <li>8. data</li>
                <li>9. data</li>
            </ul>

        </div>

    </body>
</html>

sample

前々回の「属性セレクタ」に引き続き地味な sample ページです。
まぁ、基本について説明させていただきます。

■:first
例) $(‘#sample:first’)
最初の要素が対象となります。

■:last
例) $(‘#sample:last’)
最後の要素が対象となります。

■:not(selector)
例) $(‘#sample:not(selector)’)
指定した要素以外が全て対象となります。

■:even
例) $(‘#sample:even’)
偶数の要素が対象となります。

■:odd
例) $(‘#sample:odd’)
奇数の要素が対象となります。

■:eq(index)
例) $(‘#sample:eq(index)’)
指定したインデックス番号の要素が対象となります。

■:gt(index)
例) $(‘#sample:gt(index)’)
指定したインデックスより後の要素が対象となります。

■:lt(index)
例) $(‘#sample:lt(index)’)
指定したインデックスより前の要素が対象となります。

■:header
例) $(‘#sample:header’)
h1,h2 などヘッダ要素が対象となります。

■:animated
例) $(‘#sample:animated’)
アニメーション中の要素が対象となります。

「基本フィルタ」はこんな感じですね。
正直「:header」とかは、使うぐらいならセレクタ使えばいいんじゃないかなぁ・・・
そう思うところもありますが「:first」や「:last」などの非常に便利なものもありますね。

個人的には「:eq」をうまく使っていきたいですね。
いままではfor文を使っていましたが、「:eq」があれば色々楽になりそうです。
まぁ、私の場合は(:animated)を使うことが多くなりそうですけどね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクタについて2(階層セレクタ)

セレクタシリーズの2回目は「階層セレクタ」について調べてみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {
                $('#sample0').css('color', '#ff0000');
                $('#sample1 p').css('color', '#ff0000');
                $('#sample2 > p').css('color', '#ff0000');
                $('#sample3 h2 + p').css('color', '#ff0000');
                $('#sample4 h2 ~ p').css('color', '#ff0000');
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                padding : 10px;
            }
            .topDiv {
                margin  : 10px;
                border : 1px solid #333333;
            }
        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <div id="sample0" class="topDiv">
                <h1>Title 0 Top</h1>
                <p>message 0_1</p>
                <p>message 0_2</p>
                <p>message 0_3</p>
                <div>
                    <h2>area 1</h2>
                    <p>message 1_1</p>
                    <p>message 1_2</p>
                    <p>message 1_3</p>
                </div>
                <div>
                    <h2>area 2</h2>
                    <div>
                        <p>message 2_div_1</p>
                        <p>message 2_div_2</p>
                        <p>message 2_div_3</p>
                    </div>
                    <p>message 2_1</p>
                    <p>message 2_2</p>
                    <p>message 2_3</p>
                </div>
            </div>
            
            <div id="sample1" class="topDiv">
                <h1>Title 1 Top</h1>
                <p>message 0_1</p>
                <p>message 0_2</p>
                <p>message 0_3</p>
                <div>
                    <h2>area 1</h2>
                    <p>message 1_1</p>
                    <p>message 1_2</p>
                    <p>message 1_3</p>
                </div>
                <div>
                    <h2>area 2</h2>
                    <div>
                        <p>message 2_div_1</p>
                        <p>message 2_div_2</p>
                        <p>message 2_div_3</p>
                    </div>
                    <p>message 2_1</p>
                    <p>message 2_2</p>
                    <p>message 2_3</p>
                </div>
            </div>

            <div id="sample2" class="topDiv">
                <h1>Title 2 Top</h1>
                <p>message 0_1</p>
                <p>message 0_2</p>
                <p>message 0_3</p>
                <div>
                    <h2>area 1</h2>
                    <p>message 1_1</p>
                    <p>message 1_2</p>
                    <p>message 1_3</p>
                </div>
                <div>
                    <h2>area 2</h2>
                    <div>
                        <p>message 2_div_1</p>
                        <p>message 2_div_2</p>
                        <p>message 2_div_3</p>
                    </div>
                    <p>message 2_1</p>
                    <p>message 2_2</p>
                    <p>message 2_3</p>
                </div>
            </div>

            <div id="sample3" class="topDiv">
                <h1>Title 3 Top</h1>
                <p>message 0_1</p>
                <p>message 0_2</p>
                <p>message 0_3</p>
                <div>
                    <h2>area 1</h2>
                    <p>message 1_1</p>
                    <p>message 1_2</p>
                    <p>message 1_3</p>
                </div>
                <div>
                    <h2>area 2</h2>
                    <div>
                        <p>message 2_div_1</p>
                        <p>message 2_div_2</p>
                        <p>message 2_div_3</p>
                    </div>
                    <p>message 2_1</p>
                    <p>message 2_2</p>
                    <p>message 2_3</p>
                </div>
            </div>

            <div id="sample4" class="topDiv">
                <h1>Title 4 Top</h1>
                <p>message 0_1</p>
                <p>message 0_2</p>
                <p>message 0_3</p>
                <div>
                    <h2>area 1</h2>
                    <p>message 1_1</p>
                    <p>message 1_2</p>
                    <p>message 1_3</p>
                </div>
                <div>
                    <h2>area 2</h2>
                    <div>
                        <p>message 2_div_1</p>
                        <p>message 2_div_2</p>
                        <p>message 2_div_3</p>
                    </div>
                    <p>message 2_1</p>
                    <p>message 2_2</p>
                    <p>message 2_3</p>
                </div>
            </div>

        </div>

    </body>
</html>

sample

「属性セレクタ」の説明のため sample ページは地味ですね・・・
まぁ、属性セレクタについて説明させていただきます。

■通常セレクタ
例) $(‘#sample0’)
指定した要素(’#sample0’)が全て対象となります。
まぁ、通常のセレクタです。

■子孫セレクタ
例) $(‘#sample1 p’)
選択範囲(#sample1)内の指定要素(p)が全て対象となります。
・・・これも、結構よく使いますね。

■子セレクタ
例) $(‘#sample2 > p’)
選択範囲(#sample2)内の指定要素(p)が対象となります。
但し、選択範囲の直下の指定要素のみが対象となります。
孫要素には影響しません。

■弟セレクタ(隣接)
例) $(‘#sample3 h2 + p’)
選択範囲(#sample3)内の兄要素(h2)に隣接した弟要素(p)が対象となります。
弟要素ですので、兄要素の前の要素には影響しません。
また、同じ弟でも兄要素の直後の弟要素にしか影響しません。
・・・兄を慕う次男専用の要素ですね。

■弟セレクタ(全部)
例) $(‘#sample4 h2 ~ p’)
選択範囲(#sample3)内の兄要素(h2)に対する弟要素(p)が対象となります。
弟要素ですので、兄要素の前の要素には影響しません。
対象となる弟要素であれば兄要素に隣接している必要はありません。
但し、途中にdivなどに入った弟要素(甥要素)がいても対象にはなりません。

「セレクタ」としてはこんな感じですね。
次回以降はセレクタシリーズの「フィルター編」です。

フィルターは今回のセレクタシリーズを始める原因です。
しっかり確認していこうと思います。

・・・ちなみに「属性」とか「階層」って勝手にタイトルをつけてますが正式な名称ってあるんですかね。
ましてや、要素名に「兄」「弟」「甥」とかどうなんでしょうか・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

セレクタについて1(属性セレクタ)

セレクタとは「$(‘p’)」とか「$(‘#id’)」とかの jQuery を使用する際の要素指定です。

今までは何気なく使用していたセレクタです、一度まじめに調べてみようと思います。
セレクタといっても種類がたくさんあるようで、シリーズものとしてしばらく調べてみようと思います。
まぁ、ID とか Class で選択する方法は、すでにブログで何度も使用していますし割愛させていただきます。

今回は「基本セレクタ」の一つである「属性セレクタ」について調べてみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {
                $('div[title]').css('color', '#ff0000');
                $('div[name=b_name_b_02]').css('color', '#00ff00');
                $('div[name*=name_c]').css('color', '#0000ff');
                $('div[name^=d_name]').css('color', '#ffff00');
                $('div[name$=_e_05]').css('color', '#00ffff');
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #checkArea, #buttonArea {
                margin : 10px;
            }
        --></style>
        
    </head>
    <body>

        <div id="linkArea">

            <div name="a_name_a_01" title="title">#ff0000</div>
            <div name="b_name_b_02">#00ff00</div>
            <div name="c_name_c_03">#0000ff</div>
            <div name="d_name_d_04">#ffff00</div>
            <div name="e_name_e_05">#00ffff</div>

        </div>

    </body>
</html>

sample

「属性セレクタ」の説明のため sample ページは地味ですね・・・
まぁ、属性セレクタについて説明させていただきます。

■属性名のみ
例) $(‘div[title]’)
この場合、title 属性を持つ div 要素が全て選択されます。
まぁ、属性セレクタの基本ですね。

■属性名=値
例) $(‘div[name=data]’)
属性の値が完全一致する要素のみ選択されます。

■属性名!=値
例) $(‘div[name!=data]’)
属性の値が一致しない要素のみ選択されます。

■属性名*=値
例) $(‘div[name*=data]’)
属性の値が部分一致する要素のみ選択されます。

■属性名~=値
例) $(‘div[name*=data]’)
属性の値が一致する要素のみ選択されます。
但し、スペースにて区切られた単語での一致判定を行います。
たとえば、例のセレクタの場合以下の要素が指定されます。
<div name=”test data display”>テスト表示</div>

■属性名^=値
例) $(‘div[name^=data]’)
属性の値が前方一致する要素のみ選択されます。

■属性名$=値
例) $(‘div[name$=data]’)
属性の値が後方一致する要素のみ選択されます。

とりあえず、属性セレクタはこんな感じですね。
なお、今回の属性セレクタは複数項目を指定することもできるみたいです。
$(‘div[name^=data][name$=data]’)

いままで複雑な要素を指定するには ID を設定していたんですが、
こんな便利な要素選択方法があったんですね。
結構な勢いで目からうろこが落ちました・・・

それと今回の調査内容の収穫としては name でも要素を指定できる事ですね。
これも知らなかった・・・、属性セレクタって凄いですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。