jqueryの基本的な使い方をまとめる #5

1日目:jqueryの基本的な使い方をまとめる #1 - 超メモ帳（Web式）
2日目:jqueryの基本的な使い方をまとめる #2 - 超メモ帳（Web式）
3日目:jqueryの基本的な使い方をまとめる #3 - 超メモ帳（Web式）
4日目:jqueryの基本的な使い方をまとめる #4 - 超メモ帳（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>