第3章応用・JavaScript関連技術

jQueryの使い方

2018年11月2日

jQueryの概要

jQueryは人気のライブラリで、様々なプラグインが用意されています。プラグインを使えばプログラムをマスターしてなくてもスライダーやパララックスなどを簡単に実装できます。jQueryの基本的な使い方をおさえておきましょう。

jQueryはDOMを簡単に操作するための手段の提供と、イベントやアニメーション、Ajaxといった幅広い機能を備えたJavaScriptのライブラリです。元々は簡単にクロスブラウザ対応のスクリプトを記述できるということで人気を集めていました。MITライセンスのもと、無料で提供されています。

主な特徴

クロスブラウザに対応
DOMの操作と変更
プラグインによる拡張
Ajax対応
無料で利用可能

ダウンロード

jQueryは公式サイトのdownloadページからダウンロードできます。jQueryのダウンロードページには、圧縮してファイルの容量を小さくしたファイルと、圧縮していないファイルが用意されています。圧縮したファイルはcompressed、圧縮していないファイルはuncompressedと表記分けされているので、特別な理由がない限り圧縮ファイルをダウンロードしてください。

jQuery公式サイト

jQueryのファイル名は下記のようなルールで命名されています。圧縮されたjQueryファイルには.minがバージョン番号の後に付きます。

jquery-バージョン番号.min.js

jQueryを利用するには、jQueryファイルのダウンロード後、それを必要な作業ディレクトリにコピーしてください。あとはjQueryファイルをSCRIPTタグで読み込みます。

<script src="js/jquery.min.js"></script">

CDN

CDN（Content Delivery Network）は、高速にコンテンツを配信するための仕組みです。jQueryはGoogleやCDNJS、jsDeliverといったいくつかのCDNから配信されているので、jQueryファイルをダウンロードする代わりにCDNを利用することもできます。CDNで配信されているjQueryは、SCRIPTタグにそれらのURLを指定するだけで利用できます。

使い方はダウンロードの場合と同じで、SCRIPTタグで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

セレクタを使った要素の取得

jQueryはHTMLの要素に短いコードで簡単にアクセスすることができます。使い方は、下記のようにCSSセレクタを使って要素を指定します。指定した要素は、ドット記法でつなげたメソッドで利用できます。

構文：

jQuery( "セレクタ" ).メソッド( 引数 );

jQueryオブジェクトはダラー（ $ ）を使って省略することができます。

構文：

$( "セレクタ" ).メソッド( 引数 );

次のコードは、取得した要素を対象に、fedeOut()メソッドを使ってフェードアウトアニメーションを行います。ここではセレクタにidを指定して要素を取得しています。

CodePen: https://codepen.io/zionboogie/pen/geOzKm

See the Pen 【06-01-01】jQueryを使ってフェードアウト by jun (@zionboogie) on CodePen.

HTML

<div id="box" class="box"></div>

CSS

#box{
	height: 10rem;
	width: 10rem;
}

JavaScript

$("#box").fadeOut( 5000 );

読み込み後を待機

jQueryに用意されたメソッドのいくつかは、DOMが操作可能になってから処理を実行する必要があります。JavaScriptでイベントリスナーを用意することもできますが、jQueryにも、同様の待機が可能なready()メソッドが用意されています。ready()メソッドを使う際、セレクタにはdocumentを指定します。このメソッドはaddEventListener()メソッドにDOMContentLoadedを指定したのと同じで、画像やスタイルシートなどの関連ファイルの読み込みを待たず、HTMLの解析が終わると実行を開始します。

$( document ).ready( function(){
	...
} );

ready()メソッドは省略可能で、次のように書くこともできます。

$( function () {
	...
} );

画像の読み込みを待ちたい場合、jQueryのon()メソッドを使って次のように書くことができます。

$( window ).on( "load", function(){
	...
});

セレクタ

jQueryに用意されているセレクタの抜粋を一覧にしました。このセレクタを使って要素を選択します。

基本のセレクタ

書式	指定対象
$( "要素" )	要素
$( "#ID名" )	id属性をもつ要素
$( ".クラス名" )	class属性をもつ要素
$( "A, B" )	要素Aと要素B
$( "*" )	全てのセレクタ

階層セレクタ

