【jQuery入門】テキスト入力欄やセレクトボックスでイベント を使ってみよう

下記のようなテキスト入力欄やセレクトボックスがあったとします。このようなフォームで使えるイベント をいくつか見ていきます。

<input type="texat" id="name">
<select id="members" name="members">
　　<option>a</option>
　　<option>b</option>
　　<option>c</option>
</select>

focusメソッド

テキスト入力欄などにフォーカスがあたった際のイベントを指定できます。

$('#name')
.focus(function(){
$(this).css('background','red');
})

blurメソッド

フォーカスが外れた際のイベントを指定できます。

$(function(){
$('#name')
.focus(function(){
$(this).css('background','red');
})
.blur(function(){
$(this).css('background','white');
})

 change

セレクトボックスの値が変わった際のイベントを指定できます。

$(function(){
　$('#members').change(function(){
　alert('changed!');
　})
});