jQueryの使い方について
jQueryの使い方について解説します
jQueryとは？
jQueryとは、簡単な記述でWebページにさまざまな効果や動きを付けられるJavaScriptライブラリーです。
具体的には、Webページ右上や左上にある「三」のような形のボタン(ハンバーガーボタンなどと呼ばれるものですが)をタップするとメニューが開いたりする動きの実装、複数の画像がスライドして切り替わる動きなど、の実装がとても簡単に可能になります。
この記事では、jQueryのダウンロードから簡単な記述を紹介します。
jQueryをダウンロードする
jQueryをダウンロードしましょう。こちらをクリックしてください。
「Download the compressed, production jQuery 3.5.1」というリンクがありますので、こちらからダウンロードすることができます。
ここで注意することがあります。
通常ではクリックするとDLが始まりますが、〇で囲った部分をクリックしても何やら大量の文字列が画面に表示されるだけでDLは始まりません。
DLする際は、リンクの上で右クリックし、「名前をつけてリンク先を保存」を選択しましょう。
jQuery用のフォルダを作成する
CSSは別フォルダに格納し、<link href=”○○”>というふうに、htmlファイルに関連付けて利用しますが、jQueryでも同じ理屈で、jQueryを別フォルダに格納し、<script src=”○○”>で関連付けます。
CSSを格納している階層に新たにjQuery用のフォルダを作成しましょう。
ここでは仮にファイル名を「js」とします。
jQuery用のフォルダが作成できましたら、先ほどDLした「jQuery-3.5.0.min.js」ファイルを保存しましょう。
HTMLと関連付ける
先ほども記載した通り、jQueryはHTMLファイルと紐づけて使用します。
<head>内に「<script src=”js/jquery-3.3.1.min.js”></script>」と追記しましょう。
<script>タグの閉じタグを忘れないようにしましょう。
jQueryの記述場所
jQueryの処理を書く場所は3箇所あります。
- headタグ内
- </body>のタグの直前
- CSSのように外部ファイル
実務上では外部ファイルに記述することが一般的でしょう。
エディターでjsファイルを作成し、名称を「test.js」とし、jsフォルダに保存しましょう。
先ほど記述した「<script src=”js/jquery-3.3.1.min.js”></script>」の下に
「<script src=”js/test.js”></script>」と追記しましょう。
実際にjQueryを書いてみる
先ほど作成したtest.jsファイルに
$(document).ready(function(){
});このように記述してみましょう。閉じカッコの位置など間違えないようにしましょう。
jQueryでは真ん中の空白の行に処理を記述していきます。
何か書いてみましょう。今回はクリックしたことによって画像が変更される処理を書いてみます。
お好みの画像を2つ用意してください。
今回は仮に画像ファイル名をimg01とimg02とします。
用意できましたらhtmlファイルに
<button>画像を変更</button> <p><img src=”img/img01.jpg” alt=画像1”></p>
と記述してください。
次にjsファイルに
$(document).ready(function(){
$(“button”).click(function(){
$(“img”).attr(“src”,”img02.jpg.”).attr(“alt”,”画像2”);
});
});このように記述してください。
htmlファイルを実行し、画像を変更ボタンをクリックすると、画像1から画像2に変更されます。
先ほどの記述は、button要素がクリックされたら、img要素のsrc属性を書き換えるスクリプトです。
attr()は「,(カンマ)」で区切った属性値を変更する命令です。
jQueryでは、どのタイミングで、何を変更するかを記述するということを覚えておきましょう。
プラグインの活用
jQueryでは、誰かが予め記述してくれたjsファイルを利用することができます。
Googleで「実装したい技術＋jQuery+プラグイン」で検索すると沢山出てきますので、ご自分の使いやすいプラグインを探しましょう。
ファイルをダウンロードしたら、jsフォルダに保存し、head内に<script src=”ファイルのパス”></script>と追記しましょう。
以降の記述はプラグイン提供元の指示に従い記述してください。
最後に
今回紹介した内容は、jQueryの初歩中の初歩です。
この記事では補足しきれないので、オススメの書籍を紹介して記事の締めとさせていただきます。
jQueryの入門ではjQueryデザイン入門 改訂新版という本がよく使われております。
通称ドーナツ本と呼ばれる、jQueryの学習にあたり非常に知名度の高い本です。
こういった書籍を手に取り、jQueryの記述を学習してみましょう。
