勉強部屋‎ > ‎HTML5‎ > ‎

jQuery

演習8-1

jQueryを用いて,ページが読み込まれたらブラウザに”こんにちは”と表示するスクリプトを作成せよ.ただし,htmlのbody部は次のようになっているものとする.
<body>
    <div id="hello"></div>
</body>

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>HTML5,jQuery,jQuery Mobile サンプル</title>
  6. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  7. <script>
  8. $(function(){
  9.     $("#hello").text("こんにちは");
  10. });
  11. </script>
  12. </head>
  13. <body>
  14.     <div id="hello"></div>
  15. </body>
  16. </html>

解説

  • 6行目
    • .jQueryのサイトに公開されているjQueryのコードを読み込む.
  • 8行目から9行目
    • ドキュメントが読み込まれた後で実行するコードを記述する.
    • $(function(){…}; は,$(document).ready(function() {…}); の省略形.
    • 基本的にjQueryのコードはこの中(…の部分)に書く.
  • 9行目
    • $("#hello").text("こんにちは"); で,idが"hello"である要素のテキストを"こんにちは"とする.
    • jQueryでは $("セレクタ").メソッド(); の形で処理を記述する.
    • $("#hello")で,helloというidをもつ要素オブジェクト(DOM要素そのものではなくjQueryオブジェクト)を対象とすることを表す.ちなみに,jQueryオブジェクトからDOM要素を取得するにはget()メソッドを用いる.
    • セレクタには,CSSセレクタを記述できる他,柔軟に処理の対象を指定する方法が多数用意されている.
    • text(txt)メソッドで,テキストを設定する.
    • 他のメソッドについては, http://semooh.jp/jquery/ などを参考に.

演習8-2

jQueryを用いて,数字をクリックすると,そのたびにカウントアップするスクリプトを作成せよ.ただし,htmlのbody部は次のようになっているものとする.
<body>
    <span id="count">0</span>
</body>

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>HTML5,jQuery,jQuery Mobile サンプル</title>

  6. <style>
  7. span {
  8.     font-size: 200%;
  9.     color: #FFF;
  10.     background-color: #334d55;
  11.     text-align: center;
  12.     padding: 15px;
  13. }
  14. </style>

  15. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  16. <script>
  17. var count, counter, ctext;
  18. $(function(){
  19.     count = 0;
  20.     $("#count").click( function() {
  21.         count += 1;
  22.         $(this).text(count);
  23.     });
  24. });
  25. </script>

  26. </head>

  27. <body>
  28. <p>クリックするとカウントアップします.</p>
  29.     <span id="count">0</span>
  30. </body>
  31. </html>

解説

  • 22行目
    • $("#count").click( function() {… でcountというidの要素がクリックされたときの処理を設定
  • 24行目
    • $(this)は,クリックされたオブジェクトを表す.この例の場合<span id="count">…</span>.
Comments