copyright

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

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

jQuery

11-09)　1. 子孫セレクターを操作する

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

子孫セレクター
 階層関係にある複数のセレクターをスペース区切りで指定する。

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

11-09)　2. 子孫セレクターを操作の動作確認

　

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

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

jQueryの書き方 /*------------------------------------ */
//　11-09) 　子孫セレクター （strong要素）
/*------------------------------------ */
//.click()　イベント
$("#btn_11091").click(function(){
  $(".cc01 strong").css("color","red");　/*　1,2行目赤色 */
});
$("#btn_11092").click(function(){
  $(".cc02 strong").css("color","blue"); /* 3,4行目青色 */
});
$("#btn_11093").click(function(){
  $("dd strong").css("color",""); /* 要素セレクターでクリア */
});
ｃｓｓの書き方 -------------------------
HTMLの書き方 <dl>
  <dd class="cc01">
    <strong>1行目のテキスト</strong>
    （子孫セレクター：.cc01&lt;strong&gt;で指定する）
  </dd>
  <dd class="cc01">
    <strong>2行目のテキスト</strong>
    （子孫セレクター：.cc01&lt;strong&gt;で指定する）
  </dd>
  <dd class="cc02">
    <strong>3行目のテキスト</strong>
    （子孫セレクター：.cc02&lt;strong&gt;で指定する）
  </dd>
  <dd class="cc02">
    <strong>4行目のテキスト</strong>
    （子孫セレクター：.cc02&lt;strong&gt;で指定する）
  </dd>
  <dd class="cc01">
    5行目のテキスト（子孫セレクター無し： cc01）
  </dd>
</dl>
<button id="btn_11091" class="btnStd_170 Gray">子孫セレクター 01(赤色）</button>　
<button id="btn_11092" class="btnStd_170 Gray">子孫セレクター 02(青色）</button>　
<button id="btn_11093" class="btnStd_170 Gray">要素セレクター (クリア）</button>　

1行目のテキスト（子孫セレクター：.cc01<strong>で指定する）
2行目のテキスト（子孫セレクター：.cc01<strong>で指定する）
3行目のテキスト（子孫セレクター：.cc02<strong>で指定する）
4行目のテキスト（子孫セレクター：.cc02<strong>で指定する）
5行目のテキスト（子孫セレクター無し： cc01）