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

オブジェクトの包み込み

今回は Object の包み込みです。
使う機会があるかわからない Object 操作の処理ですが、とりあえずやってみます。

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

                $('#btn_wrap').click( function () {
                    $('p').wrap('<div class="div_wrap"></div>');
                });

                $('#btn_wrapAll').click( function () {
                    $('p').wrapAll('<div class="div_wrapAll"></div>');
                });

                $('#btn_wrapInner').click( function () {
                    $('p').wrapInner('<div class="div_wrapInner"></div>');
                });

                $('#btn_unwrap').click( function () {
                    $('p').unwrap();
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin  : 10px;
                padding : 10px;
            }
            p {
                border  : 1px #000000 solid;
            }
            .div_wrap {
                border  : 1px #ff0000 solid;
            }
            .div_wrapAll {
                border  : 1px #00ff00 solid;
            }
            .div_wrapInner {
                border  : 1px #0000ff solid;
            }
        --></style>
        
    </head>
    <body>

        <div id="buttonArea1">
            <button id="btn_wrap">wrap</button>
            <button id="btn_wrapAll">wrapAll</button>
            <button id="btn_wrapInner">wrapInner</button>
            <button id="btn_unwrap">unwrap</button>
        </div>

        <div id="divArea">
                <p>Area 1</p>
                <p>Area 2</p>
                <p>Area 3</p>
                <p>Area 4</p>
                <p>Area 5</p>
        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに obuject の包み込みや包み込みの解除を行いました。

ボタンは4個用意してあります。
ボタンによって変更内容が変わります。

■wrap
 指定した Object 毎に、新たな内容で包み込みます。
 包み込みを行う内容は既存の Object でも大丈夫です。

■wrapAll
 指定した Object を、新たな内容で包み込みます。
 基本は wrap と同じですが、指定 Object が複数ある時は少し動作が異なります。
 warp とは異なり、指定したオブジェクトを包み込む際に、まとめて包み込みます。
 指定 Object の間に別の Object があっても、指定の Object のみを包み込みます。

■wrapInner
 指定した Object 毎の内側を、新たな内容で包み込みます。
 まぁ、包み込みというより内包という感じですね。

■unwrap
 指定した Object の親要素を取り除きます。
 warp や warpAll の反対の処理ですね。

やり始める前は「使いみちがあるのかなぁ」という思いでしたが、なかなか面白い動きをします。
あまり階層を変更すると jQuery で ID などを指定しないと操作する時に困ることもあるかも知れません。
そんな時は ID で指定したりすればいいのかと思いますし、使いみちがなかなか楽しそうではありますね。

たとえば入力用の Form でグルーピングなどをリアルタイムにできるのは便利ではないでしょうか。

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

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

オブジェクトの置き換え

今回は Object の置き換えをやってみます。
追加や置き換え・削除とはまた違った動きですが Object 操作の処理です。

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

                $('#btn_replaceWith').click( function () {
                    $('#div_replaceWith').replaceWith('<div class="div_change"><p>click replaceWith.</p></div>');
                });

                $('#btn_replaceAll').click( function () {
                    $('<div class="div_change"><p>click replaceAll.</p></div>').replaceAll('#div_replaceAll');
                });

            });

        --></script>

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

        <div id="buttonArea1">
            <button id="btn_replaceWith">replaceWith</button>
        </div>
        <div id="divArea1">
            <div id="div_replaceWith">
                <p>replaceWith Area</p>
            </div>
        </div>

        <div id="buttonArea2">
            <button id="btn_replaceAll">replaceAll</button>
        </div>
        <div id="divArea2">
            <div id="div_replaceAll">
                <p>replaceAll Area</p>
            </div>
        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに obuject の置き換えを行いました。

ボタンは2個用意してあります。
ボタンによって変更内容が変わります?

■replaceWith
 指定した Object の内容を、新たな内容に置き換えます。

■replaceAll
 指定した Object の内容を、新たな内容に置き換えます。

replaceWith と replaceAll は基本的に同じ動作ですね。

$('#div1').replaceWith('#div2');
$('#div2').replaceAll('#div1');

上記の例は同じ動きとなり ‘#div1’ を ‘#div2’ と置き換えるようです。
また、置き換えをする場合の変更内容は 既存の Object でも新たな HTML 要素に
することも可能です。

変わった動きとして、置き換える前の Object の行方が少し面白い動きをします。
以下の様に書いておくと Object の 内容を 変数に取り込む事が出来るようです。
個人的には使用するようなことも無いような気がするので確かめてはいませんが・・・

