[jquery]event

jqueryのeventに関するビデオ

【YouTube - jQuery Events Part 1】[YOUTUBE]

これからは何するにしても
『ビデオ』は重要だなぁ
とてもわかりやすいですよね。

自分もYouTubeチャンネルやってますが
チュートリアルビデオって難しい。
『何を伝えるために』
↓
『何を見せるのか』
なんですけどね

ちなみに
こんな感じですね

「jquery_event.html.txt」をダウンロード[LINK]

「jquery_event.html」[LINK]
 

<ul class="boxes">

<li class="box_1">1</li>
<li class="box_2">2</li>
<li class="box_3">3</li>
<li class="box_4">4</li>

<li class="box_5">5</li>
<li class="box_6">6</li>
<li class="box_7">7</li>
<li class="box_8">8</li>

</ul> 
<div class="clear"></div>
</div>

//ボックス１にクリックイベントを付ける
$('.box_1').bind('click',function(){
alert("1番をクリックしました");
});

//ボックス２にクリックイベントを付ける
$('.box_2').click(function(){
prompt("2番をクリックしました");
});

//ボックス３にクリックで背景色を変える
$('.box_3').click(function(){
$(this).css('background','#e8f3fe');
});

//ボックス4にマウスオーバーで背景色を変える
$('.box_4').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
});
});

//ボックス５にクリックで隠す
$('.box_5').click(function(){
$('.box_5').hide();
});

//ボックス６にダブルクリックでテキストを変える
$('.box_6').dblclick(function(){
$(this).text('123456');
});

//ボックス7にクリックでカウントアップ
var counti = 9;
$('.box_7').click(function(){
$('.box_5').text(++counti);
$('.box_6').text(++counti);
$('.box_7').text(++counti);
$('.box_8').text(++counti);
});

//ボックス８にマウスオーバーとマウスアウト
$('.box_8').mouseover(function(){
$(this).css('background','#e8f3fe');
$(this).css('width','50px');
$(this).mouseout(function(){
$(this).css('background','#9cc3eb');
$(this).css('width','180px');
});
})