jQuery基本　まとめ

この記事は、jQueryをまだ使用したことがない方。jQueryを使用したことがあるが何かよく分かっていない方。これまでググって人のコードをコピペして何とかやり抜いて来た方。
でも何とか理解したい！そういう方向けの記事です。

jQuery使用方法

「jQuery」とは、JavaScriptのライブラリ（よく使う機能をパーツ化したもの）の1つです。

簡単に言うと、「JavaScriptをとても簡単に書けるようにしたもの

なのでJavaScriptに理解ある方は簡単に使用できてしまうものです！

JavaScriptのライブラリはそのまま使用することはできません。
jqueryファイルに接続する方法が以下の2つの方法です。

①jqueryをファイルでダウンロード

jQuery 公式
https://jquery.com/download/

上記のリンク先でファイルをダウンロードします。

Download the compressed, production jQuery〇.〇.〇
※〇の中にはバージョン名

altキーを押してファイルをダウンロード

jquery-バージョン.min.js
※minは圧縮されているという意味です。

ページの最後である</body>の直前で読み込むことで、コンテンツをすべて読み込んでからjQueryを読み込むため、ページの表示速度が速くなります。

※jQuery処理を記述するファイルが存在する場合は、jQueryファイルの後に記述してください。

CDNで提供されている本体ファイルを利用する方法

cdnとは…

「CDN」はContent Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。特にjQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がありません。
CDNには高負荷に耐えられるような機能が備わっていて、大量のアクセスが集中してもダウンすることがありません。

利用できるcdn
https://code.jquery.com/

<script src="https://code.jquery.com/jquery-3.6.0.js"  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

//圧縮された
<script src="https://code.jquery.com/jquery-3.6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

「src属性」にCDN経由で配信されているURLを記述するだけです。

数字部分はバージョンです。
ご自身で使用するときは、公式サイトのバージョンを都度確認しながら利用してください。

上記のようにそのまま使用しても利用できますが、ブラウザが用意したcdnを利用することも可能です。googleの他にはMicrosoftもあります。

Google Hosted Libraries
https://developers.google.com/speed/libraries/

//3.xスニペット：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

//2.xスニペット：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

//1.xスニペット：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

cdnを使用するメリット

・ファイルのダウンロード・アップロードの手間が不要
・URLをscriptタグに記述するだけなので手軽に利用できる
・ページの高速表示が可能になる（ブラウザにキャッシュされるWebサイトを置いているサーバーには負荷が掛からない）

cdnを使用するデメリット

・SSLの対応状況によっては利用できない場合がある
・配信が停止されると当然ながら利用できない

SSL対応については、例えば時分のWebサイトが「https://」から始まる場合にCDNのURLもhttps://からでなければ読み込まれません。ただ、ほとんどのCDNはSSL対応しているので問題にはならないでしょう。

jQueryの基本の記述方法

$('#box').html('jQueryで書き換えました');

jquery('#box').html('jQueryで書き換えました');

$もjqueryも意味は同じです。通常であればコードの少ない＄を使用します。
※Wordpressの場合は、本体にjQueryがついています。それを利用する場合は、バッティングを防ぐために＄ではなくjqueryに書き換えて利用する場合があります。

jQueryの公式ドキュメントより抜粋
$(document).ready(…)という書き方は、もう推奨されていません。

jQueryは、DOMの準備ができたときに実行される関数をアタッチするいくつかの方法を提供します。次の構文はすべて同等です。

$（ハンドラー）

//非推奨
$（ドキュメント）.ready（ハンドラー）
$（ "ドキュメント"）.ready（ハンドラー）
$（ "img"）。ready（ハンドラー）
$（）。ready（ハンドラー）

jQuery 3.0以降、最初の構文のみが推奨されます。他の構文は引き続き機能しますが、非推奨です。

jQueryさまざまな記述方法

jQueryの公式サイトにありますように、記述するコードがすでに用意されており、jqueryはメソッドチェーンが可能なのです。
コードを繋いでいくだけで利用できるように開発されています。

よく使用するコードを以下にまとめました。

traversing

◆traversing
https://api.jquery.com/category/traversing/

.filter()　セレクターに一致する要素を減らす

.each()　jQueryオブジェクトを反復処理し、一致した要素ごとに関数を実行します。

.offset()　ドキュメントを基準にして、一致した要素のセット内の最初の要素の現在の座標を取得するか、すべての要素の座標を設定します。
※HTML要素の位置取得は「.offset().top」

events

◆events
https://api.jquery.com/category/events/

.on() 　選択した要素に、1つ以上のイベントのイベントハンドラー関数をアタッチします。

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

.scroll()　イベントハンドラーを「スクロール」JavaScriptイベントにバインドするか、要素でそのイベントをトリガーします。

$(window).scroll(function() {
    // windowがスクロールされた時に実行する処理
});

$("div").scroll(function() {
    // div要素内でスクロールされた時に実行する処理
});

.click()　イベントハンドラーを「クリック」JavaScriptイベントにバインドするか、要素でそのイベントをトリガーします。

$( "div" ).click(function() {
  // div要素がクリックされた時に実行する処理
});

Style Properties

◆Style Properties
https://api.jquery.com/category/manipulation/style-properties/

.css()　cssの記述を()内で可能

.css('opacity', '0')

//複数使用の場合
.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })
.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })

.height() 　高さ取得　　一致した要素のセットの最初の要素について現在計算されている高さを取得するか、一致したすべての要素の高さを設定します。

.scrollTop（）　一致した要素のセットの最初の要素のスクロールバーの現在の垂直位置を取得するか、一致したすべての要素のスクロールバーの垂直位置を設定します。

Effect

◆Effect
https://api.jquery.com/category/effects/

.animate()　CSSプロパティのセットのカスタムアニメーションを実行します。

.fadeIn()　一致した要素を不透明にフェードして表示します。()内は所要時間

.fadeOut()　一致した要素を透明にフェードして非表示にします。()内は所要時間
　.fadeOut(1000)　1000ミリ秒
　.fadeOut(500)　500ミリ秒

.fadeToggle()　不透明度をアニメーション化して、一致した要素を表示または非表示にします。

.slideDown()　一致した要素をスライドモーションで表示します。()内は所要時間

.slideUp()　一致した要素をスライドモーションで表示します。()内は所要時間

.slideToggle()　スライドモーションで一致した要素を表示または非表示にします。クリックすると表示や非表示にするという例で使用されることが多い。