jQueryの使い方

jQueryとは

jQueryはJavaScriptのライブラリの一種です。
jQueryを使用することで簡単にJavaScriptを記述できるようになります。

jQueryはhtmlの要素をクリックやスクロール、ホバーなどの操作によって動かしたり、隠したりなど、様々な効果を与えることができます。

jQueryの使い方

ここではjQueryをCDNという方法でjQueryを読み込んでみます。
下記のコードを</body>タグの上の行に記載することでjQueryを読み込むことができます。

// バージョン 3.5.1の場合
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

・
・
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="js/script.js"> // jsは別ファイルに記載する 必ずjQueryを読み込んだ行の下で読み込む
</body>

jQueryの記述方法

それでは早速jQueryを使ってみましょう。
jQueryを使うには基本的に以下のように記述します。

$("セレクタ").メソッド("パラメータ[引数]");

セレクタに対象となる要素を指定し、メソッドでどのような効果を与えるのかを指定します。
メソッドの一覧：https://javascript.programmer-reference.com/jquery-list-method/

また、セレクタを指定する方法は主に以下のように記述します。

// pタグを指定
$('p')

// idがtestのものを指定
$('#test')

// classがtestのものを指定
$('.test')

// 階層構造（pタグの中のspanを指定）
$('p > span')

jQueryでスタイルを変更してみる

例えばpタグに対してcssのメソッドを使用してスタイルをつけてみましょう。

以下のようにjsファイルに記述することでhtmlのpタグにスタイルを付与することができます。

$(function () {
  $('p').css('color', 'red');
});