DOMオブジェクトの基本操作 (2/5)

■jQueryオブジェクトの不思議

この$によって取得されるjQueryオブジェクトは、非常に不思議な性格を持っています。それは、「取得する要素が１つでも複数でも、全く同じように操作できる」という点です。

●特定のタグをすべて操作する
$関数では、引数の指定の仕方によりさまざまな形で要素を特定できます。先に、IDで指定する際には、'#ID名'という形でした。この他、「タグの種類で特定する」という方法もあります。これは$の引数にタグ名をそのまま記述するだけです。

下のリストに簡単なサンプルをあげておきます。ここではテキストを記入してボタンを押すと、<div>タグの表示すべてが一斉に変わります。$関数を見ると、

$('タグ名')

このような形で記述されていることがわかるでしょう。ここでは$('div').text(値)と実行しています。これで、ページにある全<div>タグの内容が一斉に変更されてしまうのです。

●クラスで特定する
特定のものを指定したい場合には、クラスを利用するのが便利です。これは、以下のような形で$関数を呼び出します。

$('.クラス名')

クラス名の前にドット（.）をつけて記述します。例えば、下のサンプルで、<div>タグを変更している文を以下のように書き換えてみましょう。

$('div')　→　$('.msg')

これで、class="msg"と指定されたタグのテキストだけがまとめて変更されます。classが指定されていないものは変わりません。

●複数のIDを指定する
この他、もっと個別に指定をしたい場合には、ID名を必要なだけ列挙して指定をすることもできます。これは以下のように記します。

$('#ID名, #ID名, …… ')

操作したい要素のID名を、カンマで区切って必要なだけ並べて記述すると、それらをすべてまとめて操作することができます。例えば下の$関数部分を、

$('div')　→　$('#message1,#message3')

このように変更すると、message1とmessage3のIDのタグだけが変更されます。このように、$関数での引数の指定方法をしっかり覚えておくと、さまざまな要素を一括して操作できるようになります。通常ならば、複数の要素を取得し、繰り返しなどを使って順に操作しなければならないことが、わずか１行で実現できてしまうのです。jQueryの威力を実感できますね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<html>
	<head>
		<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
		<script src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
		<!--
		function doAction(){
			var str = $('#text1').val();
			$('div').text('あなたは、"' + str + '"と書きました。');
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div class="msg" id="message1">テキストを入力：</div>
		<div class="msg" id="message2">テキストを入力：</div>
		<div id="message3">テキストを入力：</div>
		<input type="text" id="text1">
		<input type="button" onclick="doAction();" value="Click">
	</body>
</html>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail