jQuery入門 - イベント処理
イベント処理
jQueryを使って様々なイベントを処理する方法を学びます。
タスク
クリックイベント
click()メソッドを使ってクリックイベントを処理します
マウスイベント
mouseenter()とmouseleave()メソッドを使ってマウスイベントを処理します
フォームイベント
on()メソッドを使ってフォームの入力イベントを処理します
ヒント
jQueryのイベントメソッドを使って要素の操作を実装しましょう。
参考コード
$(document).ready(function() {
// 1. クリックイベント
$('#click-container .box').click(function() {
$(this).toggleClass('active');
$('#click-log').text('クリックされました: ' + new Date().toLocaleTimeString());
});
// 2. マウスイベント
$('#mouse-container .box')
.mouseenter(function() {
$(this).addClass('active');
$('#mouse-log').text('マウスが入りました: ' + new Date().toLocaleTimeString());
})
.mouseleave(function() {
$(this).removeClass('active');
$('#mouse-log').text('マウスが出ました: ' + new Date().toLocaleTimeString());
});
// 3. フォームイベント
$('#name-input').on('input', function() {
$('#form-log').text('名前が変更されました: ' + $(this).val());
});
$('#message-input').on('input', function() {
$('#form-log').text('メッセージが変更されました: ' + $(this).val());
});
});