書式	指定対象
$( "親要素子要素" )	親要素内にある子要素
$( "親要素 > 子要素" )	親要素の直下にある子要素
$( "要素A + 要素B" )	要素Aの次にある要素B
$( "要素A ~ 要素" )	要素Aの後にある要素

フィルターセレクタ

書式	指定対象
$( "要素:first" )	先頭の要素
$( "要素:last" )	末尾の要素
$( "要素:not( セレクタ )" )	指定したセレクタを除外した要素
$( "要素:even" )	偶数番目の要素
$( "要素:odd" )	奇数番目の要素
$( "要素:eq( インデックス )" )	インデックス指定した要素（インデックスは0から始まる）
$( "要素:lt( インデックス )" )	指定したインデックスより前の要素
$( "要素:gt( インデックス )" )	指定したインデックスより後の要素
$( ":header" )	h1、h2などのh要素
$( ":animated" )	アニメーション中の要素
$( ":hidden" )	非表示の要素とhidden属性のinpout要素
$( ":visible" )	表示されている要素
$( "親要素 > 子要素:first-child" )	親要素直下の最初の子要素
$( "親要素 > 子要素:last-child" )	親要素直下の最後の子要素
$( "要素:only-child" )	特定の要素が1つだけ含まれている要素
$( "要素:contains(テキスト)" )	テキストに指定した文字列を含む要素
$( "要素::has(セレクタ)" )	指定したセレクタを含む要素
$( "要素:empty" )	空要素
$( "要素:parent" )	子要素やテキストを含む要素

属性フィルタ

書式	指定対象
$( "要素[attribute]" )	指定した属性を持つ要素
$( "要素[attribute=value]" )	指定した属性値を持つ要素
$( "要素[attribute!=value]" )	指定した属性値を持たない要素
$( "要素[attribute^=value]" )	属性値が指定した文字列から始まる要素
$( "要素[attribute$=value]" )	属性値が指定した文字列で終わる要素
$( "要素[attribute*=value]" )	属性値が指定した文字列を含む要素
$( "要素[selector1][selector2]..." )	指定した属性フィルタ全てを満たす要素

子要素を取得

様々なセレクタを使って要素を取得します。

CodePen: https://codepen.io/zionboogie/pen/BrabRX

HTML

<ul>
	<li> 1 </li>
	<li> 2 </li>
	<li class="li-center"> 3 </li>
	<li> 4 </li>
	<li> 5 </li>
</ul>

JavaScript

// 先頭の要素
console.log( "先頭の要素：" + $("ul > li:first" ).text() );

// 末尾の要素
console.log( "末尾の要素：" + $("ul > li:last").text() );

// 偶数番目の要素
console.log( "偶数番目の要素：" + $("ul > li:even").text() );

// 奇数番目の要素
console.log( "奇数番目の要素：" + $("ul > li:odd").text() );

// インデックス指定した要素（インデックスは0から始まる）
console.log( "インデックス指定した要素：" + $("ul > li:eq(2)").text() );

// 指定したインデックスより前の要素
console.log( "指定したインデックスより前の要素：" + $("ul > li:lt(2)").text() );

// 指定したインデックスより後の要素
console.log( "指定したインデックスより後の要素：" + $("ul > li:gt(2)").text() );

// 指定したセレクタを除外した要素
console.log( "指定したセレクタを除外した要素：" + $("li:not(.li-center)").text() );

出力結果

先頭の要素： 1 
末尾の要素： 5 
偶数番目の要素： 1  3  5 
奇数番目の要素： 2  4 
インデックス指定した要素： 3 
指定したインデックスより前の要素： 1  2 
指定したインデックスより後の要素： 4  5 
指定したセレクタを除外した要素： 1  2  4  5

イベント処理

JavaScriptにはonClick、onLoad、onSubmitなど特定のイベントが発生した時に処理を実行させるイベントハンドラが多数用意されていますが、jQueryはon()メソッド一つでそれらのイベントを処理することができます。

構文：

$(セレクタ).on( イベント名, コールバック関数 );

イベント名にはclick（要素をクリックした時）、dblclick（要素をダブルクリックした時）、select（テキストボックス/テキストエリアのテキストを選択したとき）、mousedown（マウスのボタンを押した時）、mouseup（マウスのボタンを離したとき）、keydown（キーをおした時）、keyup（キーを離したとき）など様々なイベントを指定できます。

