ｊQuery

演習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，ｊQuery 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，ｊQuery 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>．