【JavaScript】jQueryの基礎知識＋基本的な書き方

jQueryの基本的な理解ができていないので、基礎知識を整理したい
jQueryの書き方を知りたい。JavaScriptと混同してしまっている

この記事はそんな方へ向けて書いています。

本記事でわかること

jQueryの基本的な書き方
jQueryの実例サンプルコード

本記事を書いている私は、Webデザインの職業訓練校6ヶ月コースに通っています（2021年6月から）。
今までの学習内容は、HTML、CSS、XD、Webデザイン基礎知識、JavaScript、jQueryです。

jQueryとは、JavaScriptを書きやすくしたものです。
Web制作にあたり、避けて通れない必須知識です。

jQueryをマスターすれば、簡単な記述でWebページにいろいろな効果や動きがつけられます。

本記事では「jQueryの基礎知識＋基本的な書き方」を、復習メモとして書いていきます。
記事後半では、jQueryの実例としてサンプルコードをもとに解説しました。

※jQueryの根本はJavaScript
JavaScriptの知識がない方は、JavaScriptの基礎から始めるのが吉です。jQueryを理解するためには、根底にJavaScriptの理解が必須だからです。JavaScript基礎文法は下記にまとめています。
»【JavaScript入門】初心者向けに「基礎文法」を完全まとめ

Contents

【JavaScript】jQueryの基礎知識＋基本的な書き方
jQueryの書き方【実例サンプルコード2つ】
まとめ：jQueryのメリットとデメリット

【JavaScript】jQueryの基礎知識＋基本的な書き方

jQueryとはJavaScriptを簡単にするプログラム

JavaScriptの不便さを解消しようと2006年に誕生したJavaScriptライブラリがjQueryです。
多くのホームページやWebアプリケーション開発で使われています。

ライブラリ（Library）とは図書館で新しい知識を得るようなイメージです。
JavaScriptに新機能を追加するためのミニプログラムなのです。

簡単かつ高機能で、ほぼ標準で使われるライブラリになっています。

こういち

プログラムがグッと簡単になり、見やすくなるのがメリットですね。

jQueryを読み込む2つの方法

jQueryを使うためには、jQueryの読み込みが必要です。

2つの方法があります。

jQuery公式サイトからダウンロード
jQueryのCDNをGoogleから読み込む

jQuery公式サイトからダウンロード

「jQuery公式サイト」から「Download jQuery」のボタンをクリックします。
1番上のリンク「Download the compressed, production jQuery 3.6.0」が1番軽いjQueryのライブラリです。
「右クリック → リンク先を別名で保存」を選択して、パソコンの任意の場所に保存します。
ダウンロードしたファイルをHTMLに読み込めばOKです。

jQueryを使ったプログラムは、jQueryの読み込んだ後に書いていきます。
jQueryを読み込む前にプログラムを書いても、jQueryは使えません。

jQueryのCDNをGoogleから読み込む

ダウンロードせずにjQueryを使う方法です。
本記事では、GoogleがホストしてるjQueryをCDN（コンテンツデリバリーネットワーク）で読み込みます。

「Google jQuery」で検索して「Hosted Libraries | Google Developers」というページからCDNのコードをコピーします。
記事内の「3.x snippet」の1行（下記）をコピーして、<head>内または<body>内の最後に貼り付ければjQueryの文法が使えます。

自分のパソコンにjQueryを置く必要がなく、簡単に利用できます。

jQueryを書く3つの場所

jQueryの処理を書く場所は、次の3つです。

<head>タグ内
<body>タグ内の最後
外部ファイル（.js）

外部ファイルに書いて、読み込むことが一般的です。

なお<script>タグは、<body>の閉じタグ直前に書くのがベターと言われています。

理由は2つです。

CSSはheadタグ中に、javascriptはbodyタグの下にまとめて書くことでわかりやすい
javascriptファイルを読み込んでいる間はHTMLファイルを読み込まない。ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を早くできる

jQueryの基本構文

$（セレクタ）．メソッド（パラメーター）；

$から始まるのが特徴的な書式です。
$は「jQuery」のショートカットです。
セレクタはCSSと同じものが使えます。

jQueryのイベント処理

$（セレクタ）.on（"イベント" , 引数）{

}；

ユーザーがアクションを行ったときに、処理を実行できます。
たとえば、ボタンをクリックしたときや画面をスクロールしたとき、などです。

通常の関数：function( ){ }
アロー関数：( ) => { }

「$」記号が利用できないケースもあります。
他ライブラリーで、すでに「$」が使われている場合です。
jQueryには「noConflict」というメソッドが準備されています。
プログラムの先頭で利用することで（jQuery.noConflict〔〕;）「$」記号を利用しなくし、他ライブラリーとの衝突を避けられます。

以上が、jQueryの基礎知識＋書き方です。

参考図書

jQuery入門道場：Amazonで高評価。内容は固め
HTML&CSS、JavaScriptのきほんのきほん：jQueryだけでなくHTML、CSSの基礎も学びたい方向け

jQueryの書き方【実例サンプルコード2つ】

記事後半では、2つのサンプルコードをもとに解説していきます。

サンプルコードその1

<!DOCTYPE html>　
<html lang="ja">
<head>
　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　<title>jQueryサンプルコードその1</title>
　<style>
　　.cls01 {
　　　color: #f00;
　　}
　　.cls02 {
　　　color: #00f;
　　}
　</style>

</head>

<body>
　<h1>jQueryのサンプル（セレクタ）</h1>
　<hr />

　<h2>タグにアクセス</h2>
　<p id="msg2">IDにアクセス</p>
　<p class="msg3">Classにアクセス</p>
　<hr />

　<h2>タグを操作する</h2>
　<div id="text01"></div>
　<div id="text02"></div>
　<div id="text03">
　　<p>元々あるテキスト</p>
　</div>
　<hr />

　<h2>属性の操作、アクセス</h2>
　<a id="zokusei" data-plan="インタープラン" href=" " title="タイトル属性です">
　　ここは、リンクです
　</a>

　<h2>クラスの操作</h2>
　<dl>
　　<dt class="cls01">ここはdtタグです</dt>
　　<dd>ここはddタグです</dd>
　</dl>

メモ：<hr />

<hr />は、文中などで横線を引いて区切りをつけたい場合に使えるタグです。
単体で使用できます。

const msg2 = $('#msg2').text( );
console.log(msg2);
//コンソールへの出力結果：IDにアクセス

const msg3 = $('.msg3').text( );
console.log(msg3);
//コンソールへの出力結果：Classにアクセス

$('#text01').text('<p>文字を書いた場合は出力</p>');
//出力結果：<p>文字を書いた場合は出力</p>

$('#text02').html('<ul><li>リストを書く</li></ul>');
//出力結果：・リストを書く

$('#text03').append('<p>jsで書いた文字</p>');
//出力結果：
元々あるテキスト
jsで書いた文字

const ttl = $('#zokusei').attr('title');
console.log(ttl);
//出力結果：タイトル属性です

$('#zokusei').attr('href', 'https://interplan-school.com/');

$('#zokusei').css({
　'color': '#f00',
　'font-size': '30px',
　'text-decoration': 'none'
});
/* 赤色、文字を大きく、アンダーラインを消す */

$('dt').removeClass('cls01');

$('dd').addClass('cls02');

【解説】
jQueryをheadタグ内に書くなら以下のようにfunctionが必要です。
bodyタグ閉じ前に書くのであれば上記CSSのとおり不要です。

$(function ( ) {
　const msg2 = $('#msg2').text( );
　console.log(msg2);
});

text( )＝textメソッドはHTMLタグのテキストを取得できます（pタグやhタグの中の文字情報を取得）。
text( )だけだとデータだけを取ってきます。
text('文字を書いた場合’)は出力になります。
html( )＝htmlメソッドにするとテキストだけでなくタグも追加できます。
append( )＝appendメソッドは追記します。
htmlメソッドは差し替え、appendメソッドは追記なので注意です。
例：$('#text03').append('<p>jsで書いた文字</p>');のappendをhtmlに書き直すと「元々あるテキスト」は表示されません。

属性にアクセスするにはattrメソッドを使います。
引数が2つになると「左側に右側を入れる」になります。
cssメソッドで指定のCSSスタイルに変更できます。
例：$('#zokusei').css('color', '#0f0'); でリンクをグリーンに。

removeClassでclassを消すことができ、addClassでclassをつけられます。

こういち

jQueryのメソッドの名前で単語2つ並べるとき、2番目の単語の頭文字は大文字が多いです。

jQueryのメソッド例

メソッドは、指定したセレクタに何をするかを書きます。
メソッドに、パラメータをつけるとどんな処理をするのか指定できます。

よく使うメソッド

.text( )	HTMLタグのテキストを取得
.html( )	テキストだけでなくタグも追加（書き換え）
.append( )	HTMLの末尾に追記
.css( )	指定のCSSスタイルに変更
.attr( )	属性にアクセスする
.val( )	HTML内のvalue属性を取得したり変更したり
removeClass( )	クラス名を消せる
addClass( )	クラス名をつける

サンプルコードその2

<!DOCTYPE html>
<html lang="ja">
<head>
　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　<title>jQueryサンプルコードその2</title>
　<style type="text/css">
　　#shikaku {
　　　width: 100px;
　　　height: 100px;
　　　background: #f90;
　　}
　</style>
</head>

