copyright

株式会社アイネックスはソフトウェアの開発、検証ツールの支援企業です。

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

jQuery

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

ｊQueryでグループセレクターを操作します。
 ｊQueryでは、ＨＴＭＬ（XHTML、ＨＴＭＬ５）の各要素をセレクターで表現し、操作する。

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

書式；　$("要素名　，　要素名　，　要素名　・・・")

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

　

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

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

特記；　ＩＤセレクタ（#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",""); /* 要素セレクターでクリア */
});
ｃｓｓの書き方 ----------------------
HTMLの書き方 <dl>
  <dd id="dd01">1行目のテキスト（ＩＤセレクター：dd01で指定する）</dd>
  <dd id="dd02">2行目のテキスト（ＩＤセレクター：dd02で指定する）</dd>
  <dd id="dd03">3行目のテキスト（ＩＤセレクター：dd03で指定する）</dd>
  <dd id="dd04">4行目のテキスト（ＩＤセレクター：dd04で指定する）</dd>
  <dd id="dd05">5行目のテキスト（ＩＤセレクター：dd05で指定する）</dd>
</dl>
<button id="btn_11101" class="btnStd_170 Gray">ＩＤセレクター 01,03(赤色）</button>　
<button id="btn_11102" class="btnStd_170 Gray">ＩＤセレクター 02,04(青色）</button>　
<button id="btn_11103" class="btnStd_170 Gray">要素セレクター (クリア）</button>　

1行目のテキスト（ＩＤセレクター：dd01で指定する）
2行目のテキスト（ＩＤセレクター：dd02で指定する）
3行目のテキスト（ＩＤセレクター：dd03で指定する）
4行目のテキスト（ＩＤセレクター：dd04で指定する）
5行目のテキスト（ＩＤセレクター：dd05で指定する）