19a. ProgateでjQuery初級編

jQueryはJavaScriptのライブラリの1つです。
jQueryを使うことで、アニメーションをつけることやユーザーの行動に応じたインタラクティブなデザインを実現することができます。
 

jQueryの書き方

// script.js
$('セレクタ').メソッド(引数);
$('h1').hide();				// 要素を隠す
$('h1').fadeOut(1500);		// アニメーション速度を1500ミリ秒に指定
$('h1').fadeIn(slow);		// アニメーション速度を「ゆっくり」に指定
$('h1').slideUp();
$('h1').slideDown();

隠れた要素を表示

/* stylesheet.css */
img {
	display: none;		/* 初期状態では非表示 */
}

// script.js
$('img').show();		// イベント発生時に表示

イベント

イベントとは

WEBページ内で、ユーザーによってクリックなどの操作が行われた時、予めイベント内に指定した処理を実行します。

// script.js
$('セレクタ').イベント名(function() {
	// イベント発生時に実行したい処理
});

clickイベント

clickイベントを用いると、ボタンをクリックしたときに関連する文章を表示するといったイベントを設定できます。

<div id="hide-text">説明を隠す</div>
<p id="text">ボタンをクリックすると文章が隠れます</p>

// script.js
$('#hide-text').click(function() {
	$('#text').hide();				// クリックされた時に #text を隠す
});

cssメソッド

cssメソッドは、CSSを変更できるメソッドです。

/* stylesheet.css */
p {
	color: blue;
}

$('p').css('color','red');		// colorプロパティを赤に変更

cssメソッドで要素を隠す、表示する

<!-- index.html -->
<h1>h1を隠す</h1>
<img src="...">

/* stylesheet.css */
img {
	display: none;
}

// h1 を隠す
$('h1').css('display', 'none');

// img を表示
$('img').css('display','block');

HTMLを変更する

textメソッド

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

// script.js
$('p').text('こんばんは');		// p要素内の文字列を変更

htmlメソッド

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

// script.js
$('p').html('<span>こんばんは</span>');	// p要素内のHTMLを書き換える

thisの構文

<!-- index.html -->
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

// script.js
$('li').click(function() {
	$(this).css('color','red');		// $(this)はそのイベントが起こった要素を取得できます
});

変数を使用する

変数を使用しない場合

// script.js
$('div').css('color', 'red');
$('div').html('jQuery');
$('div').fadeOut();

変数を使用した場合

// script.js
var $div = $('div');		// 同じjQueryオブジェクトを複数回使用する時は変数にする

$div.css('color', 'red');
$div.html('jQuery');
$div.fadeOut();

メソッドチェーンを使用する

// script.js
// ドット(.)で繋げて連続してメソッドを適用できる
$('div').css('color', 'red').html('jQuery')

子要素を取得する

findメソッド

findメソッドは、全ての子孫要素(自分よりも下の階層の要素全て)の中から、指定したセレクタを持つ要素を取得したい時に用います。下の例では、<div id="wrapper">から</div>の中にあるすべての<a>要素を取得して、cssメソッドで色を変更しています。

<!-- index.html -->
<div id="wrapper">
	<a href="#">リンク1</a>
	<p>
		<a href="#">リンク2</a>
	</p>
</div>

// script.js
$('#wrapper').find('a').css('color', 'red');

childrenメソッド

childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用います。下の例では、<div id="wrapper">の子要素は<a>タグと<p>タグが一つづつなので、「リンク1」のみcssメソッドで色が変更されます。

<!-- index.html -->
<div id="wrapper">
	<a href="#">リンク1</a>
	<p>
		<a href="#">リンク2</a>
	</p>
</div>

// script.js
$('#wrapper').children('a').css('color', 'red');

hoverイベントを作成

hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。

$('div').hover(
	function(){
		// マウスを乗せた時の処理
	},
	function(){
		// マウスを外した時の処理
	}
);