copyright

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

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

jQuery

11-08)　1. クラスセレクターを操作する

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

クラスセレクター
 クラス属性を持つ要素を対象にします。
クラス属性の値に．（ドット）を付けたものをセレクターとして利用する。

書式；　$(".クラス名")

11-08)　2. クラスセレクターを操作の動作確認

　

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

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

jQueryの書き方 /*------------------------------------ */
//　11-08) 　クラスセレクター
/*------------------------------------ */
//.click()　イベント
$("#btn_11081").click(function(){
  $(".cc01").css("color","red");　/*　1,2行目赤色 */
});
$("#btn_11082").click(function(){
  $(".cc02").css("color","blue"); /* 3,4行目青色 */
});
$("#btn_11083").click(function(){
  $("dd").css("color",""); /* 要素セレクターでクリア */
});
ｃｓｓの書き方 ----------------------
HTMLの書き方 <dl>
  <dd class="cc01">1行目のテキスト（クラスセレクター：cc01で・・）</dd>
  <dd class="cc01">2行目のテキスト（クラスセレクター：cc01で・・）</dd>
  <dd class="cc02">3行目のテキスト（クラスセレクター：cc02で・・）</dd>
  <dd class="cc02">4行目のテキスト（クラスセレクター：cc02で・・）</dd>
  <dd class="cc03">5行目のテキスト（クラスセレクター：cc03で・・）</dd>
</dl>
<button id="btn_11081" class="btnStd_170 Gray">クラスセレクタ01(赤色）</button>　
<button id="btn_11082" class="btnStd_170 Gray">クラスセレクタ02(青色）</button>　
<button id="btn_11083" class="btnStd_170 Gray">要素セレクタ(クリア）</button>

1行目のテキスト（クラスセレクター：cc01で指定する）
2行目のテキスト（クラスセレクター：cc01で指定する）
3行目のテキスト（クラスセレクター：cc02で指定する）
4行目のテキスト（クラスセレクター：cc02で指定する）
5行目のテキスト（クラスセレクター：cc03で指定する）