複雑なJavaScriptをより単純なコードで実装できるのがjQueryです。
今回は自分のサイトにjQueryを組み込むための基本を紹介します。
jQueryとは？
jQueryはJavaScriptのライブラリです。
簡単に言うと、JavaScriptの複雑な動き（コード）を、簡単に作成するためのものです。
CSSに近い記述方法で簡潔にまとめられるので、JavaScript初心者にも扱いやすいと思います。
jQueryの導入方法
jQueryを使用するためには下準備が必要です。
何もない状態で利用することは出来ないので、jQueryを利用するためのデータを準備必要があります。
このデータを導入する方法が2つあるので紹介します。
１．コンテンツデリバリネットワーク(CDN)を利用
これはjQueryのデータが置いてあるサーバーに、ネットワーク経由でアクセスし取得する方法です。
下記コードをヘッダーに記述することでjQueryのコードを利用できるようになります。
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
2.ライブラリをダウンロード
こちらはjQueryのデータを公式サイトよりダウンロードして、各々が利用しているサーバーにアップロードして使う方法です。
<script src="jQueryデータのパス"></script>
jQueryの基本文法
jQueryの基本的な文法がこちらです。
$('セレクタ').メソッド({パラメーター});
セレクタはHTMLの要素です。
タグ名、クラス名、ID名を使って対称の要素を指定します。
実際の動きはメソッド、パラメーターの部分で指定します。
簡単なメソッドを見てみましょう。
| メソッド | 意味 |
| .css() | セレクタのCSSを設定 |
| .addClass() | セレクタのクラスを付ける |
| .removeClass() | セレクタ のクラスを削除する |
| .attr() | セレクタの属性を指定 |
| .html() | セレクタのHTMLを設定 |
| .text() | セレクタのテキストを設定 |
| .before() | セレクタの前に挿入 |
| .after() | セレクタの後ろに挿入 |
| .prepend() | セレクタ内の最初に挿入 |
| .append() | セレクタ内の最後に挿入 |
| .animate() | 指定した時間をかけてcssを変化 |
| .width() | セレクタの幅をピクセル指定 |
| .height() | セレクタの高さをピクセル指定 |
メソッドは他にもたくさんあるので調べてみてください。
自分が組み込みたい動きからの逆検索をしてみると、jQueryを使ったコードがたくさん出てくると思います。
最後に
jQueryにはかなりのメソッドが用意されています。
スライドショーやSNSとの連携など広い動きに対応しているので、JavaScriptが苦手な方はこっちを使ってみるのもありかもしれません。
