ゼロから始めるJavaScript講座Vol22 jQueryの書き方


ゼロから始めるJavaScript講座Vol22  jQueryの書き方

前回はjQueryのダウンロード方法を解説しました。JavaScriptのライブラリであるjQueryは、DOMや簡単なアニメーション、Ajaxを使うことができる便利なものです。今回は、jQueryの書き方を解説していきます。

目次
  1. ゼロから始めるJavaScript講座 jQueryの書き方
  2. jQueryの書き方
  3. 補足:$(document).ready
  4. 課題

ゼロから始めるJavaScript講座 jQueryの書き方

jQueryの書き方

jQueryの基本的な書き方は以下となります。

javascript-jquery-write1-639

例えば、次のようなdiv要素の内容を書き換える場合について考えます。
jQueryを使わない場合と使う場合は以下の通りです。

javascript-jquery-write2-639

jQuery未使用の場合、document.getElementById()を利用してdiv要素を取得し、このinnerHTMLプロパティの値を代入していました。

javascript-jquery-write3-639

jQueryを使用する場合、「$(セレクタ)」のセレクタ部分にid属性の値を指定、htmlメソッドの引数に要素の内容を指定します。

このようにjQueryでは「$(セレクタ)」にCSSのセレクタと同じように指定することで、操作を行う要素を指定することができます。

javascript-jquery-write4-639

idは1つのHTMLに1つですが、要素やclass属性は複数存在することもあります。

javascript-jquery-write5-639

上記のように「$('p')」と複数あるp要素をセレクタに指定した場合、全てのp要素の内容が「書き換え後」に書き換わります。

javascript-jquery-write6-639

またjQueryは「$(セレクタ)」で選択した要素(オブジェクト)に対して、多数のメソッドが用意されています。以下で一部を紹介します。

HTML/CSS操作
メソッド 説明
addClass() 選択した要素へclass(CSS)を追加する
append() 選択した要素内の最後に内容を追加する
html() 選択した要素の内容を設定するか返す
remove() 選択した要素を削除する
イベントハンドラ
メソッド 説明
click() 選択した要素のclickイベント発生時に関数を実行する
hover() 選択した要素のhoverイベント発生時に関数を実行する
keydown() 選択した要素のkeydownイベント発生時に関数を実行する
ready() DOMの読み込みが完了した際に関数を実行する
 

JavaScriptでは選択した要素に対して、プロパティ(innerHTML等)の値を設定したり、addEventListener()により監視するイベントを設定したりと書き方がバラバラでした。

jQueryでは基本的に「$(セレクタ).メソッド(引数)」と同じ書き方で指定できます。 文章だけは理解が難しいと思いますので、実際にjQueryに利用したプログラムをお手本に従い作成してみましょう。

ファイル名: jquery.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function add_element() {
            $('#box').append('<p>p要素を追加しました</p>');
        }

        // DOMの読み込みが全て完了したら
        $(document).ready(
            function() {
                $('#add').click(add_element);
            }
        );
    </script>
</head>
<body>
    <button id="add">要素を追加</button>
    <div id="box"></div>
</body>
</html>

javascript-jquery-write7-639

javascript-jquery-write8-639

ボタンをクリックすることで、p要素が追加されます。

javascript-jquery-write9-639

いきなり特殊な処理の説明になりますが、「$(document).ready()」は、documentオブジェクトを選択しreadyメソッドを実行しており、これは「JavaScriptからHTMLを操作するためのDOMの読み込みが完了したとき引数に指定した関数を実行」します。

役割は「window.onload」と同じようなもので、DOMが作成される前にHTML操作を記述してもエラーとなってしまうため、読み込み完了イベントを監視しています。
※厳密にはwindow.onloadとはイベントの発生タイミングは異なります。

javascript-jquery-write10-639

「$('#add').click(add_element);」はbutton要素[id="add"]のclickイベントを監視しており、clickが実行されると引数に指定したadd_element関数を実行します。

javascript-jquery-write11-639

「$('#box').append('<p>p要素を追加しました</p>');」はdiv要素[id="box"]の要素内の最後に引数へ指定した内容を追加しています。これについてはjQuery未使用の書き方との対比を次に示します。

javascript-jquery-write12-639

jQuery未使用の場合、HTML要素の追加はdocument.createElement()によりまず空の要素を作成し、innerHTMLプロパティにより要素の内容を設定、最後にappendChild()により作成した要素を追加していました。

これをjQueryでは「$('#box').append('<p>p要素を追加しました</p>');」と1行で書くことができます。

このようにjQueryを利用することで、ソースコードを短く、かつシンプルに書くことができます。最初に述べたように「JavaScript + jQuery」とセットで考えるのが常識と言えるほどjQueryは広く利用されています。よって今後はjQueryを利用してJavaScriptを書きましょう。

補足:$(document).ready

本章で紹介した「$(document).ready」ですが、実はより短く省略して書くことが可能です。

javascript-jquery-write13-639

「要素もメソッドも書かれていない・・・」と言いたくなるかもしれませんが、実際に省略して実行してみれば、問題なく動作することが分かります。

課題

jQueryを利用しカウントダウンタイマーを1から作成してください。要件は以前作成した際と変更ありません。

  • カウントは03:00からスタートする
  • スタートボタンを押すと1秒ずつカウントが進む
  • カウントが00:00になったら「TimeUP!」と表示する
  • ストップボタンを押すとカウントが止まる
  • リセットボタンを押すとカウントが03:00に戻り、カウントが止まる

javascript-jquery-write14

文字色や背景色など、見た目(CSS)は自由です。

  • カウントは03:00からスタートするjavascript-jquery-write15-639
  • スタートボタンを押すと1秒ずつカウントが進むjavascript-jquery-write16-639
  • カウントが00:00になったら「TimeUP!」と表示するjavascript-jquery-write17-639
  • ストップボタンを押すとカウントが止まるjavascript-jquery-write18-639
  • リセットボタンを押すとカウントが03:00に戻り、カウントが止まるjavascript-jquery-write19-639

    NEXT LESSON ☛ Ajaxとは

    PREV LESSON ☛ jQueryの基礎と使い方


関連記事

りもた
この記事を書いた人
りもた
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp