jqueryの基本的な使い方をまとめる #5 — 超メモ帳（web式）@復活

5日目:ここ

今日はイベント周りのメソッドやるよ。今日で終わり。

次はWordPressでもやろう。

ちなみにですけど、サンプルで書いてるコードは同時に処理を並べて書いてるのでコピペしても正常には動かないですよ。試してみたいって人は一つづつ自分で書いてみよう。

クリック周りのメソッド

マウスをクリックしたり、マウスオーバーした時にアクションを起こすメソッド。

画面の処理なんかでよく使う。

<div id="box" style="width: 100px; height: 100px; background: red;"></div>		
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		// マウスでクリックした時にアラートを出す
		$("#box").click(function() {
			alert('こんにちわ');
		});

		// メソッドチェーンでマウスが乗っている時の処理を記述
		$("#box")
			.mouseover(function() {
			
				// マウスが上に乗っている時はboxを緑色に
				$(this).css('background', 'green');
			})
			.mouseout(function() {
				
				// マウスが離れた時はboxを赤に戻す
				$(this).css('background', 'red');
			})
			// pageXを使って座標を取得するので引数を指定
			.mousemove(function(e) {
				
				// 文字でマウスのX座標を表示
				$(this).text(e.pageX);
			});

	});
</script>

フォーム関係のアクションメソッド

フォームを使っている時に部品にフォーカスがあたったらアクションを起こすメソッド。

基本的な業務用処理では一番使うかな？

<input type="text" id="name" />		
<select name="member" id="member">
	<option>りんご</option>
	<option>メロン</option>
	<option>バナナ</option>
</select>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		$("#name")
			// フォームにフォーカスがあったら色を変える
			.focus(function() {
				$(this).css('background', 'red');
			})
			// フォームからフォーカスが外れたら戻す
			.blur(function() {
				$(this).css('background', 'white');
			});

			// セレクトが変えられたらアラートを出す
			$("#member").change(function() {
				alert('変更あり');
			});
	});
</script>

動的に作られた要素に処理を行う

通常の場合、読み込まれた時点で出来たDOM要素にしか処理は行えませんが、onメソッドを使えば、動的に作られた要素にも処理を加える事が出来ます。

<button>クリック！</button>		
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		$('button').click(function() {

			// vanishクラスのpタグを生成します
			var p = $('<p>').text('vanish!').addClass('vanish');
			$(this).before(p);
		});

		/*
		// このpタグは動的に生成されたために下記の方法では消えません
		$('.vanish').click(function() {
			$(this).remove();
		});
		*/

		// onメソッドを使った方法だと消えます
		$('body').on('click', '.vanish', function() {
			$(this).remove();
		});
	});
</script>

まとめ

ひと通りjQueryの基本を押さえてみました。内容はドットインストールの基本編を書き下ろしただけです。

【旧版】 jQuery入門 (全20回) - プログラミングならドットインストールJavaScriptをより簡単に扱うためのライブラリであるjQueryについて、その基本的な使い方を学びます。dotinstall.com

一応、基本的な書く方はわかったので何か構築なりカスタマイズをしたいですね。次はWordPressの基本編でも勉強するかね。前に一度、業務でショートタグとかのカスタマイズはしたけど、基本的な使い方を覚えたい。