jQueryを利用するための基礎知識として、jQueryをインポートする方法、基本的な書き方などを紹介します。
CDNでjQueryをインポート
ライブラリはCDNで提供されいています。HTML内で次のように記述します。
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
公式サイトにアクセスし、jQueryをダウンロードして利用することも可能です。
- Versionについて
- jQuery1.x
- IE6以降であれば利用可能。
- jQuery2.x
- 1.xより性能がよい。しかし、IE9以降でないと利用できない。
- jQuery1.x
$(function () { });
jQueryの基本的な処理の書き方は次のようになります。
$(document).ready(function () {
// 処理を記述
});
jQueryのreadyメソッドの引数に目的の処理を記述します。readyメソッドは、Webページ全体(document)の読み込みが終わったことをきっかけにして引数内の処理を実行させます。readyメソッドは省略することが可能で、次のように記述するのが一般的です。
$(function () {
// 処理を記述
});
他のライブラリとの共存
$(function () { }); の $ は、jQueryオブジェクト です。$ は他のライブラリでも利用されている可能性があります。他のライブラリと共存して利用するためには、次の順序で記述します。
// 先に他のライブラリ読み込み(例としてprototype.js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.2/prototype.js"></script>
// jQuery読み込み
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
// jQuery読み込み直後に記述。$の利用をjQuery以外のライブラリに譲る。
jQuery.noConflict();
// $("h1").css("background-color", "#09C"); と記述してもjQueryとして動作しない。
// 次のように記述する。
jQuery("h1").css("background-color", "#09C");
noConflictを利用した場合、$("h1") ように記述してもjQueryとして動作しません。よってjQueryオブジェクトの呼び出しには jQuery("h1") のように記述しなければいけません。
$() と記述して利用したい場合、jQueryの処理を次のように囲う必要があります。
(function($) {
$(function() {
// 実行したいjQueryの処理。$("h1")などのように記述可能。
$("h1").css("background-color", "#09C");
});
})(jQuery);
$(セレクタ).jQueryメソッド(); の形が基本
jQueryの基本は、「なにを」「どうする」です。これは、$(セレクタ).jQueryメソッド(); という形で記述します。セレクタの部分で「なにを」を指定し、jQueryメソッドで「どうする」を指定します。
次の例では、すべてのh1要素の文字色を変更しています。
$("h1").css("color", "#09C");
jQueryメソッドでは「スタイル操作」以外にも、「テキスト操作」「要素の操作」「イベント処理」「エフェクト処理」などができ、セレクタで選択された要素すべてに対して実行されます。
セレクタの指定方法
代表的な指定方法を紹介します。
基本
| セレクタ種別 | 書式 |
|---|---|
| 要素 | $("要素名") |
| ID | $("#ID名") |
| クラス | $(".クラス名") |
| ユニバーサル | $("*") |
| グループ | $("セレクタ1,セレクタ2") |
階層指定
| セレクタ種別 | 書式 |
|---|---|
| 子孫（特定要素の内側にある要素） | $("要素1 要素2") |
| 子（特定要素の直下にある要素） | $("親要素 > 子要素") |
| 隣接 | $("要素1 + 要素2") |
フィルタ
| セレクタ種別 | 書式 |
|---|---|
| nth-of-type | $("要素:nth-of-type(番号)") |
| 否定（要素1のうち要素2の条件を除く要素） | $("要素1:not(要素2)") |
| [attribute] [attribute=‘value’] [attribute^=‘value’] |
$("[属性名]")$("[属性名='値']")$("[属性名^='値']") |
| first(指定要素の最初の要素) last(指定要素の最後の要素) |
$("要素:first")$("要素:last") |
| even（指定要素の偶数番号の要素） odd（指定要素の奇数番号の要素） |
$("要素:even")$("要素:odd") |
| eq（指定番号の要素） lt（指定番号より前の要素） gt（指定番号より後の要素） |
$("要素:eq(番号)")$("要素:lt(番号)")$("要素:gt(番号)")※番号は0から数える |
即時関数について
jQueryのプラグインのソースをみると次のような記述を見かけることがあるかと思います。
(function ($) {
$.fn.plugin_name = function () {
// プラグイン特有の処理
};
})(jQuery);
これは、即時関数といい関数の定義と呼び出しをまとめて行っています。試しに、次のような関数を即時関数に変化していく流れを見てみましょう。
function samplefunc($) {
}
samplefunc(jQuery);
関数定義と呼び出しをまとめて書く↓
(function samplefunc($) {
})(jQuery);
1度しか実行されないので無名関数にする↓
(function ($) {
})(jQuery);
後ろのカッコでjQueryオブジェクトを与えています。そのため、内部では、$変数を利用することでjQueryにプラグインメソッドを追加することができます。
- 参考(jQuery.extend と jQuery.fn.extend の違い)
jQuery.extend⇒ クラスメソッド(クラスプロパティ)の追加jQuery.fn.extend⇒ インスタンスメソッド(インスタンスプロパティ)の追加
即時関数を利用すると、その関数名はグローバル変数に割り当てられずに済むので、他のライブラリに上書きされることはなくなります。また、関数内部で宣言した変数もローカルに限定されるのでグローバル変数に影響を与えずに済みます。
ちなみに、jQueryのプラグイン作成方法は次の記事が参考になります。
⇒ プラグイン作成 · GitHub – Gist
