「jQuery」を使うための準備と使い方について

2021-07-12

「jQuery」を使うための準備と使い方について記載していきます。

「準備運動をする女の子」

jQueryを使用するとHTMLで作られたページに動きを付けることができますが、使うためにはまずHTMLファイルにjQueryを読み込ませる必要があります。

jQueryを読み込ませる方法

</body>の直前に、下記を記載することで、ページ内でjQueryを使用することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

上記はgoogleによるCDNの読み込み方法となります。

jQueryの公式サイトからファイルをダウンロードして格納して呼び出す方法もありますが、CDNで読み込ませたほうが1行記述するだけで事が済むため、一般的にはこちらの方法が使われています。

また「3.4.1」の部分がバージョンです。

現在（2020/1/8時点）では上記のバージョンが最新のものですが、機能の追加や修正などでバージョンは随時更新されていきます。

最新バージョンについては、こちらより確認が可能です。

使い方について

HTMLファイルに直接jQueryのコードを書いていく方法と、別途jQuery記述用のjsファイルを用意してHTMLファイルに読み込ませる方法があります。

HTMLファイルに直接jQueryのコードを書いていく方法 について

一般的に1ページ内でのみjQueryが使われる場合にこちらの方法が選択されます。

記述した読み込みコードと</body>の間に記述していきます。

<script>
$(function(){
//ここにコードを記述していく
});
</script>

jQuery記述用のjsファイルを用意してHTMLファイルに読み込ませる方法について

複数のページで同じjQueryを使った処理を行う際に、こちらの方法が選択されます。

まず記述用のjsファイルを用意します（ここでは仮に 「script.js」と名前を付けます）。

「script.js」には、下記の記述を行います。

$(function(){
//ここにコードを記述していく
});

「script.js」内では<script>タグは必要ありません。

そしてHTMLのファイルに下記のように「script.js」を読み込ませる記述をします。

<script src="script.js"></script>

<script>タグのsrc属性で「script.js」のパス指定を行っいます。

上記はHTMLファイルと同じ階層に「script.js」が存在している場合の記述です。

HTMLファイルと同じディレクトリに「js」フォルダがあり、その中に「script.js」が存在している場合には

<script src="js/script.js"></script>

という記述になります。

<script>タグの中身は空でOKです。

これで準備は完了です。

以上となります。

Web制作,jQuery