田中のホームページ

jQueryについて

日付 : 2023/11/26

作成者 : 田中遥貴

はじめに

みなさんは、jQueryを知っているだろうか。私は、ゼミで聞くまで知らなかった。jQueryは、JavaScriptのライブラリである。これを使用するとJavaScriptのコードを容易に記述できる。私は、前にjQueryを触ったのだが、使い方を忘れてしまった。そのため、jQueryの基本を思い出そうと思う。そして、また忘れたときのためにブログに残すことにする。

今回は[1]を参考に書いていく。


読み込み

まず最初にjQueryを読み込む必要がある。読み込む方法は2つで、CDNを使う方法とファイルをダウンロードする方法がある。

CDNはContents Delivery Networkの略で、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである[2]。jQueryのCDNは、[3]で確認できる[画像1]。このページにある使いたいバージョンの右側にあるいずれかをクリックするとコードが表示される。そのコードをコピペすることで読み込みできる。おすすめは、iQuery Core 3.7.1のminifiedである。

画像1

画像1、 [3]

ファイルのダウンロードは、[4]のページから使いたいものをダウンロードする[画像2]。おすすめは、Download the compressed, production jQuery 3.7.1である。

画像2

画像2、 [4]

ダウンロードしたら、以下のコードをHTMLに記述する。
<script src="ファイルのパス/jquery-3.7.1.min.js"></script>


基本構文

jQueryの読み込みが完了したら次はjQueryの基本構文について書いていく。

まずjsファイルを用意する。そして、先ほどのjQueryの読み込みコードの下に以下のコードを記述する。HTMLのscriptタグの中に記述してもいいが、私はjsファイルに書くようにしている。理由は分かりやすいからである。
<script src="ファイルのパス/ファイル名.js></script>

今回のブログで私が書いたjsファイルを載せておく。 ダウンロード

jQueryの基本構文は、 $('セレクタ').メソッド('パラメータ[引数]'); である。セレクタには、操作対象となるHTMLやCSSの要素を入れる。メソッドには、処理内容を入れる。パラメータには、細かな処理を入れる。
例えば、以下の四角で囲んでいるようなものがあったとする。
あいうえお
これのHTMLはspanタグで「あいうえお」を囲い、cssは、 border: 2px solid #333; と記述している。これの線の色を赤に変えるとする。
jQueryで $('#text2').css('border-color', '#ff0000'); と記述すると、赤色に変わる。#text2はidで、2つの「あいうえお」を区別するためにつけた。
あいうえお
今回は、cssを変更したかったため、メソッドはcss()を使った。次は他にどんなメソッドがあるかを書いていく。

まずは、click()がある。これは、ある要素がクリックされたときに発動する処理を書くときに使う。次は、hover()がある。これは、マウスがhoverしたときに発動する処理を書くときに使う。hoverとは、マウスポインターがある特定の要素上に停止している状態のことである。
click()を使ってみる。以下のボタンを押してみてほしい。

上の2つの「あいうえお」の文字の色が変わったことを確認できただろうか。これは[画像3]のように記述した。このような処理を行いたいときにclick()を使う。

画像3

画像3


簡単なプログラム

基本構文は分かった。次は、簡単なプログラムを書いてみる。
今回は、以下の入力欄に半角数字を入れて送信を押したら、入力された数字に5が足されて返ってくるというプログラムを書いた。

これは、[画像4]のように記述した。

画像4

画像4


さいごに

jQueryについて書いてきた。忘れていた基本の構文を思い出すことができた。今回は、基礎的な内容になったが、これから勉強しなおして、さまざまなプログラムを書きたいと思う。


参考文献

  1. 【初心者向け】jQueryとは|メリット・デメリットから記述方法まで解説
  2. コンテンツデリバリネットワーク
  3. jQuery CDN
  4. jQuery Download