１．概要
（１）jQueryとは
jQueryはjavacsriptのライブラリで、ブラウザ間の仕様の差異を吸収してくれる。
jQueryには1.x系、2.x系、3.x系（2016年-）の仕様がある。
1.x系：Internet Explorer 8以前をサポート
2.x系：1.xに対して軽量化（Internet Explorer 9以降をサポート）
3.x系：2.xに対して再設計し処理の呼出しなどが異なる。
.minは軽量化したファイル、.slimは一部の機能をカットした軽量版
また、minityされたファイルが提供されている。jQueryのダウンロードファイルにuncompressed（非圧縮）とcompressed（圧縮）があり、compressed（圧縮）の方がファイルサイズが小さいが、エラーの内容も小さくなりわかりにくいため、開発時はuncompressed（非圧縮）を使い、リリース時はcompressed（圧縮）を使うことも可能。
また、source map を使うことで、compressed（圧縮）を使いながら、uncompressed（非圧縮）のエラー表示紐ずけすることも可能。
（２）jQueryのダウンロード
https://jquery.com/
（３）jQueryを使うための準備
jQueryを使うためにはページにjQueryを読み込む必要がある。
jQueryをダウンロードしてオフラインで読み込む方法と、ダウンロードせずにオンラインで読み込む方法がある。
また、jQueryのバージョンアップに伴い廃止された機能について、「jQuery migrate plugin」を使うことで、機能を復活させることができる。
①ダウンロードして読み込む場合
jQueryを読み込ませたいHTMLファイルを作り、同じフォルダにダウンロードしたjquery-...min.jsを置く。
HTMLの<head>内に
<script src=”jquery-*.**.*.min.js”></script>
を記述する。
②オンラインでCDNを使って読み込む場合
オフラインで使えるjQueryのCDN（コンテンツデリバリーネットワークの略）には、jQueryのCDNなどがあり、下記を記述する。
//jQueryのCDN
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”>
</script>
２．jQueryの記述
（１）基本構文
$(‘セレクタ’).メソッド
$()はHTMLの要素をオブジェクト化してjQueryのもっている機能を使えるようにする。
（２）$(function(){・・・});
HTMLは先頭から読み込まれて順に実行されるため、セレクタの宣言前にscript文を記述すると、そのscript文は実行されない。$(function(){・・・})の{}内にscript文を記述することで、ページ全体を読み込んでからscript文を実行することができる。
$(function(){・・・})は、$(document).ready.function(){・・・})の略。
３．セレクタ
（１）IDセレクタ
<script>
$(‘#名前’)
</script>
<要素名 id=”名前”>・・・</要素名>
（２）クラスセレクタ
<script>
$(‘#名前’)
</script>
<要素名 class=”名前”>・・・</要素名>
複数の要素をまとめて扱える
（３）タイプセレクタ
<script>
$(‘div’)
</script>
<要素名>・・・</要素名>
全てのdiv要素をまとめて扱えるが単独で使用する場面は少なく、子孫セレクタなど、他のセレクタと合わせて使用する。
（４）セレクタの中からセレクタを探す
セレクタをオブジェクト化して、findメソッドでセレクタを探して、オブジェクト化する。
var 変数=$(‘セレクタ’);
変数.find(‘セレクタ’);
４．メソッド
（１）css
スタイルの変更を行う
jQueryObject.css(‘プロパティ名’,’値’);
（２）show/hide
要素の表示・非表示を変更する
jQueryObject.show();
jQueryObject.hide();
（３）width/height
要素の幅・高さを指定する
jQueryObject.width(幅);
jQueryObject.higth(高さ);
（４)fadeIn/fadeOut
フェードインアニメーションとフェードアウトアニメーションを行う
（５）slidedown/slideUp
スライドアニメーションを行う
（６）animate
animate(プロパティ名,値)
カスタムアニメーションを行うためのメソッド
（７）text/html
要素の内容を書き換える
（８）empty
要素の中身を空っぽにする
（９）attr
要素の属性値を変更する
attr(‘属性名’,変更後の値)
（１０）val
値を変更する
jQueryObject.val(‘変更後の値’);
（１１）addClass/removeClass
要素のclass属性値を操作するためのメソッドで、addClassはクラスを追加、removeClassはクラスを削除する
（１２）append/appendTo
要素を動かすためのメソッド
（１３）remove
要素を丸ごと削除するメソッド
（１４）click
要素をクリックしたときに発生
jQueryObject.click(イベントハンドラ);
（１５）mouseenter/mouseleave
mouseenterはマウスがのったとき、mouseleaveはマウスがおりたときに発生
jQueryObject.mouseenter(イベントハンドラ);
jQueryObject.mouseleave(イベントハンドラ);
（１６）hover
mouseenterとmouseleaveの両方を設定できる
jQueryObject.hover(mouseenterのイベントハンドラ
,mouseleaveのイベントハンドラ);
（１７）focus/blue
フォーカスが当たったとき、外れたときに起こるイベント
jQueryObject.focus(イベントハンドラ);
jQueryObject.blue(イベントハンドラ);
（１８）each
jQueryObject.each(function(){・・・});
jQueryObjectに対して{}内の処理を行う
５．$()によるオブジェクト化
（１）$(‘セレクタ’)
セレクタをオブジェクト化して、メソッドが使えるようにする
（２）$(function(){})
ページ読み込み完了時に実行されるコードを予約する
（３）$(DOM要素)
$(this)のthisは変数で、DOM要素が入る
<div id=div1>・・・</div>
<script>
var div=document.getElementById(‘div1’)
<script>
ここで、document.getElementById(‘div1’)は要素を取得し、div1というid属性値が付けられたdiv要素であり、jQurryの$(‘セレクタ’)と同じ働きをする。この要素をDOM要素という。
（参考書籍）
「WebデザイナーのためのjQuery入門」技術評論社
The end