- 更新日: 2020年10月10日
- 公開日: 2015年12月06日
ゼロから始めるJavaScript講座Vol22 jQueryの書き方
前回はjQueryのダウンロード方法を解説しました。JavaScriptのライブラリであるjQueryは、DOMや簡単なアニメーション、Ajaxを使うことができる便利なものです。今回は、jQueryの書き方を解説していきます。
ゼロから始める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は「$(セレクタ)」で選択した要素(オブジェクト)に対して、多数のメソッドが用意されています。以下で一部を紹介します。
メソッド | 説明 |
---|---|
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の基礎と使い方
- この記事を書いた人
- りもた