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

プログラム例

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が無い場合は追加します。

結果

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

プログラム例

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

説明

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

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

プログラム例

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が無い場合は追加します。

結果

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

プログラム例

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タグの偶数番目の中身からマウスが離れた時、｛　｝内を実行します。

結果