基金訓練に行ってきました。(61日目)


基金訓練(Webデザイン・プログラミング科)の61日目に行ってまいりました。
61日目は、jQueryの実習です。

61日目の内容は下記のとおりです。

1.スタイルシートの書き換えで、表の行の背景色を交互に変える

css()メソッドを使用してスタイルシートを書き換えます。

プログラム例

script部
$(function() {
$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′);
$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’);
});

HTML部
<table class="table">
<tr>
<td>真弓</td><td>34本</td>
</tr>
<tr>
<td>バース</td><td>54本</td>
</tr>
<tr>
<td>掛布</td><td>40本</td>
</tr>
<tr>
<td>岡田</td><td>35本</td>
</tr>
</table>

説明

$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′)

class="table"のtrタグの奇数番目のタグに、style="background-color:#ffffe0"を、書き加えます。

$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’)

class="table"のtrタグの偶数番目のタグに、style="background-color:#ffddff"を、書き加えます。

結果

※これをスタイルシートで実現しようとすると、すべてのtrタグにクラス指定する必要があります。
また、真ん中で行を足すと、それ以降のtrタグのクラス名を変更しなくてはなりません。
なので、このような表を作る時は、jQueryが非常に有効です。

2.CSSプロパティの一括指定

CSSプロパティを一括して指定できます。

プログラム例

script部
$(function() {
  $(‘ .button’) .click(function() {
    $(‘.contents p’).css({
      ’fontSize’:’150%’,
      ’fontWeight’:’bold’,
      ’color’:’#ff0000′
    });
    $(‘.contents li’).css({
      ’color’:’#0000ff’,
      ’backgroundColor’:’#99ff99′
    });
  });
});

HTML部
<div class="contents">
<input class="button" type="button" value="書き換え" />
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>

説明

$(‘.contents p’).css({
      ’fontSize’:’150%’,
      ’fontWeight’:’bold’,
      ’color’:’#ff0000′
    })

class="contents"のpタグに style="font-size:150%;font-weight:bold;color:#ff0000" を書き加えます。

結果

3.クラスを切り替える

CSSのクラスを追加、削除、切り替えします。

プログラム例

script部
$(function() {
  $(‘.contents .button’) .click(function() {
    $(‘.contents li:first’).addClass(‘futo’);
    $(‘.contents li:eq(1)’).removeClass(‘ao’);
    $(‘.contents li:last’).toggleClass(‘aka’);
  });
});

CSS部

li.futo {
font-weight:bold;
}
li.aka {
color:red;
}
li.ao {
color:blue;
}

HTML部
<div class="contents">
<input class="button" type="button" value="書き換え" />
<ul>
<li>li の中身</li>
<li class="ao">li の中身</li>
<li>li の中身</li>
</ul>
</div>

説明

$(‘#contents li:first’).addclass(‘futo’)

class="contents"の最初のliタグに、class="futo"を書き加えます。

$(‘#contents li:eq(1)’).addclass(‘futo’)

class="contents"の1番目(最初のタグが0番目)のliタグに、class="ao"を書き加えます。

$(‘#contents li:last’).addclass(‘futo’)

class="contents"の最後のliタグに、class="aka"を、呼ばれる度に追加と削除を繰り返します。

結果


備考

jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。




  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
.

コメントを残す