■リセットボタンを選択する:reset
:resetは、type属性の値が「reset」のinput要素(リセットボタン)だけを選択するフィルターです。
次のサンプルでは、リセットボタンが押されたときに「<p>入力内容を初期化しました</p>」という(X)HTMLをボタンの後ろに挿入します。ボタンを押すたびに(X)HTMLが繰り返し挿入されないように、one() を使って一度だけ実行されるようにしています。
▼サンプル17(スクリプト部分)
$(function(){
$(":reset").one("click",function(){
$(this).after("<p>入力内容を初期化しました</p>")
})
})
▼サンプル17((X)HTML部分)
<form action="#">
<dl>
<dt>お名前<em>(必須)</em></dt>
<dd><input type="text" name="name" /></dd>
<dt>コメント</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<dd><input type="reset" src="button.jpg" alt="リセット" /></dd>
</dl>
</form>
▼サンプル17(実行結果)
![]() |
|---|
| サンプル17の実行画面。リセットボタンを押すと一度だけ「入力内容を初期化しました」と表示する |
■ボタンを選択する:button
:buttonは、button要素を選択するフィルターです。
button要素は、submit要素のようにクリックされるとform要素のaction属性に記述されたURLにフォームデータを送信します。次のサンプルでは、2つのinput属性に入力された値をif文を使ってチェックし、値が異なる場合にはem要素に「メールアドレスが異なります。」と書き込み、return false; でフォームの送信を中止します。
▼サンプル18(スクリプト部分)
$(function(){
$(":button").click(function(){
if($("input[name='mail']").val() != $("input[name='check']").val()){
$("em").text("メールアドレスが異なります。");
return false;
}
})
})
▼サンプル18((X)HTML部分)
<form action="check.html">
<dl>
<dt>メールアドレス</dt>
<dd><input type="text" name="mail" /></dd>
<dt>メールアドレス<em>(確認)</em></dt>
<dd><input type="text" name="check" /></dd>
<dd><button>確認</button></dd>
</dl>
</form>
▼サンプル18(実行結果)
![]() |
|---|
| サンプル18の実行画面。2つのフォームの内容をチェックし、一致しない場合はエラーを表示する |
■ファイル選択フォームを選択する:file
:fileは、type属性の値が「file」のinput要素(ファイル選択フォーム)を選択するフィルターです。
次のサンプルでは、ファイル選択フォームにマウスカーソルを重ねると、「<p>アップロードできるファイルは300kbまでです</p>」という(X)HTMLを挿入します。マウスカーソルが外れると、挿入したp要素は取り除きます。
▼サンプル19(スクリプト部分)
$(function(){
$(":file").mouseover(function(){
$(this).after("<p>アップロードできるファイルは300kbまでです</p>")
}).mouseout(function(){
$("p").remove()
})
▼サンプル19((X)HTML部分)
写真:<input type="file">
▼サンプル19(実行結果)
![]() |
|---|
| サンプル19の実行画面。ファイル選択フォームにマウスカーソルを重ねるとメッセージが表示される |
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery+CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応!jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー!プリロード対応版
- この連載の一覧へ




















![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)




