読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Queryのイベント操作いろいろ

<スポンサーリンク>

jQueryのイベント操作のまとめ

ユーザーの操作を「イベント」といい、イベントに対して個別に処理を割り当てる。
割り当てられた処理プログラムのことを「イベントハンドラ」という。
イベントバブリングとは、イベントが泡のように親要素に伝搬することを表している。

ボタンが押されたときの処理

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script>
		$(document).ready(function() {
			$('a').click(function(event) {
				alert('リンクがクリックされました');
				event.preventDefault();
			});
		});
	</script>
</head>
<body>

<a href="http://d.hatena.ne.jp/sho322/">my blog</a>
</body>
</html>

event.preventDefault()はリンクをクリックした時などに画面の遷移をキャンセルし、イベントハンドラの処理だけを実行できる。

要素のフォーカスが移ったことを検知する

.focus()やfocusin()というイベントハンドラは、要素にフォーカスが移ったときにコールされる。
.blur()とfocusout()は、要素からフォーカスが外れたときにコールされる。
郵便番号の入力とか、そういうのでajaxと組み合わせて使えそう。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script>
		$(document).ready(function() {
			$('input').focusin(function(e) {
				$('input').val('ここにフォーカスが移りました!');
			});
			$('input').change(function(e) {
				var val = $('input:text').val();
				$('p').append(function() {
					return '<span>' + val + '</span>';
				});
			});

			$('input').focusout(function(e) {
				$('input').val('フォーカスが外れました!');
			});
		});
	</script>
</head>
<body>
<input type="text" size="50">
<p></p>
</body>
</html>

inputのtextで入力された値は

var val = $('input:text').val();

の部分で取得できる。

$('input').change(〜)

の部分では、inputの内容の変化を検知して、イベント処理を行う。

フォーム送信時のイベント

送信ボタンを押されたときに、フォーム要素に入力した値を取得して、値の確認を行う。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script>
		$(document).ready(function() {
			$('form').submit(function(e) {
				var text = $('#text').val();
				console.log(text);
				if (text === "error") {
					if (!confirm('errorと入力されていますが、大丈夫ですか?')) {
						e.preventDefault();
						return;
					}
				}
				alert(text + "を送信します!");
			})
		});
	</script>
</head>
<body>
<form method="get" action="#" name="form">
	<input type="text" id="text" name="name" value="">
	<input type="submit" name="submit" value="送信">
</form>
<p></p>
</body>
</html>

form要素の中のテキストの内容を取得しているのは

var text = $('#text').val();

の部分。idと紐付けている。

参考書籍

jQuery ポケットリファレンス (POCKET REFERENCE)

jQuery ポケットリファレンス (POCKET REFERENCE)


様々な例が「ちゃんと動く」形で載っている貴重な本。
ちょっと何かを作りたい時に大いに参考になる。

感謝のプログラミング

今回で感謝のプログラミングは【501時間目】
10000時間まで、あと【9499時間】