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


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

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

1.クラスの書き換えで、昨日の1の表の行の背景色をボタンを押すたびに切り替える

プログラム例

script部
$(function() {
  $(‘.table tr:even’).addClass(‘kisuu’);
  $(‘.table tr:odd’).addClass(‘guusuu’);
  $(‘.table .button’).click(function(){
    $(‘.table tr’).toggleClass(‘kisuu guusuu’);
  });
});

CSSL部

.kisuu {
  background-color:#ffffe0;
}
.guusuu {
  background-color:#ffddff;
}

HTML部
<div class="table">
<input class="button" type="button" value="切り替えボタン" />
<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>
</div>

説明

$(‘.table tr’).toggleClass(‘kisuu guusuu’)

class="table"のtrタグのクラスを、guusuuまたはkisuuがある場合は削除し、guusuuまたはkisuuuが無い場合は追加します。

結果

2.ページが開かれた時のイベント処理

ページが開かれた時のイベントに処理を指定します。

プログラム例

script部
$(function() {
  ページが開かれた時の処理
});

説明

{ }内に、ページが開かれた時の処理を記述します。

3.クリックされた時のイベント処理

クリックされた時のイベントに処理を指定します。

プログラム例

script部
$(function() {
  $(‘.power p’).addClass(‘itte’);
  $(‘.power p’).click(function(){
    $(this).fadeOut(300,function(){
      $(this).toggleClass(‘itte coi’);
    });
    $(this).fadeIn(300);
  });
});

CSS部

.power p {
width:100px;
height:20px;
text-align:center;
font-weight:bold;
color:#000000;
cursor:pointer;
}
.power .itte {
background-color:#dcdcdc;
}

.power .coi {
background-color:#ff0000;
}

HTML部
<div class="power">
<p>POWER</p>
</div>

説明

$(‘.power p’).click(function(){ })

class="power"のpタグの中身がクリックされた時、{ }内を実行します。

$(this).fadeOut(300,xxx)

イベントの対象となったオブジェクトを、0.3秒かけてフェードアウトします。その後、xxxの処理を実行します。

function(){$(this).toggleClass(‘itte coi’)}  (上のxxx)

イベントの対象となった要素のクラスを、itteまたはkoiがある場合は削除し、itteまたはkoiが無い場合は追加します。

結果

4.マウスオーバー時のイベント処理

マウスオーバーされた時のイベントに処理を指定します。

プログラム例

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

HTML部
<div class="table">
<table>
<tr>
<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>
</div>

説明

$(‘.table tr’).mouseover(function(){ })

class="table"のtrタグ中身がマウスオーバーされた時、{ }内を実行します。

$(‘.table tr:odd’).mouseout(function(){ })

class="table"のtrタグの偶数番目の中身からマウスが離れた時、{ }内を実行します。

結果


備考

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




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

関連記事

カテゴリー:職業訓練
.

コメントを残す