jQueryを利用するにあたって
フルCSSテンプレートを利用して作成したページを、CSS や jQuery プラグインを使用して、更に洗練化する練習をします。
jQuery とは
jQuery とは、JavaScript ライブラリの一つです。
簡単かつ軽量なプログラムコードであるにもかかわらず、Web ページ内でより多くのことが実行できるプログラムライブラリです。
この jQuery を読み込む jQuery 本体 と、jQuery の機能をさらに拡張する jQuery プラグイン を合わせて実装すると、面白い仕掛けや魅力的な効果、優れたユーザーインターフェイスを持つコンテンツなどが作成できます。
ブラウザーの違いをできるだけ吸収するよう設計されているので、パソコン、スマートフォンといった異なる環境でも、ほぼ同様の挙動を実現できます。
jQuery の使用方法
jQuery 本体を読み込む
jQuery 本体とそれを読み込むための記述を、head 要素に記入します。
方法１：ライブラリーをダウンロードする
jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。ダウンロードは、特別な理由が無い限り、最新版ライブラリの Minified （圧縮版）を使います。
- 公式サイト：
- Dowloading jQuery のページが開くので、jQuery 1.x のセクションで、 Download the compressed, production jQuery 1.11.1 のリンクを右クリックし、［名前を付けて保存］で、jquery-1.11.1.min.js をサイトにダウンロードする。
次に、head 要素に、jQuery 本体を読み込む script を記述します。
- head要素：
- <script src="jquery-1.11.1.min.js"></script>
方法２：CDNを利用する
CDN の一つで、グーグルのWebサービス「Google Hosted Libraries」を利用すると、jQuery本体をサーバーにアップしなくてもすぐに使えます。その場合は、以下のようにhead要素に、Google Hosted Libraries にある jQuery 本体をロードする script を記述します。
- head 要素の記述：
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
jQuery プラグインを読み込む
jQuery プラグインのコードは、jQuery本体を読み込むコード（上記参照）の後ろに記述します。
コードは、head タグ内に直接書いてもよいですが、コードの煩雑化を防ぐために、外部ファイルから読み込む方法が良いでしょう。
- head 要素の記述：
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> ← jQuery 本体を読み込む
- <script src="flyimages.jquery.js"></script> ← jQuery プラグイン読み込み
一行目は jQuery 本体の読み込み、二行目は jQuery プラグインの読み込みの記述です。
jQuery プラグインを探す
jQuery プラグインとは、jQuery と一緒に利用する JavaScript ライブラリです。jQuery プラグインを使うと、より手軽に、Web サイトにさまざまな効果を付けられます。
インターネット上では膨大な数のプラグインが公開されています。公式サイトの Jquery プラグインの紹介ページのほか、ブログなどで個人が公開しているのもあります。
海外サイトですが、jQuery List では、膨大な数の jQuery プラグインがカテゴリー別に紹介されています。
日本語で紹介されているものでは、JavaScript Library Archive があります。
プラグインは表示されたソースコードを「名前を付けて保存」などとすることでダウンロードできます。ダウンロードしたプラグインは、jQuery 本体の後に読み込むことで利用できます。
jQuery についてもう少し
jQuery コードの記述
jQueryのコードは、script要素内に、次のような書式で記述していきます。
- jQuery コード：
- $(function(){
- ここに jQuery の処理を記述
- });
なお、上のコードは $(document).ready() の省略形ですので、次のように書いてもよいです。
- jQuery コード：
- $(document).ready(function(){
- ここに jQuery の処理を記述
- });
jQuery はページ (document) の読み込みが完了 (ready) したあとに、記述した処理を実行します。
jQuery の処理の実行
次のようなコード記述がある場合、
- jQuery コード：
- $(function(){
- $("A").B()
- });
Aはセレクター、Bはメソッド、Bの直後のカッコ内を［パラメータ］と呼びます。
セレクターは「操作が発生した要素」や「変更したい要素」を指定し、次のように記述されます。
- $("セレクター")
- （セレクタは「“」（ダブルクォーテーション）、もしくは「’」（シングルクォーテーション）で囲います。
セレクターにはCSSのセレクターとほぼ同じものが利用できます。たとえば次のように記述すると、id属性が「main」の要素内に存在する img 要素を指定できます。
- $("#main img")
セレクタで指定した場所に、メソッドおよびパラメータで記述した命令（jQuery の命令）が処理されていきます。
それはセレクタで指定された要素の HTML や CSS を jQuery が操作・変更することで実現します。
jQuery で HTML/CSS を操作する
jQuery で HTML/CSS を操作するには、次のような書式で jQuery の命令を記述します。
- $(セレクター).jQuery の命令
jQuery の命令は豊富にあり、たとえば html() という命令を使うと、セレクターで指定した要素の内側を変更できます。
CSS を変更する場合は、css() という命令を使います。css() は CSS プロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述します。
サンプルを紹介します。
- HTML コード：
- <div class="sample1">
- このテキストは青くなります。
- </div>
- CSS コード：
- .sample1 {
- color : black ;
- }
上のコードがあったとします。このままだと、テキストは黒色で表示されます。
ここに次の jQuery 記述を追加します。
- jQuery コード：
- $(function(){
- $(".sample1").css("color","blue")
- });
つまり、セレクター(.sample1) の css を color:blue; にするという命令です。この結果、テキストは青色で表示されます。
イベント メソッド
jQuery の処理を実行するタイミングを制御するのがイベントです。イベントを設定することで、「クリックしたとき」や「ドラッグ＆ドロップしたとき」など、指定した要素に対する何らかの操作が発生したときに、HTML や CSS を操作できます。
- jQuery コード：
- $("セレクター").イベント(function(){
- ここにイベント発生時の処理を記述
- });
具体的な記述として、
- jQuery コード：
- $(function(){
- $("A").B(function(){
- $("C").D()
- });
- });
これは A を B したとき C を D する、となります。B がイベントです。
イベントには、クリック（click）やダブルクリック（dblclick）、マウスダウン（mousedown）、マウスアップ（mouseup）、マウスオーバー（mouseover）、マウスアウト（mouseout）、マウスムーブ（mousemove）などを設定できます。
.click（セレクターをクリックしたとき）や .mouseover（セレクターにマウスオーバーしたとき）のようにイベントを設定します。
サンプルです。
- HTML コード：
- <div class="sample2">
- クリックすると緑色になります。
- </div>
- CSS コード：
- .sample2 {
- background-color : white ;
- }
「div.sample2」を「クリック」したときに「同じ要素」の「background-color」を緑色にするための jQuery コードは次のようになります。
- jQuery コード：
- $(funtion(){
- $(".sample2").click(function(){
- $(this).css("background-color","green")
- });
- });
$(this) とは、イベント時に同じセレクタを使う、という意味です。
エフェクト メソッド
jQuery では、Web ページに動きを付けるアニメーション効果も手軽に実装できます。アニメーションとは言っても、HTML 要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せるものです。
アニメーション効果には次のような命令があります。
- ノーマル アニメーション：
- $("セレクター").show(スピード); ←表示
- $("セレクター").hide(スピード); ←非表示
- スライド アニメーション：
- $("セレクター").slideDown(スピード); ←表示
- $("セレクター").slideUp(スピード); ←非表示
- フェード アニメーション：
- $("セレクター").fadeIn(スピード); ←表示
- $("セレクター").fadeOut(スピード); ←非表示
他には、要素の表示・非表示を切り替える toggle() や slideToggle()、任意のCSSプロパティの値を徐々に変化する animate() 等がある。
それでは、まず jQuery 素材をダウンロードする を見てみましょう。
| |