プログラムの書き方を紹介してきました。jQueryにはほかにも、Webページを使いやすくする便利な機能が用意されています。今回からは、これまでに触れていない特別な機能を紹介していきましょう。
Read more: http://ascii.jp/elem/000/000/452/452106/#ixzz20PhNFh93
2.フォームに関するイベントの処理
jQueryにはフォーム部品の操作によって発生したイベントを感知する命令が用意されています。すでに前回紹介したイベントと組み合わせると、ユーザーの操作に対応するインタラクティブなフォームを実現できます。
■フォーカスを感知するfocus()
focus()は、input要素などのフォーム部品がマウスやタブキーによって選択された状態（フォーカス状態）になったことを感知し、設定された命令を実行します。他のイベントの処理と同じように、括弧内にfunction(){...}を書き、その中に実行したい命令を記述します。
$(セレクター).focus(function(){ //セレクターで指定した要素にフォーカスになった際に実行したい命令})
次のサンプルでは、input要素のvalue属性の値をval()で書き換え、「入力してください」という文字を灰色で表示しておきます。ユーザーが入力しようとinput要素をフォーカスすると、value属性の値が空になり、文字は削除されます。同時に、input要素のCSSを変更し、文字色を黒色に変更します。
▼サンプル03（スクリプト部分）
$(function(){ $("input").val("入力してください").css("color","#CCC").focus(function(){ $(this).val("").css("color","#000"); })})
▼サンプル03（(X)HTML部分）
お名前：<input type="text" value="" />
▼サンプル03（実行結果）
 | |  | サンプル03の実行画面。お名前の欄に「入力してください」と灰色の文字を表示しておき、フォーカスすると文字が削除される ただし、このサンプルではinput要素がフォーカスされるたびにフォーカスイベントの処理が実行されるため、せっかくユーザーが入力した値も削除されてしまいます。そこで、下記のようにイベント発生時に一度だけ命令を実行するone()イベントを併用して、フォーカスイベントが発生した初回のみ処理を実行するようにするとよいでしょう。
▼サンプル04（スクリプト部分）
$(function(){ $("input").val("入力してください").css("color","#CCC").one("focus",function(){ $(this).val("").css("color","#000"); })})
■フォーカスが外れたことを感知するblur()
blur()は、focus()とは逆に、フォーム部品からフォーカスが外れた（非選択状態になった）ことを感知して命令を実行します。
$(セレクター).blur(function(){ //セレクターで指定した要素のフォーカスが外れた際に実行したい命令})
サンプル05は、focus() を使った入力フォーム（サンプル04）に、メソッドチェーンで blur() を追加したものです。先ほどと同様に、input要素のvalue属性に「入力してください」という値を書き込んでおき、input要素がフォーカスされると値を削除します。フォーカスから外れると、input要素に何も入力されていなければイベントの処理を再設定し、何らかの値が入力されていれば何もしません。
フォームへの入力／未入力によって処理の内容を変えるには、「if文」というJavaScriptの構文を使います。if文についてはコラムで解説していますので参考にしてください。
▼サンプル05（スクリプト部分）
$(function(){ $("input").val("入力してください").css("color","#CCC").one("focus",function(){ $(this).val("").css("color","#000"); }).blur(function(){ if($(this).val()==""){ $(this).val("入力してください").css("color","#CCC").one("focus",function(){ $(this).val("").css("color","#000"); }) } })})
▼サンプル05（実行結果）
 | サンプル05の実行画面。input要素に「入力してください」と灰色の文字を表示しておき、フォーカスされるとinput要素の入力内容を削除して文字色を黒に変更する。フォーカスから外れたときには、input要素への入力の有無によって処理を変更する【JavaScriptワンポイントレッスン】
条件を指定するif文
blur() のサンプルでは、フォームの入力・未入力によって異なる処理をするプログラムが登場しました。ここではjQueryから少し離れて、JavaScriptの構文「if文」について解説しましょう。
if文とは、「～が……なら――を実行する」のように、特定の条件を満たしている場合にのみ命令を実行する構文です。
if(条件){ //条件が正しい場合に実行したい命令}
条件には「比較演算子」と呼ばれる記号を使って、左右の値を比較します。
 | 比較演算子 たとえば、以下のif文ではAとBの値が等しい場合にのみ、{...}内の命令が実行されます。
if(A == B){ //条件が正しい場合に実行したい命令}
先ほどのblur()のサンプル（サンプル05）から、ifが書かれている行だけを取り出して注目してみましょう。
if($(this).val()==""){
$(this)のthisは、イベントが発生した要素を取得するセレクターでした（関連記事）。この場合は、フォーカスが外れたinput要素のvalue属性の値が""、つまり何も入力されていない場合に、{...}内の命令を実行する、という意味になります。
また、if文の条件は1つだけなく、複数指定できます。複数の条件すべてを満たすときに命令を実行したい場合は && で、複数の条件のどれかが正しいときに実行したい場合は || で条件をつなげて記述します。
if(条件1 && 条件2){ //条件1と条件2が正しい場合に実行したい命令}
if(条件1 || 条件2){ //条件1か条件2どちらかが正しい場合に実行したい命令}
条件が正しくない（条件を満たしていない）場合に実行する命令も設定できます。その場合は、ifに加えてelseを記述します。
if(条件){ //条件が正しい場合に実行したい命令}else{ //条件が正しくない場合に実行したい命令}
条件が正しくない（条件を満たしていない）場合に、さらに別の条件を出すこともできます。その場合は、else ifを使って記述します。
if(条件1){ //条件1が正しい場合に実行したい命令}else if(条件2){ //条件1が正しくなく条件2が正しい場合に実行したい命令}else{ //条件1、条件2が正しくない場合に実行したい命令}
if文はjQueryを使ったプログラムを書く場合にも非常によく利用する構文ですので、しっかり覚えておきましょう。
Read more: http://ascii.jp/elem/000/000/452/452106/#ixzz20PiiWryL
■フォームの内容変更を感知するchange()
change() は、フォームの内容(フォーム部品の値）が変更されたことを感知する命令です。内容が変更されたかどうかは、該当するフォーム部品からフォーカスが外れたタイミングで判断されます。
$(セレクター).change(function(){ //セレクターで指定した要素の内容が変更された場合に実行したい命令})
次のサンプルでは、セレクトボックスの選択行が変更されると、option要素のvalue属性の値をval() で読み出し、読み出した値をspan要素に書き込みます。option要素のvalue属性には、「お名前」「会社名」というラベル名を付けてあるので、セレクトボックスの選択行に合わせてフォームの左横にあるラベルが変更されます。
▼サンプル06（スクリプト部分）
$(function(){ $("select").change(function(){ $("span").text($(this).val()) })}))
▼サンプル06（(X)HTML部分）
申し込み者：<select> <option value="お名前">個人</option> <option value="会社名">法人</option></select><p><span>お名前</span><input type="text" /></p>
▼サンプル06（実行結果）
 | サンプル06の実行画面。セレクトボックスで個人を選択すると入力ボックスの横のテキストが「お名前」に、法人を選択すると「会社名」になる■フォームの送信を感知するsubmit()
submit() は、フォームの送信ボタンが押されたときに発生するsubmitイベントの処理を設定します。
Webブラウザーは、フォームの送信ボタン（type属性が「submit」もしくは「images」のinput要素）がクリックされると、送信ボタンを包んでいるform要素に記述されているaction属性のURLに対して、form要素内のフォーム部品で入力・選択されている情報を送信します。
たとえば下記のサンプルの場合、送信ボタンがクリックされると、フォーム部品の値が「check.html」に送信されます。
▼サンプル07（(X)HTML部分）
<form action="check.html" method="post"> <dl> <dt>お名前<em>(必須)</em></dt> <dd><input type="text" name="name" /></dd> <dt>性別</dt> <dd> <input type="radio" name="gender" value="男性" id="gender_man" /> <label for="gender_man">男性</label> <input type="radio" name="gender" value="女性" id="gender_woman" /> <label for="gender_woman">女性</label> </dd> <dt>年齢</dt> <dd> <select name="age"> <option>選択してください</option> <option value="10代">10代</option> <option value="20代">20代</option> <option value="30代">30代</option> <option value="40代以上">40代以上</option> </select> </dd> <dt>スキル</dt> <dd> <input type="checkbox" name="xhtml" value="XHTML" id="xhtml" /> <label for="xhtml">XHTML</label> <input type="checkbox" name="css" value="CSS" id="css" /> <label for="css">CSS</label> <input type="checkbox" name="javascript" value="JavaScript" id="javascript" /> <label for="javascript">JavaScript</label> <input type="checkbox" name="php" value="PHP" id="php" /> <label for="php">PHP</label> </dd> <dt>コメント</dt> <dd> <textarea name="comment"></textarea> </dd> <input type="submit" value="送信" /> </dl></form>
このとき、送信ボタンが押された後、データをaction属性のURLに送信する前に設定した命令を実行するのが、submit() です。設定した命令を実行し終わると、action属性のURLにデータが送信されますが、submitの命令の中でreturn false; を追加すると送信をキャンセルできます。
以下に示すのは、サンプル07の(X)HTMLの問い合わせフォームに、チェック機能を追加するプログラムです。送信ボタンが押されると、入力必須項目である「お名前」（name属性の値が「name」のinput要素）の値をval()で取得し、入力／未入力をif文を使って調べます。未入力の場合は、input要素のborderプロパティを赤色に変更し、input要素の後ろに「お名前を入力してください」というspan要素を挿入、span要素のcolorプロパティを赤色にします。
▼サンプル07（スクリプト部分）
$(function(){ $("form").submit(function(){ if($("input[name='name']").val()==""){ $("input[name='name']").css("border","1px solid red").after("<span>お名前を入力してください</span>") $("span").css("color","red") return false; } })})
▼サンプル07（実行結果）
 | サンプル7の実行画面。見入力の状態で送信ボタンを押すとフォーム項目が赤いボーダーで囲われ、「お名前を入力してください」という文字が表示される ただ、このままだと送信ボタンを押すたびに「お名前を入力してください」というテキストがどんどん追加されてしまいます。そこで、(X)HTML/CSSを操作する命令は一度だけ実行するように改良します。
▼サンプル08（スクリプト部分）
$(function(){ $("form").submit(function(){ if($("input[name='name']").val()==""){ if($("span").css("color") != "red"){ $("input[name='name']").css("border","1px solid red").after("<span>お名前を入力してください</span>") $("span").css("color","red") } return false; } })})
このサンプルでは、2つのif文を利用しています。1つはサンプル07で使った、input要素の値を調べて処理を分岐するもの。もう1つは、span要素のcolorプロパティの値を調べて処理を分岐するものです。もとのプログラム（サンプル07）では、input要素が未入力（空）のときにspan要素を挿入してcolorプロパティを赤色に変更していました。そこで、colorプロパティの値を調べて赤色ではない場合にのみ、span要素を追加するようにしています。
Read more: http://ascii.jp/elem/000/000/452/452106/#ixzz20PkDQdEp
