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以降、最初の構文のみが推奨されます。他の構文は引き続き機能しますが、非推奨です。

よく似たonloadについて

$（ハンドラー）※redyを意味するものがDOMが形成された後に実行するという意味ですが、
少し似たような使い方であるのがこちらです。

$(window).on('load',function(){
    alert('Hello');
});

onloadは画像、動画などの関連データの全ての読み込みが完了したら実行されます。

注意したいのが、ページ遷移時に表示するアニメーションにはonloadで入れておかないと実行されない場合があります。特にスマホは、readyにしてしまうと、うまく実行されない場合があります。(ページが表示されたときにはもう終わってるなど。）

※htmlを置き換えるものや、表示するかしないかを制御するもの ラジオボタンが選ばれていたら、表示するなどHTMLとjQueryで完結するものなどはredyで大丈夫です。

jQueryさまざまな記述方法

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

メソッドチェーンの使い方

//pタグの"myClass noClass"というクラスを削除し、"yourClass"を追加する
 $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

jQueryを使用するときは、イベントなどの動作と組み合わせて使用することが多い思います。
※イベント（スクロール、ボタンクリックなど）

デバイス幅別の処理もjQueryで可能ですが、cssでメディアクエリを使用した方がデータも軽いしコードも複雑になりすぎないと思います。

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

traversing

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

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

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

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

.add()　対象を追加する

//liとｐの背景を赤にします
$( "li" ).add( "p" ).css( "background-color", "red" );

events

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

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

以下の場合だと、.click()を使用しても良さそう。

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

※.on()を使用するメリット

まだ作成されていない子孫要素のイベントを処理する機能に加えて、委任されたイベントハンドラーの別の利点は、多くの要素を監視する必要がある場合にオーバーヘッドがはるかに低くなる可能性があることです。

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

イベント委任アプローチは、イベントハンドラーを1つの要素tbodyにのみアタッチし、イベントは1つのレベル（クリックさtrれたものからtbody）にバブルアップするだけで済みます。

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

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

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

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

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

DOMに関すること

◆DOM Insertion, Inside
https://api.jquery.com/category/manipulation/dom-insertion-inside/

.append()　要素の最後に追加

.appendTo()　一致した要素のセット内のすべての要素をターゲットの最後に挿入します。

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

上記のコードあった場合、.inner要素の最後に、testが入ったpタグを追加したい場合に、以下のように書く。

//.appendToの後に入れたい場所を指定する
$( "<p>Test</p>" ).appendTo( ".inner" );

.prepend()　要素の最初に追加

.prependTo()　一致した要素のセット内のすべての要素をターゲットの最初に挿入します。

.text()　文字の挿入

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（）　一致した要素のセットの最初の要素のスクロールバーの現在の垂直位置を取得するか、一致したすべての要素のスクロールバーの垂直位置を設定します。

$(window).on("scroll", function () {
	const window_h = $(window).height();
	const scroll_top = $(window).scrollTop();

//ifとか使用した関数をここに記述する

});

Effect

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

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

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

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

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

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

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

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

注意　※resize()について

.resize()　ブラウザウィンドウのサイズが変更されるたびに、ブラウザに応じて処理を行う

デバイス幅別にイベント発火を考えた時に、.resizeのことについて調べたのですが、下記の使用例を実行してみたらわかるように、リサイズされるたびに関数内が実行されます。

かなり無駄です・・・・・ブラウザにも負担・・・

一度だけ関数を実行するという方法もあるようですが、実務においてそんなにうまくできるようなものでもありませんでした。

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

デバイス別に要素を追加して…と考えていたのすが、コードが長くなる上に処理が複雑だったため使用することを辞めました。

JavaScriptや他の言語も同じですが、コードは『見やすい！』『綺麗！』『なるべくまとめる！』が重要とされています。

なのでCSSの方が簡潔に書けるのであれば、あえてjQueryも使用しなくても良いのではないかなと思います。

念のため実践的な使用例も載せておきますが、これもあえてjQueryでやる必要もなさそうです‥‥泣

$(window).resize(function(){
	//pc
	if (window.matchMedia('(min-width: 768px)').matches){
	  $('h1').css('color','red');
	  $('.output2').removeClass('add');
	  //タブレット
	} else if (window.matchMedia('(min-width:640px)').matches){
	  $('h1').css('color','green')
	  $('.output2').addClass('add');
	} //スマホ
	else {
	  $('h1').css('color','black');
	}
  });

window.matchMedia
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia