Webサイト制作におけるjQueryの基礎

ｊQuery

Webサイト制作において、動的要素の導入方法の一つとして、jQueryを用いる方法がある。
jQueryはJavascriptのライブラリの一つで、現在ではデザイン面においても機能面においても幅広く利用されている。

本日よりjQueryについて基礎から学んでいく。

jQueryの主な特徴
  • ブラウザごとに異なる仕様の差異を吸収してくれる
  • 記述の仕方がCSSに似ているため、CSSを分かっている人には使いやすい
  • オープンソースで、商用利用可能なものが少なくない
  • プラグインなどを使うと、比較的簡単に導入できる

※ライブラリとは：http://e-words.jp/w/E383A9E382A4E38396E383A9E383AA.html
※オープンソースとは：http://e-words.jp/w/E382AAE383BCE38397E383B3E382BDE383BCE382B9.html
※プラグインとは：http://e-words.jp/w/E38397E383A9E382B0E382A4E383B3.html

jQueryを使用するための準備
  • jQueryのバージョンを確認する。Ver.2.0からはIE8以下をサポートしていないため、現状（授業及びこのブログ）ではIE8以下もサポートしているVer.1.9.1を用いる
  • HTMLのhead内で読み込む。jsファイルを作成またはダウンロードして用いてもよいが、CDN(Content Delivery Network：ネットワーク経由でコンテンツを提供するサービス）を利用してもよい→特にネットの接続が切れやすい環境でなければCDNの利用で問題ない

※CDNには主にjQuery CDNとGoogle Ajax API CDNとがあるが、内容は変わらないのでどちらを使用しても問題ない
※ファイル名に「min」が入っているものは「Minified」の意味で、jsのコードから改行が除かれた圧縮版のことを意味する

head内の記述（読み込み）の仕方は以下の通り。
１．自作またはダウンロードしたjsファイルを相対パスで読み込む場合

<head>
<script src="js/jquery-1.9.1.min.js"></script>  
</head>

２．jQuery CDNを利用する場合

<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
</head>

３．Google Ajax API CDNを利用する場合

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
</head>
jQueryの考え方

対象（jQueryオブジェクト）と動作（メソッド）を指定する必要がある。すなわち、「何」に「どんなこと」をさせたいかを指定する。

jQueryの記述方法1

具体的な記述方法は以下の通り。

$('○○').△△();

「'○○'」：指定したい要素を示す（特定する）セレクタ名。
「$()」：()内に書いたセレクタをjQueryオブジェクト化する役割をもった（お決まりの記号のような）もの。
⇒「$('○○')」：この部分がjQueryオブジェクトを表す。

「△△()」：要素に指定するメソッド（動きや操作）。
「.」：jQueryオブジェクトとメソッドとを繋ぐ役割をもつドット（このような書き方をドットシンタックスという）。

具体例は以下の通り。

$('#sample').show();  //id名が「sample」の要素を表示させる

上記の記述方法を用語を交えて言い表すと、動きや操作などを指定したいHTML内の要素をセレクタ（CSSの指定の仕方とほぼ同じ）で指定し、それをjQueryオブジェクト化したものにメソッド（動きや操作）を指定して実行する。

※メソッドを指定するには指定したい要素（セレクタ）をjQueryオブジェクト化しなければならない。要素（セレクタ）はjQueryオブジェクト化されてはじめてメソッドを指定する対象となる点に注意

jQueryの記述方法2

記述方法1で示した部分を「$(function(){})」で囲む。
具体例は以下の通り。

$(function(){
　$('#sample').show();
});

「$(function(){})」：「$(document).ready(function(){})」の省略形で、ページの読み込みが完了した後に、この中に書かれたコードを実行するという役割を持つ。

Javascriptは読み込まれた順に（コードに書かれた順に上から）処理されていくため、「$(function(){})」で囲むことで、処理実行時の読み込み状況によって生じる結果の不具合（意図した処理をするのに十分な範囲の読み込みが終わっていないタイミングで処理が実行されると、まだ読み込んでいない部分が存在しないものとして認識され（処理が通過し）、本来意図したはずの処理が実行されていないにも関わらず処理済みのようになってしまう問題）を回避できる。

※処理の実行部分に関して、「$(function(){})」で囲めばhead内に記述しても問題ないが、より確実なタイミングで実行させるために、bodyの終了タグの前に書くのが無難。ただし、jsファイルの読み込みの記述に関してはhead内で問題ない。