<body>
　<h1>jQueryのサンプル</h1>
　<h2>inputタグのvalueの値を取得</h2>
　<input type="text" id="in01" size="10" />
　<input type="button" id="btn01" value="クリック" />
　<hr />

<h2>inputタグのvalueの値を演算</h2>
　<input type="text" id="in02" size="10" /> 
　<input type="button" id="btn02" value="税込価格" />
　<hr />

<h2>inputタグで指定した
　　　　大きさのボックスを作る</h2>
　縦：<input type="text" id="inTate" size="10" /><br />
　横：<input type="text" id="inYoko" size="10" /><br />
　<input type="button" id="btnShikaku" value="四角を変形" /
　<div id="shikaku"></div>
　<hr />

　<h2>selectボックスの値を取得</h2>
　<p>何が好きですか？</p>
　<select id="select01">
　　<option value="">選んでください</option>
　　<option value="和食">和食が好き</option>
　　<option value="洋食">洋食が好き</option>
　　<option value="中華">中華が好き</option>
　</select>
　<hr />

　<h2>ドリルダウンメニューを作る</h2>
　<p>好きなお菓子は何ですか？</p
　<select id="select02"
　　<option value="">選んでください</option>
　　<option value="和菓子">和菓子</option>
　　<option value="洋菓子">洋菓子</option>
　</select>

</body>
</html>

style.css

$('#btn01').on('click', () => {
　const value1 = $('#in01').val();
　console.log(value1);
});

$('#btn02').on('click', () => {
　const value2 = $('#in02').val();
　const tax = 1.1;
　const num_value2 = parseInt(value2);
　//int = インテジャー＝数字のこと
　//NaN＝not a number

　if (!isNaN(num_value2)) { //isNan→変数num_value2がNaNだったら→!をつけることで条件が反転
　　console.log(Math.floor(num_value2 * tax));
　} else {
　　console.log('数値を入力してください');
　}
});

//hensuu == 1(1だったら）
//hensuu != 1(1じゃなかったら)

$('#btnShikaku').on('click', () => {
　const tate = parseInt($('#inTate').val());
　const yoko = parseInt($('#inYoko').val());
　// console.log(tate);
　// console.log(yoko);
　// &&両方の条件が一致すると
　// ||どちらかの条件が満たされるとき（もしくは）

　if (!isNaN(tate) && !isNaN(yoko)) {//tateがNanじゃない、yokoがNanじゃない・&&＝かつ
　　$('#shikaku').animate({
　　　width: yoko + 'px',
　　　height: tate + 'px'
　　}, 1000); //1000ミリ秒→時間をかけてアニメーションする必要がある
　} else {
　　console.log('数値を入力してください。');
　}
});

$('#select01').on('change', () => {
　console.log($('#select01').val());
});
//value属性の値が出てくる「和食」など

$('#select02').on('change', () => {
　const sweets = $('#select02').val();
　$('#select03').html(''); //よく使う考え方（いったん空にする）
　const wagashi_arr = ['どら焼き', '羊かん', '饅頭', '落雁', '蜜豆'];
　const yougashi_arr = ['ケーキ', 'モンブラン', 'クレープ', 'プリン', 'パフェ'];

　if (sweets == '和菓子') {
　　for (wagashi of wagashi_arr) {
　　$('#select03').append('<option value="' + wagashi + '">' + wagashi + '</option>')
　　}
　} else if (sweets == '洋菓子') {
　　for (yougashi of yougashi_arr) {
　　　$('#select03').append('<option value="' + yougashi + '">' + yougashi + '</option>');
　　}
　}
　//append追加する
　//選んでくださいをチェックしても出てくるから洋菓子を指
　// $('#select03').html('<option value="どら焼き">どら焼き</option><option value="羊かん">羊かん</option>');
});

[/st-mybox]