jQueryで要素を指定する

jQueryは多くのセレクタをサポートしていて、セレクタに適合した要素が指定の対象となる。
これはCSSセレクタの例。CSSっぽく要素を指定することができる。

名称 指定の対象 書式など
型セレクタ 同じ名前の要素 $(div);とか$(a);
IDセレクタ 同じID属性を持つ要素 $(#main);とか$(div#main);
クラスセレクタ class属性に指定した文字列を含む要素 $(.header),$(div.top)など
属性セレクタ 属性名と値 label[for=""comment""]

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

以下のサンプルで、テキストボックスの値を取得してコンソールに出力してみる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryで属性を設定するサンプル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(form).submit(function(e) {
		e.preventDefault();
		textValue = $(textarea).val();
		console.log(textareaの値↓);
		console.log(textValue);
		console.log("------------")
		nameValue = $(#name).val();
		console.log(名前は・・・↓);
		console.log(nameValue);
		console.log(---------------);
		console.log("valの一覧");
		$(this).find(ul)
			.find(:input)
			.each(function() {
				var val = $(this).val();
				var name = $(this).attr(name);
				//console.log(name.text());
				var li = $(this).attr(li);
				console.log(val);
			});
			console.log("-------");
	});
	$(this).unbind(submit);
});
</script>
</head>
<body>
<h1>ご登録</h1>
<form action="#" method="post">
<ul>
<li>名前:<input type="name" type="text" id="name"></li>
<li>選択してください。
<select name="select">
	<option></option>
	<option></option>
</select>
</li>
<br>
<li>
何かメッセージを入れてね:<br>
<textarea name="textarea" rows="3" cols="50">
</textarea>
</li>
</ul>
<br>

<input name="submit" type="submit" value="送信">
</form>
</body>
</html>

結果はこうなる。

textareaの値↓ 
hello world!
------------ 
名前は・・・↓ 
sho322
--------------- 
valの一覧
sho322 
男 
hello world! 
------- 

軽く読んだ本

jQueryクックブック

jQueryクックブック

  • 作者: jQuery Community Experts,株式会社クイープ
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2010/08/18
  • メディア: 大型本
  • 購入: 10人 クリック: 333回
  • この商品を含むブログ (40件) を見る

感謝のプログラミング

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

久しぶりにjQueryを触るとけっこう忘れていた。
でも、一度やったことだから、思い出しやすくなっていた。
こうやって、一度忘れてしまったとしても感覚を取り戻せるように、一つ一つ経験を積み重ねて行きたい。
全てを記憶するのは無理だけど、思い出しやすくすることはできるはず。
明日から仕事!気合入れねば!