最近の更新

読込中...

2016年8月23日火曜日

VMware Workstation 12.1.1 Player for Windowsの起動方法

【目的】
VMware Workstation 12.1.1 Player for Windowsの起動方法を起動します。



【手順１】
１．デスクトップに作成された『VMware Workstation 12Player』のショートカットを実行。




【手順２】
１．初回起動時に以下の様に表示されます。
２．『続行』ボタンをクリック。





【手順３】
１．『完了』ボタンをクリック。





【手順４】
１．以下の様に『VMware Player』が起動すれば成功です。




以上です。

投稿者 0 コメント
ラベル:

VMware Workstation 12.1.1 Player for Windowsのインストール方法

【目的】
VMware Workstation 12.1.1 Player for Windowsをダウンロードし、インストールします。



【手順１】
１．『VMware Workstation 12.1.1 Player for Windowsのダウンロード方法』の手順でダウンロードした『VMware-player-12.1.1-3770994.exe』を実行。




【手順２】
１．『次へ』ボタンをクリック。





【手順３】
１．『使用許諾契約書に同意します』を選択。
２．『次へ』ボタンをクリック。




【手順４】
１．『次へ』ボタンをクリック。





【手順５】
１．『VMware Workstation 12Playerの改善に協力する』(任意)を非選択。
２．『次へ』ボタンをクリック。





【手順６】
１．『次へ』ボタンをクリック。




【手順７】
１．『インストール』ボタンをクリック。
２．インストールが完了するのを待ちます。




【手順８】
１．『完了』ボタンをクリック。




以上です。

投稿者 0 コメント
ラベル:

VMware Workstation 12.1.1 Player for Windowsのダウンロード方法

【目的】
VMware Workstation 12.1.1 Player for Windowsをダウンロードし、インストールします。



【手順１】
１．『VMwareのサイト』にアクセス。
２．『ダウンロード』をクリック。




【手順２】
１．『Workstation Player』をクリック。





【手順３】
１．『VMware Workstation 12.1.1 Player for Windows 64-bit operating systems.』の『ダウンロード』ボタンをクリック。




【手順４】
１．保存場所を選択。
２．『保存』ボタンをクリック。




【手順５】
１．以下の様に保存できれば成功です。

































以上です。

投稿者 0 コメント
ラベル:

2016年8月19日金曜日

セレクトボックスの高さを項目数に合わせる方法

【目的】
jQuery3で、セレクトボックスの高さを項目数に合わせます。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel").attr("size", $("#sel option").length);
                });
            });
        </script>
    </head>
    <body>
        <button id="button">変更</button>
        <select id="sel">
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
        </select>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。





























以上です。

投稿者 0 コメント
ラベル:

複数選択セレクトボックスを全解除する方法

【目的】
jQuery3で、複数選択セレクトボックスを全解除します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel option").prop("selected", false);
                });
            });
        </script>
    </head>
    <body>
        <button id="button">全解除</button>
        <select id="sel" multiple>
            <option value="aaa" selected>あああ</option>
            <option value="iii" selected>いいい</option>
            <option value="uuu" selected>ううう</option>
            <option value="eee" selected>えええ</option>
            <option value="ooo" selected>おおお</option>
        </select>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

複数選択セレクトボックスを全選択する方法

【目的】
jQuery3で、複数選択セレクトボックスを全選択します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel option").prop("selected", true);
                });
            });
        </script>
    </head>
    <body>
        <button id="button">全選択</button>
        <select id="sel" multiple>
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
            <option value="eee">えええ</option>
            <option value="ooo">おおお</option>
        </select>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

複数選択セレクトボックスの項目変更時に処理する方法

【目的】
jQuery3で、複数選択セレクトボックスの項目変更時に処理を行います。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#sel").change(function(){
                    var textList = $.map($("#sel option:selected"), function(value, index){
                        return $(value).text();
                    });
                    $("#spn").html(textList.join(", "));
                })
                .change();
            });
        </script>
    </head>
    <body>
        <select id="sel" multiple>
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
            <option value="eee">えええ</option>
            <option value="ooo">おおお</option>
        </select>
        選択されている項目のラベル=『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

セレクトボックスの変更時に処理する方法

【目的】
jQuery3で、セレクトボックスの変更時に処理を行います。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#sel").change(function(){
                    $("#spn").html($("#sel option:selected").text());
                })
                .change();
            });
        </script>
    </head>
    <body>
        <select id="sel">
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
        </select>
        選択されている項目は『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

複数選択セレクトボックスの選択された項目のラベルを取得する方法