$( ".btn" ).on( "click", function() {
	// ここに実行したい処理を書きます
} );

イベントは次のように複数指定すると、指定したどのイベントが発生しても実行します。

$( ".btn" ).on( "click keydown", function() {
	// ここに実行したい処理を書きます
} );

.on()メソッドの第一引数をオブジェクトにすることで、イベントハンドラ毎に別々の処理を設定することもできます。オブジェクトには、キーにイベント名、キーにコールバック関数を指定します。例えば、イベントのmouseenterとmouseleaveで別々の処理をする際は次のように書きます。

$( ".btn" ).on( {
	"mouseenter" : function() {
		// ここに実行したい処理を書きます
	},
	"mouseleave" : function() {
		// ここに実行したい処理を書きます
	}
} );

アニメーション

jQueryでCSSと同じアニメーション効果を行えます。CSSと違って、様々なタイミングで実行でき、さらにコールバック関数も指定できます。

構文：

$( セレクタ ).animate( { "プロパティ" : "値" }, 遅延, イージング, コールバック関数 );

引数のプロパティと値には、変化させたいCSSの名前と値を指定します。たとえばフェードアウトさせたいときは、プロパティ名にopacity、値に0を指定します。遅延には、実行のタイミングをどれだけ遅らせるかの値を指定できます。第3引数にはイージングを指定します。イージングとは、アニメーションの種類です。最初は遅くて後から速くなるアニメーション、跳ねるようなアニメーション、物が落ちるようなアニメーションなど、様々なイージングの種類があります。コールバック関数はアニメーション処理が終わった後に実行させたい関数を指定します。

メソッドチェーン

jQueryのメソッドは、ほとんどがメソッドチェーンに対応しています。

$( ".btn" ).css( "background-color", "#000" ).text( "送信済み" );

すべてのメソッドが連結できるわけではありません。返却値としてjQueryオブジェクトを返すものだけが繋ぐことができます。制限としては、返却値としてjQueryオブジェクトを返すメソッドだけがつなげられます。連結したいと思うメソッドのほとんどは、メソッドチェーンで使えるようにjQueryオブジェクトを返します。
次のコードは、「メニュー」と書かれたバーをクリックすると、リストが表示されたり、非表示になったり切り替わります。

CodePen: https://codepen.io/zionboogie/pen/RMPbYZ

See the Pen 【06-01-03】メニューを開く by jun (@zionboogie) on CodePen.

HTML

<div class="btn">メニュー</div>
<ul class="list">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

CSS

.btn{
	width: 15rem;
	padding: 1rem;
	color: #fff;
	background-color: #000;
}
.list{
	width: 15rem;
	padding: 1rem;
	color: #000;
	background-color: #efefef;
	display: none;
	li{
		line-height: 1.5;
	}
}
.current{
	background-color: red;
}

JavaScript

$( function () {
	// クリック用イベントリスナー
	$(".btn").on( "click", function (){
		$(this).toggleClass("current").next().slideToggle();
	});
} );

toggleClass()メソッドは、指定したクラス名がなければクラス名を追加し、あればクラス名を削除します。ここでは「current」というクラス名を指定して、.currentクラスがある場合は背景色を赤に変更しています。次のメソッドのnext()は、処理のターゲットを次の要素に移しています。ここでは、.list要素が次のターゲットです。そのあとのslideToggle()メソッドは表示・非表示を切り替えるメソッドで、リストの表示・非表示を切り替えています。

Programming Language

Server Side

Blog

jQueryの使い方

jQueryの概要

主な特徴

ダウンロード

CDN

セレクタを使った要素の取得

構文：

構文：

CodePen: https://codepen.io/zionboogie/pen/geOzKm

HTML

CSS

JavaScript

読み込み後を待機

セレクタ

基本のセレクタ

階層セレクタ

フィルターセレクタ

属性フィルタ

子要素を取得

CodePen: https://codepen.io/zionboogie/pen/BrabRX

HTML

JavaScript

出力結果

イベント処理

構文：

アニメーション

構文：

メソッドチェーン

CodePen: https://codepen.io/zionboogie/pen/RMPbYZ

HTML

CSS

JavaScript

関連記事

CONTACT WITH RHYTHMFACTORY