【 Education】jQueryについて_基礎編(JavaScript)

jQueryとは、JavaScriptをより簡単に記述できるライブラリのことです。 サイト上でよく見かけるアニメーション等を少ないコード量で実装できるようになります。

例えば、、、

• クリックしたら画像が入れ替わる
• マウスオーバーした要素がアニメーションのように動く
• フォームの中の要素を動的に変更する
• スクロール量によって見た目や数値を変更する

jQueryの読み込み方

jQueryを使用する方法は２つあります。 公式のWebページからソースを呼び出し読む込む方法と、ローカルにダウンロードしてローカルファイルから読み込む方法です。

Web上のソースを読み込む方法
下記の例の2.1.4の部分がバージョンになります。対応させたいバージョンの数字を記述して下さい。

ダウンロードしてローカルで読み込む方法
jQueryライブラリの公式ページからダウンロードをしてきます。バージョンが結構あり、バージョンによって対応している内容が多少変わってきます。プロジェクトにあったバージョンを選んでください。（最新版をDLして、既存のコードが動かなくなったはよくある話）

jQueryはプログラムのベースになるライブラリですので、一番最初に読み込む必要があります。 他のプログラム(他のjsファイル等)を読む込むときは絶対にjQueryの呼び出しコードより後に記述してください。

構文

まずjQueryの構文を記述するには下記の基本形を記述する必要があります。 これは”HTMLを読み込んでから処理を実行する”という内容を表しています。jQueryは基本HTML上に存在する要素に対してアクションを起こすものなのでHTMLを読み込んでからでないとうまく動きません。

jQueryは対応させたい要素(セレクタ)に対して、起こしたいアクション(イベント)と内容を記述します。 下記の例では”ボタンの要素”を”クリック”したら”ボタンに「クリックされました」と表示させる”という処理を記述しています。

上記の内容を素のjavascriptで記述すると

今回の例では行数はそこまで変わりませんが、セレクタの呼び出しがとても簡単になっているのがわかると思います。 このように、jQueryは煩雑なjavascriptのコードを見やすく、簡単に実装することができるのです。