最近の更新

2016年8月23日火曜日

VMware Workstation 12.1.1 Player for Windowsの起動方法

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



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




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





【手順3】
1.『完了』ボタンをクリック。





【手順4】
1.以下の様に『VMware Player』が起動すれば成功です。




以上です。

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

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



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




【手順2】
1.『次へ』ボタンをクリック。





【手順3】
1.『使用許諾契約書に同意します』を選択。
2.『次へ』ボタンをクリック。




【手順4】
1.『次へ』ボタンをクリック。





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





【手順6】
1.『次へ』ボタンをクリック。




【手順7】
1.『インストール』ボタンをクリック。
2.インストールが完了するのを待ちます。




【手順8】
1.『完了』ボタンをクリック。




以上です。

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

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



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




【手順2】
1.『Workstation Player』をクリック。





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




【手順4】
1.保存場所を選択。
2.『保存』ボタンをクリック。




【手順5】
1.以下の様に保存できれば成功です。

































以上です。

2016年8月19日金曜日

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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





























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

配列同士を結合する方法

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

2016年8月18日木曜日

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

配列内を検索する

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

配列を出力する方法

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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






























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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





























以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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





























以上です。

2016年8月17日水曜日

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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































以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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
































以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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































以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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
































以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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

































以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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

































以上です。

タグ自体を削除する方法

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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
































以上です。

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

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



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『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>

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
































以上です。

2016年8月16日火曜日

タグの中身を書き換える方法

【目的】
jQuery3で、タグの中身を書き換えます。



【手順】
1.『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
2.『index.html』というファイルを作成。
3.『index.html』を以下の様に入力。
<!doctype html>
<html>
    <head>
        <script src="jquery-3.1.0.min.js"></script>
        <script>
            $(function() {
                $("#div1").html("Hello World!");
            });
        </script>
    </head>
    <body>
        <div id="div1" />
    </body>
</html>

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































以上です。

jQuery3.1.0のダウンロード方法

【目的】
jQuery3.1.0をダウンロードし使用します。



【手順1】
1.『jQueryのサイト』にアクセス。
2.『Download』をクリック。




【手順2】
1.『Download the compressed, production jQuery 3.1.0』をクリック。




【手順3】
1.保存場所を選択。
2.『保存』ボタンをクリック。





【手順4】
1.以下の様にダウンロードできれば成功です。



































以上です。

関連記事