月別アーカイブ: 2013年10月

セレクタについて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 人がこの 投稿 は役に立ったと言っています。

jQueryでイベントを発生させる。

前回は通常実行されるイベントのキャンセルでした。
今回は通常実行される処理を発生させる方法です。

たとえば a タグなどをクリックすると、通常は href で指定した URL に移動します。
これらのイベントを他の処理を条件に発生させる方法です。

<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() {
                
                // initialize
                $('#message').hide();

                // Base Event
                $('#checkbox').click( function() {
                    alert('checkbox clicked!!');
                });

                // event trigger
                $('#triggerN').click(function(){
                    $("#checkbox").trigger("click");
                });

                // event triggerHandler
                $('#triggerH').click(function(){
                    $("#checkbox").triggerHandler("click");
                });

            });

        --></script>

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

        <div id="checkArea">
            <div>
                <p>click me!</p>
                <input type="checkbox" id="checkbox" /><span id="message">checked</span>
            </div>
        </div>

        <div id="buttonArea">
            <div>
                <input type="button" id="triggerN" value="trigger" />
                <input type="button" id="triggerH" value="triggerHandler" />
            </div>
        </div>

    </body>
</html>

sample

sampleページでは checkbox の check 状態が「On」の場合、「checked」という文字が
表示されるようにプログラムしています。
そのため、 checkbox を click すると checkbox の表示状態が変更され、alert が表示されます。

これに対して下部に設置した button を click することで、checkbox を click した時と
同じ処理を発生させることができます。

・・・えっと、button を 2 つ設置しているのには意味があります。
基本の「指定の object に対して、指定のイベントを実行させる」ことは同じです。
ですが、少しだけ処理が異なります。

「trigger」ボタンでは trigger という処理を実行します。
 object に対して、指定した event を実際に行ったような処理を行います。
 そのため、sample のページでは 「trigger」を押すことで check の状態も変更します。
 そのうえで alert も表示されます。

「triggerHandler」ボタンでは triggerHandler という処理を実行します。
 object に対して、指定した event で実行予定の jQuery の内容だけを実行します。
 そのため、sample のページでは 「triggerHandler」を押しても check の状態は変更されません。
 しかし、alert は表示されます。
 また、checkbox の上位の object に別の event が設定してあっても、それらは実行されません。

この 2つを利用すると mauseover を条件に、Link を click した処理を実行するとか使えそうです。
まぁ、メインで使用する事は無いのかも知れませんが・・・
メインで無くとも、ページスクロール時にページ内遷移と同じ処理を行うなど、色々と面白いことができそうですね。

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

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

通常実行される処理をキャンセルする

今回は 通常実行される処理をキャンセルする方法です。

たとえば a タグなどをクリックすると、通常は href で指定した URL に移動します。
これを jQuery にてキャンセルする方法です。

<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() {

                // event cansel (return false)
                $('#link_2').click(function(eObj){
                    alert('event return false');
                    return false;
                    alert('event cancel');
                });
                
                // event cansel
                $('#link_3').click(function(eObj){
                    alert('event preventDefault');
                    eObj.preventDefault();
                    alert('event cancel');
                });

            });

        --></script>

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

        <div id="linkArea">
            <div>
                <p>click move url ( http://jsource.nakweb.com/ )</p>
                <a href="http://jsource.nakweb.com/" id="link_1" /> click link 1 </a><br />
            </div>
            <div>
                <p>click move cancel (return false)</p>
                <a href="http://jsource.nakweb.com/" id="link_2" /> click link 2 </a><br />
            </div>
            <div>
                <p>click move cancel (preventDefault)</p>
                <a href="http://jsource.nakweb.com/" id="link_3" /> click link 3 </a><br />
            </div>
        </div>

    </body>
</html>

sample

sample ページにはリンクが三つあります。
どのリンクにも href は http://jsource.nakweb.com/ を指定してあります。

一つ目のリンクはクリックすると通常通り別ページに移動します。

二つ目は return false を行うことでページ移動をキャンセルしています。
return false は以前から使用していましたが、event 自体を終了してしまいます。
このため、継続して何かを実行したい場合、retuen false は処理の最後に記述することになります。

三つ目は jQuery の preventDefault メソッドを使用してページ移動をキャンセルしています。
preventDefault メソッドは「ブラウザの event をキャンセルする」処理となります。
そのため、ページ移動をキャンセルした後、何の制限もなく jQuery の処理が続けられます。
また、checkbox をクリックした場合に check される処理をキャンセルすることもできるようです。

今後は preventDefault メソッドを使用して行きたいですね。

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

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