jQuery
jQueryを利用したスクリプトでは、
(1) どのHTMLの要素を操作するかを「セレクター」で指定し、
(2) 操作する内容を書きます。
具体的には、$("…")の内側にセレクターを記述し、
その後ろに.(ドット)でjQueryの命令を記述していく。
jQueryは、ほぼすべてこの形式で処理を書く。
$(function({
$("セレクター").jQueryの命令
});
jQueryを理解する第一歩として、「セレクター」を覚える必要がある。
jQueryには様々な種類のセレクターが用意されている。
ブラウザーがまだscript要素までしか読み込んでいない場合、
意図した動きをしない。
そこで、スクリプトを実行するタイミングを制御する「ready」というjQuery関数
ready関数を使用する。
ready関数は、以下のような形式で使用する。
$(document).ready(function(){
ここにjQueryの処理を記述
});
このとき、ready関数の内側(function(){…}内)に書かれている命令は、
HTMLの読み込みが終わった後に実行される。
readyという名前のとおり、「準備ができた段階でスクリプトを実行する」。
これで、head要素内のscript要素にスクリプトを書いた場合でも、body要素内のHTMLをきちんと操作できる。
$(function(){
ここにjQueryの処理を記述
});
jQueryでスクリプトを書くときは、ほとんどの場合、まずready関数を記述し、
その内側に実際の命令を記述する。
jQueryの1つの”ルール”として覚えておく。
Webサイトは
HTMLで、コンテンツの構造や内容を構築し、
CSSで、デザイン（レイアウトや装飾）を定義する。
JavaScriptは、「HTMLとCSSを操作するためのプログラミング言語」である。
ユーザーの操作などが発生したタイミングで
HTMLやCSSを動的な動きのあるWebサイトにしてくれる。
jQueryに限らず、JavaScriptを記述するときはHTMLとCSSを強く意識する必要がある。
jQueryを含むJavaScriptのコードはscript要素の中に記述をする。
WebブラウザーはHTMLをファイルの先頭から1行ずつ読み込んでいて、
script要素が読み込まれた段階で、script要素内に記述された命令を実行する。
前回の記事では、jQueryファイルを自身のサーバーに上げる方法でしたが、
米グーグルのサービス「Make the Web Faster」を利用すれば、
ダウンロード不要でjQueryを利用できる。
Google「Make the Web Faster」は、
さまざまなJavaScriptライブラリをグーグルサーバーにホスティングし、
Webページに直接読み込めるようにしたサービス。
また、ユーザーが過去に「Make the Web Faster」を使っているWebページを閲覧していればJavaScriptファイルがキャッシュされているので、
自身のサイトに初めて訪れた場合でも、ページの表示速度が高速化されるメリットも期待できる。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
以下のようにバージョン名の一部（マイナーバージョン）を省略すると、
常に最新のバージョンを自動的に読み込んでくれます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
ただ、バージョンアップの際に、
バグや仕様変更が含まれる場合も反映されてしまうというデメリットもある。
またマイナーバージョンを指定した場合に比べキャッシュの有効期限が短くなるため、
(バージョンを指定しない場合は１時間、指定した場合は１年間有効)
表示速度の高速化のメリットを受けるためにも、
マイナーバージョンを指定する方法のほうがメリットが多い。
jQueryをWebサイトに導入するにはいくつかの方法があるが、もっともポピュラーなのは、
公式サイトからライブラリー本体(JavaScriptファイル)をダウンロードし、サーバーにアップする方法。
jQuery公式サイトのトップページにあるDownloadメニューから、Google Ajax Libraries API CDNをクリックし、「jquery.min.js」をダウンロードする。
jQueryのソースコードは、変数名を短くし、コメントや空白、改行を削除する「MiniFied」と呼ばれる形式で圧縮されている。
ファイルサイズを大幅に減らす(圧縮前は117KB、圧縮後は55.9KB)ことで読み込み速度の向上を図っている。
jQueryのソースコードは、JavaScriptの高度なTipsがたくさん使われているので、
非圧縮版を入手して目を通しておくと良い。
非圧縮版のソースコードはDownloadメニューのDevelopment (247KB, Uncompressed Code) にチェックを入れる
