DOMオブジェクトの基本操作 (2/5)
作成:2010-04-04 11:13
更新:2012-05-25 11:51
更新:2012-05-25 11:51
■jQueryオブジェクトの不思議
この$によって取得されるjQueryオブジェクトは、非常に不思議な性格を持っています。それは、「取得する要素が１つでも複数でも、全く同じように操作できる」という点です。
●特定のタグをすべて操作する
$関数では、引数の指定の仕方によりさまざまな形で要素を特定できます。先に、IDで指定する際には、'#ID名'という形でした。この他、「タグの種類で特定する」という方法もあります。これは$の引数にタグ名をそのまま記述するだけです。
下のリストに簡単なサンプルをあげておきます。ここではテキストを記入してボタンを押すと、<div>タグの表示すべてが一斉に変わります。$関数を見ると、
●クラスで特定する
特定のものを指定したい場合には、クラスを利用するのが便利です。これは、以下のような形で$関数を呼び出します。
●複数のIDを指定する
この他、もっと個別に指定をしたい場合には、ID名を必要なだけ列挙して指定をすることもできます。これは以下のように記します。
●特定のタグをすべて操作する
$関数では、引数の指定の仕方によりさまざまな形で要素を特定できます。先に、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>
※関連コンテンツ