株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

11-10) 1. グループセレクターを操作する

jQueryでグループセレクターを操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をセレクターで表現し、操作する。

グループセレクター
複数のセレクターを,(カンマ)区切りで並べて指定し記述する。

書式; $("要素名 , 要素名 , 要素名 ・・・")

11-10) 2. グループセレクターを操作の動作確認

 

動作の説明
ボタン【IDセレクター01,03(赤色) 】(#btn_11101)をクリック(.click(function(){)すると、
jQueryのスクリプト $("#dd01").css("color","red"); を実行する。

処理; IDセレクター(#dd01 ,#dd03)のcssの
     colorプロパティの値(.css("color","red"))を変更する。
     1行目、3行目のテキストが赤色となる。

特記; IDセレクタ(#dd01)の値を重複することはできない。

jQueryの書き方 /*------------------------------------ */
// 11-10)  グループセレクター
/*------------------------------------ */
//.click() イベント
$("#btn_11101").click(function(){
  $("#dd01 ,#dd03").css("color","red"); /* 1,3行目赤色 */
});
$("#btn_11102").click(function(){
  $("#dd02 ,#dd04").css("color","blue"); /* 2,4行目青色 */
});
$("#btn_11103").click(function(){
  $("dd").css("color",""); /* 要素セレクターでクリア */
});
cssの書き方 ----------------------
HTMLの書き方 <dl>
  <dd id="dd01">1行目のテキスト(IDセレクター:dd01で指定する)</dd>
  <dd id="dd02">2行目のテキスト(IDセレクター:dd02で指定する)</dd>
  <dd id="dd03">3行目のテキスト(IDセレクター:dd03で指定する)</dd>
  <dd id="dd04">4行目のテキスト(IDセレクター:dd04で指定する)</dd>
  <dd id="dd05">5行目のテキスト(IDセレクター:dd05で指定する)</dd>
</dl>
<button id="btn_11101" class="btnStd_170 Gray">IDセレクター 01,03(赤色)</button> 
<button id="btn_11102" class="btnStd_170 Gray">IDセレクター 02,04(青色)</button> 
<button id="btn_11103" class="btnStd_170 Gray">要素セレクター (クリア)</button> 

1行目のテキスト(IDセレクター:dd01で指定する)
2行目のテキスト(IDセレクター:dd02で指定する)
3行目のテキスト(IDセレクター:dd03で指定する)
4行目のテキスト(IDセレクター:dd04で指定する)
5行目のテキスト(IDセレクター:dd05で指定する)