jQueryとは、JavaScriptライブラリのひとつです。ライブラリとは、JavaScriptでよく使うコードをまとめたコード集のようなものです。 jQueryのファイルを読み込むだけで使える手軽さと便利さから、jQueryはJavaScriptの数あるライブラリの中でも最も有名なもののひとつです。
jQueryを使うことのメリット
ライブラリの最も大きなメリットはコードの記述量を減らせるという点です。 JavaScriptで一から書くと複雑で何十行にもなってしまうコードを、jQueryを使うことでシンプルかつ半分くらいのコード量になります。例えば、アニメーションつきで要素を表示・非表示するコードもほんの数行で済みます。 また、シンプルで分かりやすいのでプログラマーではないデザイナーでも扱うことができます。
jQueryを導入する方法
jQueryの導入はたった1行で済みます。まずは試してみたいという人は、以下のHTMLをhead要素内に挿入してみてください。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
これだけで、jQueryの導入は完了です。より詳細は以下を参照してください。 参照：【jQuery入門】jQueryファイルを読み込む２つの方法
jQueryのコードを記述する場所
jQueryのコードは、通常のJavaScriptと同様に外部のJavaScriptファイルに記述して読み込むか、scriptタグ内に記述するかどちらでも可能です。 また、とりあえずサンプルを試してみたいという場合は、CodePenやJSFiddleなどウェブ上で試せるツールがおすすめです。
jQueryではなにができるの？簡単サンプルで紹介
導入が完了したので、次にjQueryではなにが出来るのかを簡単なサンプルで紹介します。
jQueryの基本的な文法
最も基本的な文法は以下のような形です。
|
1 |
$("セレクタ").メソッド("パラメータ[引数]"); |
セレクタは、CSSと同じように「#id」「.class」といったように指定できます。そして、メソッドは自分でも拡張できますがjQueryが既に用意している便利なメソッドが沢山あります。
例：要素を非表示にする
#childを非表示にするサンプルです。セレクタが#child、メソッドがhide()で、パラメータは指定なしです。
|
1 |
$("#child").hide(); |
例：クリックしたら要素の表示・非表示を切り替える
もう少し実用的な、クリックしたら要素の表示・非表示を切り替える例です。 クリックしたら表示・非表示が切り替わるサンプルです。メソッドは、on()で第一引数がclickで、第二引数がクリックされる際に実行される関数となっています。
|
1 2 3 |
$("#toggle").on("click", function(){ $("#target").toggle("slow"); }); |
以下の表示・非表示ボタンをクリックすることで、ゆっくりと表示・非表示できます。 実際の表示
See the Pen [jQuery] 表示・非表示のサンプル by Yuichi Iwayama (@UXMILK) on CodePen.
より詳細は、以下を参照してください。 jQueryで表示・非表示のアニメーション：toggle(), show(), hide() このようにjQueryを使うと簡単かつシンプルなコードで、動きのあるサイトをつくることができます。
jQueryプラグインを使ってより便利に
また、jQuery本体とは別にjQueryプラグインというものがあります。これは、jQueryを使って書かれた便利なコードです。 例えばスライダーを実装したいという時、jQueryで一から書くこともできますが、それもやはり時間がかかってしまうものです。その時に、jQueryプラグインを使えばより簡単にスライダーを作ることができます。 よくある実装の場合は、探せばjQueryプラグインが見つかる場合が多いので、まずはプラグインを探してみても良いでしょう。
