前回の入力フォームに、未記入の時、警告するようにします。

プログラム例

script部
$(‘input’).focus(function(){
　　$(this).addClass(‘focused’);
});
$(‘input’).blur(function(){
　　$(this).removeClass(‘focused’);
　　if($(this).val()==”){
　　　　$(this).addClass(‘uninput’);
　　　　$(this).next().html(‘ 未入力！’);
　　}
　　else{
　　　　$(this).removeClass(‘uninput’);
　　　　$(this).next().html(”);
　　}
});

ｃｓｓ部
.focused {background-color:#ccffff;}
.uninput {background-color:#ffc0cb;}
span {color:#ff0000;font-weight:bold;}

HTML部
氏名：<input type="text" /><span></span><br />
メールアドレス：<input type="text" /><span></span><br />

説明

if($(this).val()==”){1}　else{2}

イベント対象のタグのvalueの値が空文字列のとき、1を実行し、それ以外は、2を実行します。
(例の場合、イベント対象のタグとはフォーカスが当たっているinputタグを指します。)

$(this).next().html(‘ 未入力！’);

イベント対象のタグの次のタグの中身を　未入力！　に書き換えます。
(例の場合、イベント対象の次のタグとは、spanタグを指し、中身とは、spanタグで囲まれた文字列を指します。)

結果

アニメーションで要素を、表示したり非表示にしたりします。

メソッド

show()メソッド

表示するためのメソッドです。

hide()メソッド

非表示にするためのメソッドです。

slideDown()メソッド

上から徐々に表示するためのメソッドです。

slideUpメソッド

下から徐々に非表示にするためのメソッドです。

slideToggleメソッド

slideDown、slideUpを繰り返すためのメソッドです。

fadeIn

フェードインで表示するためのメソッドです。

fadeOut

フェードアウトで非表示にするためのメソッドです。

書式

$(‘セレクター’).show(スピード,function(){
　　　　　　アニメーションが終わった時の処理
});

前回の入力フォームに、未記入の時、警告するようにします。

プログラム例

script部
$(‘.tab1’).mouseover(function(){
　　$(this).addClass(‘focused’);
});
$(‘.tab1’).mouseout(function(){
　　$(this).removeClass(‘focused’);
});
$(‘.tab2’).mouseover(function(){
　　$(this).addClass(‘focused’);
});
$(‘.tab2’).mouseout(function(){
　　$(this).removeClass(‘focused’);
});
$(‘.text1’).show();
$(‘.tab1’).click(function(){
　　$(‘#text div’).hide();
　　$(‘.text1’).slideDown();
});
$(‘.tab2’).click(function(){
　　$(‘#text div’).hide();
　　$(‘.text2’).slideDown();
});

ｃｓｓ部
#tab div{
　　width:50px;
　　height:20px;
　　padding:5px;
　　text-align:center;
　　cursor:pointer;
　　float:left;
}
.tab1,.text1{
　　background-color:#9F6;
}
.tab2,.text2{
　　background-color:#FCC;
}
#text div{
　　width:110px;
　　padding:5px;
　　display:none;
　　clear:both;
}
.focused{
　　color:#F00;
　　font-weight:bold;
　　font-size:120%;
}

HTML部
<div id="tab">
<div class="tab1">タブ1</div>
<div class="tab2">タブ2</div>
</div>
<div id="text">
<div class="text1">タブ1の内容。タブ1の内容。タブ1の内容。タブ1の内容。タブ1の内容。</div>
<div class="text2">タブ2の内容。タブ2の内容。タブ2の内容。タブ2の内容。タブ2の内容。</div>
</div>

説明

CSS部　#text div{display:none;}

ページを読み込んだ時、#text　div　を非表示にします。

$(‘.text1’).show();

ページを読み込んだ時、.text　を表示します。

$(‘#text div’).hide();

#text　div　を非表示にします。

$(‘.text1’).slideDown();

.text1　を上からアニメーションしながら表示します。

結果

基金訓練している場所から最寄の駅までの道案内の地図を描くという課題です。
テクニックとしては、特に新しい内容はありませんでした。

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

プログラム例

script部
$(function(){
　　$(‘li’).mouseover(function(){
　　　　$(this).css(‘backgroundPosition’,’0 -30px’);
　　});
　　$(‘li’).mouseout(function(){
　　　　$(this).css(‘backgroundPosition’,’0 0′);
　　});
});

CSS部
ul{
　　list-style-type:none;
　　margin:0;
　　padding:0;
}
li{
　　float:left;
　　margin:0 5px 0 0;
　　text-align:center;
　　line-height:30px;
　　background-image:url(../image/menuButton.png);
　　width:100px;
　　height:30px;
　　cursor:pointer;
}

HTML部
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>

使用画像

100ｘ60の画像ひとつで背景画像位置を変更して切り替えています。

説明

$(‘li’).mouseover(function(){　})

liタグ中身がマウスオーバーされた時、｛　｝内を実行します。

$(this).css(‘backgroundPosition’,’0 -30px’);

イベント対象のタグに、style="background-position:0 -30px"を書き加えます。

$(‘li’).mouseout(function(){　})

liタグ中身からマウスが離れた時、｛　｝内を実行します。

$(this).css(‘backgroundPosition’,’0 0′);

イベント対象のタグを、style="background-position:0 0"に書き変えます。

結果

change()メソッドを使って、指定した要素の内容が変更されたというイベント時の処理を設定します。

プログラム例

script部
$(function(){
　　$(‘#select’).change(function(){
　　　　var selected=$(‘#select option:selected’).val();
　　　　$(‘#result div’).hide();
　　　　$(‘.’+selected).show();
　　});
　　$(‘#select’).change();
});

ｃｓｓ部
#result div{display:none;}
img{float:left;　margin:5px;}

HTML部
<select id="select">
　　<option value="red">レッド</option>
　　<option value="blue">ブルー</option>
　　<option value="green">グリーン</option>
</select>
<div id="result">
　　
<div class="red">
　　
<img src="kero_r.png" width="50" height="50" alt="ケロレッド" />
　　鮮やかな赤ケロです。
　　
</div>
　　
<div class="green">
　　
<img src="kero_g.png" width="50" height="50" alt="ケログリーン" />
　　目に優しい緑ケロです。
　　
</div>
　　
<div class="blue">
　　
<img src="kero_b.png" width="50" height="50" alt="ケロブルー" />
　　爽やかな青ケロです。
　　
</div>
</div>

使用画像

説明

ｃｓｓ部　#result div{display:none;}

IDがresultの中のdivは、表示しません。(イメージと説明文をすべて表示しない。)

$(‘#select’).change(function(){　});

IDがselect内の内容が変更された時、{　}内を実行します。

var selected=$(‘#select option:selected’).val();

変数selectedに、IDがselectの中で選択されたoptionタグのvalueの値を取り込みます。

$(‘#result div’).hide();

IDがresultの中のdivを表示しないようにします。
(2回目以降の選択時に一度表示を消すため。)

$(‘.’+selected).show();

変数selectedに取り込まれている値をクラス名として、そのクラスの要素を表示します。
(<div class="red">など)

$(‘#select’).change();

ページが最初に読み込まれた時に、changeイベントを実行します。
(最初に読み込んだ時に一度実行しないと、cssで表示しない設定にしているので、イメージが表示されないので。)

結果

※色違いの商品を見せる時などに利用できます。

focus()メソッド、blur()メソッドを使って、指定した要素にフォーカスが当たった(外れた)というイベント時の処理を設定します。

プログラム例

script部
$(function(){
　　$(‘input’).focus(function(){
　　　　$(this).addClass(‘focused’);
　　});
　　$(‘input’).blur(function(){
　　　　$(this).removeClass(‘focused’);
　　});
});

ｃｓｓ部
.focused {background-color:#ccffff;}

HTML部
氏名：<input type="text" /><br />
メールアドレス：<input type="text" /><br />

説明

$(‘input’).focus(function(){　});

inputタグにフォーカスが当たった時、{　}内を実行します。

$(‘input’).blur(function(){　});

inputタグからフォーカスが外れた時、{　}内を実行します。

結果