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