jquery02.html $("#btn").click(function(){ price = 0; if($("#cb1").prop('checked')) price += 650; if($("#cb2").prop('checked')) price += 300; if($("#cb

Size: px

Start display at page:

Download "jquery02.html $("#btn").click(function(){ price = 0; if($("#cb1").prop('checked')) price += 650; if($("#cb2").prop('checked')) price += 300; if($("#cb"

なおくまじ
7 years ago
Views:

1 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>

2 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>

3 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>

4 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>

5 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>

6 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>

7 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>

8 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 # 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>

9 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">

10 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>

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript