19c. ProgateでjQuery上級編

スライドを作成

jQueryオブジェクトの構造
jQueryオブジェクトは、配列の「ような」構造をしており、下記のようにセレクタに合致した要素が配列のように入っています(実際には配列とは異なる)

<!-- index.html -->
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>jQuery</li>
</ul>

// script.js
$('li')
=> [
	<li>HTML</li>
	<li>CSS</li>
	<li>jQuery</li>
]

インデックス番号
jQueryオブジェクトも、下記のように0から順にインデックス番号が付いています。

// script.js
$('li')
=> [
	<li>HTML</li>		// インデックス番号 0
	<li>CSS</li>		// インデックス番号 1
	<li>jQuery</li>		// インデックス番号 2
]

eqメソッド
eqメソッドを用いると、jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できます。下記では$('li')の中のインデックス番号が2のjQueryオブジェクトを取得しています。

<!-- index.html -->
<ul>
	<li>インデックス番号 0</li>
	<li>インデックス番号 1</li>
	<li>インデックス番号 2</li>
</ul>

// script.js
$('li').eq(2).css('color', 'red');

スライドの仕組み
「.slide」要素は「display: none;」を用いて基本的に表示されないようにし、activeクラスがついた「.slide」要素だけが表示されるようにします。このactiveクラスをjQueryによって付け替えることによって、表示されるスライドを変更していきます。

<!-- index.html -->
<li class="slide"><img src="..."></li>
<li class="slide active"><img src="..."></li>	<!-- 表示させたいスライド -->
<li class="slide"><img src="..."></li>
<li class="slide"><img src="..."></li>

/* stylesheet.css */
.slide {
	display: none;		/* 全てのスライドを非表示にしてから */
}

.active {
	display: block;		/* activeクラスがついたスライドのみ表示 */
}

indexメソッド(1)
indexメソッドを用いると、下記のように「li」要素の中の「.active」要素のインデックス番号(1)を取得できます。

<!-- index.html -->
<ul>
	<li>HTML</li>
	<li class="active">CSS</li>
	<li>jQuery</li>
</ul>

// script.js
// [li]要素における「.active」要素のインデックス番号(1)を代入
var index = $('li').index($('.active'));

indexメソッド(2)
clickイベントで、クリックされた要素のインデックス番号を取得できます。

<!-- index.html -->
<ul>
	<li>インデックス番号 0</li>
	<li>インデックス番号 1</li>
	<li>インデックス番号 2</li>
</ul>

// script.js
$('li').click(function() {
	var index = $('li').index($(this));
});

prevとnext
prevメソッドは、jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から一つ前の要素を、nextメソッドは一つ後ろの要素を取得することができます。

<!-- index.html -->
<ul>
	<li>prev</li>
	<li id="center">center</li>
	<li>next</li>
</ul>

// script.js
$('#center').prev().css('color', 'red');	// centerより前のprevの色を赤にする
$('#center').next().css('color', 'blue');	// centerより後ろのnextの色を青にする

条件分岐
下記のように、最初のスライドが表示されている時は「前へ」ボタンを、最後のスライドが表示されている時は「次へ」ボタンを隠します。

// script.js
if (1枚目のスライドが表示) {
	// 「前へ」ボタンを隠す処理
} else if (最後のスライドが表示) {
	// 「次へ」ボタンを隠す処理
}

共通部分の関数化

// script.js
$('.index-btn').click(function() {
	:
	var slideIndex = ...	// 共通の処理
	:
});
$('.change-btn').click(funtion() {
	:
	var slideIndex = ...	// 共通の処理
	:
});

上記の共通部分を下記のtoggleChangeBtn()という関数に纏めることができます。

// script.js
function toggleChangeBtn() {		// 処理を関数として纏める
	var slideIndex = ...
	:
}

関数の呼び出し

// script.js
$('.index-btn').click(function() {
	:
	toggleChangeBtn();		// 関数名で呼び出す
});

function toggleChangeBtn() {
	// 処理
}

length
lengthメソッドを用いて、最後のスライドの場合に「次へ」ボタンを非表示にします。

// script.js
if (slideIndex == 0) {
	$('.prev-btn').hide();
} else if (slideIndex == $('.slide').length -1) {	// 最後のスライドの場合
	$('.next-btn').hide();
}

フォームの操作

textメソッド
textメソッドは引数を指定せずに用いることで、要素内の文字列を「ゲット(取得)」することもできます。

<!-- index.html -->
<h1>こんにちは</h1>
<p>Progate</p>

// script.js
// 文字列を書き換える場合
$('h1').text('こんばんは');

// 文字列を取得する場合
var text = $('p').text();		// p要素内の文字列「Progate」を取得

htmlメソッド、cssメソッド
htmlメソッドとcssメソッドも、ゲット(取得)することができます。

<!-- index.html -->
<div id="main">
	<h1>にんじゃわんこ</h1>
</div>

/* stylesheet.css */
h1 {
	font-size: 28px;
}

// script.js
// HTMLを取得する場合
var html = $('#main').html();			// 「#main」内のHTML「<h1>にんじゃわんこ</h1>」を取得

// CSSプロパティを取得する場合
var fontSize = $('h1').css('font-size');	// h1要素のフォントサイズ「28px」を取得

HTMLの属性
HTMLのタグにはclassやid、srcといったものを指定でき、これらを属性と呼びます。代表的なものに以下のようなものがあります。

<!-- index.html -->
<h1 id="title">こんにちは</h1>
<a href="https://...">リンク</a>

html属性の例

• class
• id
• href(aタグなど)
• src(imgタグなど)
• type(inputタグなど)

attrメソッド
HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができます。

<!-- index.html -->
<h1>こんにちは</h1>
<a href="https://prog-8.com">リンク</a>

// script.js
// 属性をセットする場合
$('h1').attr('id', 'title');		// h1要素にtitleというidをセット

// 属性の値を取得する場合
var url = $('a').attr('href');		// a要素のhref属性の値(https://prog-8.com)を取得

inputタグの入力値
inputタグを用いると一行の入力欄を作ることができます。inputタグに入力されている値は、valメソッドで取得できます。

<!-- index.html -->
<form>
	<div>名前：</div>
	<input id="name" type="text">
</form>

// script.js
var name = $('#name').val();	// 入力された値が変数に格納される

submitイベント
submitイベントとは、フォームが送信されたときに発生するイベントです。

// script.js
$('form').submit(function() {
	// フォームの値を取得
});

セレクトボックスの入力値
selectタグを用いると選択肢式のセレクトボックスを作ることができます。selectタグとoptionタグからなり、各optionタグが選択肢になります。

<!-- index.html -->
<form>
	<div>性別</div>
	<select id="gender">
		<option value="male">男</option>		<!-- セレクトボックスの選択肢 -->
		<option value="female">女</option>	<!-- セレクトボックスの選択肢 -->
	</select>
</form>

var gender = $('#gender').val();		// select要素の選択されているoptionのvalue属性を取得

エラーメッセージの仕組み
下記のような条件分岐で、エラーメッセージを表示します。

// script.js
if (入力値が空) {
	// エラーメッセージを表示
} else {
	// エラーメッセージを隠す
}

空文字列について
中身の無い文字列のことを「空文字列」と言います。空文字列は通常「''」(シングルクォート２つ)で表記します。

// script.js
if ($('#text-form').val() == '') {
	// エラーメッセージを表示
}

入力欄への自動入力
valメソッドは値を取得することもできますが、反対に引数に値を指定することで、フォームに値をセットすることもできます。下記では、inputタグへ値をセットしています。

<!-- index.html -->
<form>
	<div>名前：</div>
	<input id="name" type="text">
</form>

// script.js
$('#name').val('にんじゃわんこ');		// input要素に「にんじゃわんこ」という値をセット

セレクトボックスの自動入力
セレクトボックスも自動で選択されるようにします。selectタグもvalメソッドを用いて自動で選択させることができます。

<!-- index.html -->
<form>
	<div>性別：</div>
	<select id="gender">
		<option value="male">男</option>
		<option value="female">女</option>
	</select>
</form>

// script.js
$('#gender').val('female');		// seelct要素のoptionのvalue属性がfemaleのものを選択させる

カスタムデータ属性
属性は自分で作ることもできます。これをカスタムデータ属性といい、「data-」から始まる属性名を自由に設定できます。

<!-- index.html -->
<img src="image.jpg">						<!-- 特定の属性 -->
<div data-option="wanko">...</div>		<!-- 自分で作成した属性 -->

// script.js
$('img').attr('src');				// 「img」要素のsrc属性の値を取得
$('div').attr('data-option');		// 「div」要素のdata-option属性の値を取得

カスタムデータ属性を使用する
選択ボタンにdata-optionという属性を設定し、それぞれのdata-option属性にはselectタグの選択肢(option)のvalue属性に対応する値を指定しておきます。選択ボタンを押すことで、自動的にセレクトボックスが選択されるようにできます。

<!-- index.html -->
<div class="btn" data-option="1">ベイビーわんこ</div>	<!-- select要素のoptionのvalueに対応する値を指定 -->
<div class="btn" data-option="2">にんじゃわんこ</div>
<div class="btn" data-option="3">ひつじ仙人</div>

animateメソッド
アニメーションをつけるにはanimateメソッドを用います。$('セレクタ').animate({'プロパティ':'値'})のように、引数は連想配列で指定します。

// script.js
$('h1').animate({
	'font-size': '50px'		// font-sizeを50pxに変更
}, 1000);					// アニメーションのミリ秒('slow'や'fast'といった文字列で指定も可能)

aタグでのページ内リンク
<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできます。

<!-- index.html -->
<a href="#contact">
	お問い合わせ
</a>
	:
<div id="contact">		<!-- 上記のリンクをクリックすると、ここに飛ぶ -->
	:
</div>

scrollTopメソッド
ページ内リンクはjQueryでも実装できます。scrollTopメソッドは、$('html, body').scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができます。

// script.js
$('#top-btn').click(function() {
	$('html, body').scrollTop(0);		// スクロールされている部分の距離が0px(ページの最上部)
});

アニメーションを付ける
animateメソッドでは、CSSの値だけでなく、scrollTopなどの値も変更できます。

// script.js
$('html, body').animate({
	'scrollTop': 0
}, 'slow');

offsetメソッド
offsetメソッドを使用することで、要素の表示位置を取得することができます。offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってきます。

// script.js
// h1要素の表示位置を取得
$('h1').offset();					// { top: 180, left: 100 }

// ページ最上部からのh1要素の距離を取得
$('h1').offset().top;				// 180

attrメソッドで飛び先を取得する
各ボタンはaタグにし、そのhref属性に飛び先のid名を指定しておきます。そしてクリックしたときにattrメソッドでhref属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できます。

<!-- index.html -->
<a class="scroll-btn" href="#html">
	HTML
</a>
	:
<div id="html">
	:
</div>

// script.js
$('.scroll-btn').click(function() {
	var id = $(this).attr('href');			// クリックしたボタンの飛び先を取得(#html)
	var position = $(id).offset().top;		// 飛び先の最上部からの距離を取得
	:
});