jQueryの準備
①HTMLファイルのheadタグに下記を書き、jQueryを読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
②bodyタグの一番下に下記を記載する
<script src="ファイルのURL"></script>
基本的な書き方
$(function(){
//この中にjQueryを書く
＄（”セレクタ名”）.メソッド名（）;
});
イベントの書き方
$(function(){
$(“セレクタ名”）.イベント名(function() {
//イベント発生時に実行したい処理
})
});
this構文の使い方
thisは選択した要素のみにイベントを発生させることができる。
セレクタを選択しクリックイベントを発生させ、そのセレクタの中で選択されたセレクタのみ処理を実行する
※thisは””で囲わないので注意
$(“セレクタ”).イベント名(function(){
$(this).メソッド名（）;
})
変数にセレクタを入れて使う
何度も同じjQueryのオブジェクト（セレクタ）を使用する場合は変数に入れる
変数はletを使う
let $div = $(“div); ※シンプルに$(“div”)を変数divに代入している
メソッドチェーン
メソッドチェーンとは同じjQueryオブジェクト（セレクタ）に複数のメソッドを使いたいときに.（ドット）で繋ぐ
書き方
$(“div”).メソッド名（””).メソッド名(“”)
子孫要素と子要素を取得する
①find()メソッド 全ての子孫要素の中から指定したセレクタを持つ要素を取得したい時に使う
②children()メソッド 指定したセレクタが持つ子要素（１階層だけ下）の中から指定したセレクタに合致した要素を取得したい時に用いる
①find()メソッド
$(“#wrapper”).find(“a”).css(“color”,”red”) ※セレクタはダブルクウォーテーションで囲む
②children()メソッド
$(“#wrapper”).children(“a”).css(“color”,”red”)
hoverイベント
マウスを乗せた時に処理を行う。
マウスを乗せた時の処理と外した時の処理を２つ書く
書き方の注意
$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);とかく。
clickイベントと違い、引数を2つ書くことに注意しましょう。
hoverを使うときにaddClassとremoveClassを使う時の流れは以下
jQuery hover addClass removeClassの使い方
モーダルを作成する流れは以下
アコーディオンを作成する流れは以下