■補講 jQuery
本書はHTML5の入門書です。このため、ライブラリは使用せずにサンプルコードを作成＆解説しています。
ただ、Web制作においてライブラリを使わないという選択肢は、あまりないかと思います。特に多く利用されているのがjQueryというライブラリです（以後jQueryと省略）。jQuery以外にも古くはPrototype.js、重量系ではDojo ToolkitやExt JSがあります。
●jQuery
http://jquery.com/
●Prototype.js
http://www.prototypejs.org/
●Dojo Toolkit
http://dojotoolkit.org/
●Ext JS
http://www.extjs.co.jp/
jQueryは短く分かりやすい方法でページ内の要素を制御することができます。例えば本書でも使用している以下の記述があります。
document.querySelectorAll("#result")
これをjQueryを使うと以下のようになります。
$("#result")
かなり短くなっています。jQueryの$()はdocument.querySelectorAll()とだいたい同じ動作になります。つまりCSSでのセレクタ指定が、そのまま使えるわけです。例えばabcというクラスを持つ要素は以下のように指定できます。
$(".abc")
実際のサンプルで見比べてみるとよいかもしれません。JavaScriptだけのコードとjQueryを使った場合のコードを以下に示します。
jQueryを使ったサンプルで
$(function(){
});
という記述が最初に出てきます。これはページが読み込まれたら（またはDOM要素が準備できたら）処理を行うというjQuery独特の書き方です。
------------------------------------------------------------------------------------------------
■ページ内容を書き換えるプログラム（jQueryなし）
------------------------------------------------------------------------------------------------
要素にアクセス
要素にアクセス
日時：X月X日
------------------------------------------------------------------------------------------------
■jq.js（jQueryなし）
------------------------------------------------------------------------------------------------
window.addEventListener("load", function(){
var ele = document.querySelectorAll("#container span");
ele[0].innerHTML = "2月15日";
}, true);
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
■ページ内容を書き換えるプログラム（jQuery使用）
------------------------------------------------------------------------------------------------
要素にアクセス
jQueryで要素にアクセス
日時：X月X日
------------------------------------------------------------------------------------------------
■jq.js（jQuery使用）
------------------------------------------------------------------------------------------------
$(function(){
$("#container span").html("2月15日");
});
------------------------------------------------------------------------------------------------
===================================================================
■複数の要素にアクセス
jQueryが便利なシーンは多々あります。例えば複数の要素に対して、同じ処理を行うような場合です。ここでは、特定の要素内にあるspan要素内の文字の色を赤色にするコードを見てみましょう。
jQueryを使わずに書くと以下のようになります。
var ele = document.querySelectorAll("#container span");
for(var i=0; i
複数の要素にアクセス
複数の要素にアクセス
日時：2月15日
場所：日本のどこか
人数：7人くらい
------------------------------------------------------------------------------------------------
■jq.js（jQueryなし）
------------------------------------------------------------------------------------------------
window.addEventListener("load", function(){
var ele = document.querySelectorAll("#container span");
for(var i=0; i
複数の要素にアクセス
jQueryで複数の要素にアクセス
日時：2月15日
場所：日本のどこか
人数：7人くらい
------------------------------------------------------------------------------------------------
■jq.js（jQuery使用）
------------------------------------------------------------------------------------------------
$(function(){
$("#container span").css("color", "red");
});
------------------------------------------------------------------------------------------------
===================================================================
■etc
jQueryに興味を持たれた方は以下の10日で覚えるシリーズにjQuery入門教室がありますから一読するとよいでしょう。
●10日でおぼえる jQuery入門教室
http://www.amazon.co.jp/dp/4798123447
また、ダウンロードフォルダにはjQueryの全命令と指定できるパラメータのバージョンを記述したExcelファイルとタブ区切りファイルに変換したものも入れてあります。Databaseに入れて適当に加工処理したり、チートシートにするなりしてお使いください。