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

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

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

jQueryのフィルタなどのメモ。

jQuery
<スポンサーリンク>

jQueryでテキストボックスの値を取得する。

jQueryでテキストボックスの値を取得するためのフィルタは「:text」というもの。
陳腐なサンプルだが、ボタンクリックでテキストの値をアラートで表示する。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#button').click(function(e) {
			alert($(':text').val());
		});
	});
</script>
</head>
<body>
<form>
<input type="text" size="40">
<button id="button">クリック</button>
</form>
<script type="text/javascript">
	//body
</script>
</body>
</html>

その他のフォーム要素の内容を取得するためのフィルタは以下の通り。

jQueryセレクタ構文 対象
:text input type=""text""
:password input type=""password""
:radio input type=""checkbox""
:checkbox input type=""submit""
:submit input type=""submit""
:reset input type=""reset""
:button input type=""button""
:file input type=""file""
:hidden input type=""hidden""

jQueryの$().each()を使って選択セットをループにかける

$().each();メソッドは、jQueryオブジェクト内の要素をループにかけることができる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<style type="text/css">
	.even{ background-color:#7B68EE ;}
	.odd{ background-color:#00FA9A;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("ul > li").each(function(i) {
		if (i % 2 == 1) {
			$(this).addClass("odd");
		} else {
			$(this).addClass("even");
		}
	});
});
</script>
</head>
<body>
<h2> Member List </h2>
<ul>
	<li>桜木花道</li>
	<li>流川楓</li>
	<li>赤木剛憲</li>
	<li>三井寿</li>
	<li>宮城リョータ</li>
</ul>
<script type="text/javascript">
	//body
</script>
</body>
</html>

jQueryでスクリプトからCSSのスタイル定義を動的に変更する。

構文は以下の通り。

css('プロパティ名');
css('プロパティ名', '値');

たとえば、背景色を変えるには、

$(this).css('background-color', '#B0E0E6');

のように指定する。
サンプルはこちら。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<style type="text/css">
	.even{ background-color:#7B68EE ;}
	.odd{ background-color:#00FA9A;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("ul > li").eq(3).css('background-color', '#B0E0E6');
});
</script>
</head>
<body>
<h2> Member List </h2>
<ul>
	<li>黒子テツヤ</li>
	<li>赤司征十郎</li>
	<li>緑間真太郎</li>
	<li>青峰大輝</li>
	<li>黄瀬涼太</li>
</ul>
<script type="text/javascript">
	//body
</script>
</body>
</html>

ちなみに、このjQueryで使っているeq()メソッドは、操作したい選択セットのインデックスを指定することができる。
eq(3)というのは3番目で、上記の例では青峰大輝が青くなる。

勉強した本

jQueryクックブック

jQueryクックブック

感謝のプログラミング

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