jquery01.html $("#btn").click(function(){ $("#txt2").val($("#txt1").val()); <title> 課 題 1</title> <h1> 課 題 1</h1> <form> <input type="text" id="txt1"><br> <input type="text" id="txt2"><br> <input type="button" id="btn" value="コピー"> </form>
jquery02.html $("#btn").click(function(){ price = 0; if($("#cb1").prop('checked')) price += 650; if($("#cb2").prop('checked')) price += 300; if($("#cb3").prop('checked')) price += 500; $("#txt").val(price); <title> 課 題 2</title> <h1> 課 題 2</h1> <form> <p> <input type="checkbox" id="cb1">チャーハン <input type="checkbox" id="cb2"> 餃 子 <input type="checkbox" id="cb3">ビール </p> <p> 合 計 <input type="text" id="txt" size = "10"> 円 <input type="button" id="btn" value=" 勘 定 "> </p> </form>
jquery03.html $("textarea").keyup(function(){ var counter = $(this).val().length; $("#num").text(counter); if(counter == 0){ $("#num").text("0"); if(counter >= 10){ $("#num").css("color","red"); else{ $("#num").css("color","black"); <title> 課 題 3</title> <h1> 課 題 3</h1> <p>10 文 字 まで 入 力 できます </p> <textarea cols="30" rows="5"></textarea> <p> 文 字 数 </p> <div id="num" style="font-size:16pt">0</div>
jquery04.html $("button").click(function(){ $("p").toggle(); <title> 課 題 4</title> <h1> 課 題 4</h1> <h2>jquery でプログラムします </h2> <button>show/hide</button> <p>p タグだけ 表 示 / 非 表 示 します </p> <p>ここも p タグ</p>
jquery05.html $("button").click(function(){ $("#here").toggle(); <title> 課 題 5</title> <h1> 課 題 5</h1> <h2>jquery でプログラムします </h2> <button>show/hide</button> <p id="here">ここの p タグだけ 表 示 / 非 表 示 します </p> <p>ここも p タグ</p>
jquery06.html $("button").click(function(){ $(".here").toggle(); <title> 課 題 6</title> <h1> 課 題 6</h1> <h2 class="here">jquery でプログラムします </h2> <button>show/hide</button> <p class="here"> 同 じ class が 表 示 / 非 表 示 します </p> <p>ここは 違 う class</p>
jquery07.html $("#p1").mouseenter(function(){ alert(" 段 落 1に 入 りました "); $("#p2").mousedown(function(){ alert(" 段 落 2を 押 しました "); <title> 課 題 7</title> <h1> 課 題 7</h1> <h2>jquery でプログラムします </h2> <p id="p1">この 段 落 にマウスを 入 れてください </p> <p id="p2">この 段 落 でマウスを 押 してください </p> <p>ここは 反 応 しません </p>
jquery08.html $('table tr:even').css('background-color', 'lightgreen'); $('table tr:odd').css('background-color', 'white'); <style type="text/css"> table { width: 400px; border:1px #000 solid; td,th { border:1px #888 solid; </style> <title> 課 題 8</title> <h1> 課 題 8</h1> <table style='border-collapse: collapse; border: 2px #000000 solid'> <th> 駅 </th><th>1rm</th><th>1dk</th><th>2dk</th><th>3dk</th><th>4dk</th> <td> 森 下 </td><td>8.41</td><td>8.88</td><td>12.87</td><td>15.78</td><td>19.24</td> <td> 清 澄 白 河 </td><td>8.19</td><td>9.94</td><td>12.39</td><td>15.73</td><td>21.33</td> <td> 門 前 仲 町 </td><td>9.89</td><td>9.96</td><td>14.29</td><td>19.61</td><td>17.42</td> <td> 月 島 </td><td>11.19</td><td>10.12</td><td>17.38</td><td>23.54</td><td>37.83</td> <td> 勝 どき</td><td>13.18</td><td>13.88</td><td>19.01</td><td>28.24</td><td>34.96</td> <td> 汐 留 </td><td>15.03</td><td>16.82</td><td>27.56</td><td>51.14</td><td>80.00</td> </table>
jquery09.html $("#btn1").click(function(){ $("#img1").fadeout("slow"); $("#img2").fadeout(); $("#btn2").click(function(){ $("#img1").fadein(); $("#img2").fadein("slow"); <title> 課 題 9</title> <h1> 課 題 9</h1> <button id="btn1">フェードアウト</button> <button id="btn2">フェードイン</button> <p></p> <img id="img1" src="./images/shinjuku.jpg"> <img id="img2" src="./images/fujitv.jpg">
jquery10.html $("#flip").click(function(){ $("#panel").slidetoggle("slow"); <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; #panel { padding:50px; background-color:#e5eeee; </style> <title> 課 題 10</title> <h1> 課 題 10</h1> <div id="flip">ここをクリックするとパネルが 出 入 りします </div> <div id="panel" style="display: none;">hello JavaScript</div>