var data = $('#div1').replaceWith('#div2');

残しておく必要があれば、非表示にしておいて prependTo で移動させたほうが
いいような気もします。
何か意味はあるんでしょうが少し不思議な気もしますね・・・

まぁ、replaceWith か replaceAll のどちらかを覚えておけば大丈夫ですね。
個人的には replaceWith のほうが他の関数とも操作方法が似ているように思うので
replaceWith を使用することになりそうです。

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

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

オブジェクトの削除/コピー

ここ最近は Object の追加と移動でした。

追加と移動ができるなら削除も必要です。
今回は Object の削除する方法です。

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

                $('#btn_remove').click( function () {
                    $('#div_remove').remove();
                });

                $('#btn_empty').click( function () {
                    $('#div_empty').empty();
                });

                $('#btn_clone').click( function () {
                    $('#div_clone .data').clone().appendTo('#div_clone');
                });

            });

        --></script>

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

        <div id="buttonArea1">
            <button id="btn_remove">remove</button>
        </div>
        <div id="divArea1">
            <div id="div_remove">
                <p>remove Area</p>
            </div>
        </div>

        <div id="buttonArea2">
            <button id="btn_empty">empty</button>
        </div>
        <div id="divArea2">
            <div id="div_empty">
                <p>empty Area</p>
            </div>
        </div>

        <div id="buttonArea3">
            <button id="btn_clone">clone</button>
        </div>
        <div id="divArea3">
            <div id="div_clone">
                <p class="title">title Area</p>
                <p class="author">author Area</p>
                <p class="data">data Area</p>
            </div>
        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに obuject の削除ができるようになりました。
また、ちょっと特殊な事かもしれませんがオブジェクトのコピーもできるようにしました。

ボタンは3個用意してあります。
ボタンによって変更内容が変わります。

■remove
 指定した Object 自体を削除します。

■empty
 指定した Object の内容を削除します。
 指定のオブジェクト自体は削除しません。

■clone
 指定した Object をコピーします。
 あくまでもコピーのため、class 指定や id 要素もそのままコピーします。
 そのため、id をコピーする場合は少し注意が必要です。
 また、対象が複数ある場合、対象全てをコピーします。

削除は色々使い道はあるかな、ただ通常は非表示にする事で対応可能な気もします。
form での情報送信時には色々使えるかもしれませんね。

clone のほうは色々と使い道がありそうですね。
同じ内容の項目を作る時はテンプレートを指定しておけば楽にコピーができます。
こんどから使ってみようかな。

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

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

オブジェクトの移動

前回は指定した Object の前後に新しい Object を追加する方法でした。
今回は指定した Object の前後に既存の Object を移動する方法です。

実は Object の移動がどういった状況で行うかをあまり想定できていません。
ですが、 Object の追加とワンセットで覚えておく内容かな、と思いましたのでやってみます。

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

                $('#btn_prependTo').click( function () {
                    $('#move_objct').prependTo('#div_objct');
                });

                $('#btn_appendTo').click( function () {
                    $('#move_objct').appendTo('#div_objct');
                });

                $('#btn_insertBefore').click( function () {
                    $('#move_objct').insertBefore('#div_objct');
                });

                $('#btn_insertAfter').click( function () {
                    $('#move_objct').insertAfter('#div_objct');
                });

            });

        --></script>

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

        <div id="buttonArea">
            <button id="btn_prependTo">prependTo</button>
            <button id="btn_appendTo">appendTo</button>
            <button id="btn_insertBefore">insertBefore</button>
            <button id="btn_insertAfter">insertAfter</button>
        </div>

        <div id="divArea">

            <div id="div_objct">
                <p>Div Area</p>
            </div>
            <div id="move_objct">
                <p>Div Move</p>
            </div>

        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに obuject の位置が移動されるようになりました。

ボタンは4個用意してあります。
ボタンによって変更先が変わります。

■prependTo
 既存の object を指定の Object の内側,先頭に移動します。

■appendTo
 既存の object を指定の Object の内側,最後に移動します。

■insertBefore
 既存の object を指定の Object の外側,直前に移動します。

■insertAfter
 既存の object を指定の Object の外側,直後に移動します。

この 4つを利用すると既存の Object を指定した Object の直前,直後に移動することができます。

う~ん、機能としては面白いんですけど、どんな時に使えばいいのかな~。
まぁ、メニュー項目とかの順番変更とかには使いやすいかなぁ。
個人的には微妙なかんじですね。
今後、使用できる機会があるといいんですが・・・

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

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