更新日: 2020年10月10日
公開日: 2015年12月06日

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

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

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

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

jQueryの書き方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

補足:$(document).ready

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

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

課題

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

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

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

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

PREV LESSON ☛ jQueryの基礎と使い方