【目的】
jQuery3で、複数選択セレクトボックスの選択された項目のラベルを取得します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    var textList = $.map($("#sel option:selected"), function(value, index){
                        return $(value).text();
                    });
                    $("#spn").html(textList.join(", "));
                });
            });
        </script>
    </head>
    <body>
        <button id="button">表示</button>
        <select id="sel" multiple>
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
            <option value="eee">えええ</option>
            <option value="ooo">おおお</option>
        </select>
        選択されている項目のラベル=『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

複数選択セレクトボックスの選択された項目のvalueを取得する方法

【目的】
jQuery3で、複数選択セレクトボックスの選択された項目のvalueを取得します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#spn").html($("#sel").val().join(', '));
                });
            });
        </script>
    </head>
    <body>
        <button id="button">表示</button>
        <select id="sel" multiple>
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
            <option value="eee">えええ</option>
            <option value="ooo">おおお</option>
        </select>
        選択されている項目のvalue=『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

配列同士を結合する方法

【目的】
jQuery3で、配列同士を結合します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array1 = ["aaa", "bbb", "ccc"];
                var array2 = ["xxx", "yyy", "zzz"];
                var array3 = $.merge(array1, array2);
                $("#spn").html(array3.join(", "));
            });
        </script>
    </head>
    <body>
        結合した配列は『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

2016年8月18日木曜日

配列の各要素毎をGrepする方法

【目的】
jQuery3で、配列の各要素をGrepします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array = ["a", "bb", "ccc"];
                var array2 = $.grep(array, function(value, index) {
                    if (value.length >= 2) {
                        return true;
                    } else {
                        return false;
                    }
                });
                $("#spn").html(array2.join(", "));
            });
        </script>
    </head>
    <body>
        配列の中身が2文字以上のものは『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

配列の各要素毎の処理結果を配列で返す方法

【目的】
jQuery3で、配列の各要素毎処理を配列で返します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array = ["aaa", "bbb", "ccc"];
                var array2 = $.map(array, function(value, index) {
                    return index + ":" + value;
                });
                $("#spn").html(array2.join(", "));
            });
        </script>
    </head>
    <body>
        配列に番号を付番すると『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

配列の各要素毎に関数処理する方法

【目的】
jQuery3で、配列の各要素毎に関数処理を行います。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array = ["aaa", "bbb", "ccc"];
                var label = "";
                $.each(array, function(index, value) {
                    label += index + ":" + value + "<br />";
                });
                $("#spn").html(label);
            });
        </script>
    </head>
    <body>
        『label』は<br />
        <span id="spn"></span>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

配列内を検索する

【目的】
jQuery3で、配列内を検索します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array = ["aaa", "bbb", "ccc"];
                $("#spn1").html($.inArray("bbb", array));
                $("#spn2").html($.inArray("xxx", array));
            });
        </script>
    </head>
    <body>
        配列内に『bbb』は『<span id="spn1"></span>』番目<br />
        配列内に『xxx』は『<span id="spn2"></span>』番目<br />
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

配列を指定文字で区切って連結する

【目的】
jQuery3で、配列を指定文字で区切って連結します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array = ["aaa", "bbb", "ccc"];
                $("#spn").html(array.join(", "));
            });
        </script>
    </head>
    <body>
        配列を『, 』(カンマスペース)で区切って出力すると＝『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

配列を出力する方法

【目的】
jQuery3で、配列を出力します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                var array = ["aaa", "bbb", "ccc"];
                $("#spn").html(array);
            });
        </script>
    </head>
    <body>
        配列をそのまま出力すると＝『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。






























以上です。

投稿者 0 コメント
ラベル:

セレクトボックスの選択された項目のラベルを取得する方法

【目的】
jQuery3で、セレクトボックスの選択された項目のラベルを取得します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#spn").html($("#sel option:selected").text());
                });
            });
        </script>
    </head>
    <body>
        <button id="button">表示</button>
        <select id="sel">
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
        </select>
        選択されている項目のラベル=『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。





























以上です。

投稿者 0 コメント
ラベル:

セレクトボックスの選択された項目のvalueを取得する方法

【目的】
jQuery3で、セレクトボックスの選択された項目のvalueを取得します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#spn").html($("#sel").val());
                });
            });
        </script>
    </head>
    <body>
        <button id="button">表示</button>
        <select id="sel">
            <option value="aaa">あああ</option>
            <option value="iii">いいい</option>
            <option value="uuu">ううう</option>
        </select>
        選択されている項目のvalue=『<span id="spn"></span>』
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。





























以上です。

投稿者 0 コメント
ラベル:

2016年8月17日水曜日

複数選択セレクトボックスの中身と現在の値をコピーする方法

【目的】
jQuery3で、複数選択セレクトボックスの中身と現在の値をコピーします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel2").empty();
                    $("#sel1 > option").clone(false).appendTo("#sel2");
                    $("#sel2").val($("#sel1").val());
                });
            });
        </script>
    </head>
    <body>
        <button id="button">コピー</button>
        <select id="sel1" multiple>
            <option value="opt1-1">aaa</option>
            <option value="opt1-2" selected="selected">bbb</option>
            <option value="opt1-3">ccc</option>
            <option value="opt1-4" selected="selected">ddd</option>
            <option value="opt1-5">eee</option>
        </select>
        <select id="sel2" multiple>
        </select>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。































以上です。

投稿者 0 コメント
ラベル:

複数選択セレクトボックスの中身をコピーする方法

【目的】
jQuery3で、複数選択セレクトボックスの中身をコピーします。
※値が変更されている可能性がある場合は『複数選択セレクトボックスの中身と現在の値をコピーする方法』の手順でコピーします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel2").empty();
                    $("#sel1 > option").clone(false).appendTo("#sel2");
                });
            });
        </script>
    </head>
    <body>
        <button id="button">コピー</button>
        <select id="sel1" multiple>
            <option value="opt1-1">aaa</option>
            <option value="opt1-2" selected="selected">bbb</option>
            <option value="opt1-3">ccc</option>
            <option value="opt1-4" selected="selected">ddd</option>
            <option value="opt1-5">eee</option>
        </select>
        <select id="sel2" multiple>
        </select>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
































以上です。

投稿者 0 コメント
ラベル:

セレクトボックスの中身と現在の値をコピーする方法

【目的】
jQuery3で、セレクトボックスの中身と現在の値をコピーします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel2").empty();
                    $("#sel1 > option").clone(false).appendTo("#sel2");
                    $("#sel2").val($("#sel1").val());
                });
            });
        </script>
    </head>
    <body>
        <button id="button">コピー</button>
        <select id="sel1">
            <option value="opt1-1">aaa</option>
            <option value="opt1-2" selected="selected">bbb</option>
            <option value="opt1-3">ccc</option>
        </select>
        <select id="sel2" />
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。































以上です。

投稿者 0 コメント
ラベル:

セレクトボックスの中身をコピーする方法

【目的】
jQuery3で、セレクトボックスの中身をコピーします。
※値が変更されている可能性がある場合は『セレクトボックスの中身と現在の値をコピーする方法』の手順でコピーします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#sel2").empty();
                    $("#sel1 > option").clone(false).appendTo("#sel2");
                });
            });
        </script>
    </head>
    <body>
        <button id="button">コピー</button>
        <select id="sel1">
            <option value="opt1-1">aaa</option>
            <option value="opt1-2" selected="selected">bbb</option>
            <option value="opt1-3">ccc</option>
        </select>
        <select id="sel2" />
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
































以上です。

投稿者 0 コメント
ラベル:

タグをイベントは含めずコピーする方法

【目的】
jQuery3で、タグをイベントは含めずコピーします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#btn1").clone(false).appendTo("#div1");
                });
                $("#btn1").click(function(){
                    alert("btn1");
                });
            });
        </script>
    </head>
    <body>
        <button id="button">コピー</button>
        <button id="btn1">ボタン</button>
        <div id="div1" />
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。

































以上です。

投稿者 0 コメント
ラベル:

タグをイベントも含めてコピーする方法

【目的】
jQuery3で、タグをイベントも含めてコピーします。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#btn1").clone(true).appendTo("#div1");
                });
                $("#btn1").click(function(){
                    alert("btn1");
                });
            });
        </script>
    </head>
    <body>
        <button id="button">コピー</button>
        <button id="btn1">ボタン</button>
        <div id="div1" />
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。

































以上です。

投稿者 0 コメント
ラベル:

タグ自体を削除する方法

【目的】
jQuery3で、タグ自体を削除します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#div1").remove();
                });
            });
        </script>
    </head>
    <body>
        <button id="button">削除</button>
        <div id="div1" style="background-color: yellow; height: 50px;">
            abc
        </div>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
































以上です。

投稿者 0 コメント
ラベル:

タグの中身を削除する方法

【目的】
jQuery3で、タグの中身を削除します。



【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#button").click(function(){
                    $("#div1").empty();
                });
            });
        </script>
    </head>
    <body>
        <button id="button">削除</button>
        <div id="div1" style="background-color: yellow; height: 50px;">
            <span>abc</span>
        </div>
    </body>
</html>

４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
































以上です。

投稿者 0 コメント
ラベル:
登録: コメント (Atom)

関連記事

loading..