copyright

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

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

jQuery

11-07)　1. ＩＤセレクターを操作する

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

ＩＤセレクター
 ＩＤ属性を持つ要素を対象にします。
ＩＤ属性の値に＃（ハッシュマーク）を付けたものをセレクターとして利用する。
ＩＤ属性の値はユニークである必要があります。

書式；　$("#ＩＤ名")

11-07)　2. ＩＤセレクターを操作の動作確認

　

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

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

特記；　ＩＤセレクタの値（#dd01）を重複することはできない。

jQueryの書き方 /*------------------------------------ */
//　11-07) 　ＩＤセレクター
/*------------------------------------ */
//.click()　イベント
$("#btn_11071").click(function(){
  $("#dd01").css("color","red");　/*　1行目赤色 */
});
$("#btn_11072").click(function(){
  $("#dd02").css("color","blue"); /* 2行目青色 */
});
$("#btn_11073").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_11071" class="btnStd_170 Gray"ＩＤセレクター 01(赤色）</button>　
<button id="btn_11072" class="btnStd_170 Gray">ＩＤセレクター 02(青色）</button>　
<button id="btn_11073" class="btnStd_170 Gray">ＩＤセレクター (クリア）</button>　

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