フォームについて ※【jQuery】 その①

→フォームについて　※【jQuery】　その②
フォームについて　※【jQuery】　その③

◆val

入力されている値や選択されている値を取得・変更

＜例＞
$("#mail_ad").text($("input").val()+"に送信します。")；

mail_adのinputの入力されているのを習得して、『に送信します。』と付け加えて変更される


＜例＞
$("#kakunin").text($("select").val())；

kakuninのテキストがselectで選択されている値に変更される。※テキストエリアでもできます。



.val()→値を取得

.val(””)→値が空

◆val（""）

入力された値を削除する、クリアする。

クリアボタンをつくって、そのボタンを押すとクリアされる。
※＜/form＞タグの中に＜button＞をいれるとファイルがありませんとでるので注意
＜button＞タグが飛んでしまうのは、type=""を指定していないから
”button”⇒ボタンとしてだけの機能
”submit”⇒実行ボタン
"reset”⇒リセットボタン

◆focus

フォーム部分が選択（マウスやTabで）されたのを感知して処理を実行してくれる
★メソッドチェーンと＄（this）をつかう

＜例＞
*html側*
＜p id="name"＞名前＜input type="text"＞＜/p＞

＄("#name input").val（”ここに入力”）.css("color","#cccccc")
.focus(function(){
$(this).val("").css("color","000000")});
フォーカスされたら処理してね

※CSSを操作するときは、スタイルシートで操作されるCSSをつくっとかないと動かない。
※ドットで繋がってるのがメソッドチェーン

フォームの中に”ここに入力”という文字を薄く入れといて、
入力しようとすると消えて、さらに、入力した文字は濃くなっている


注：フォーカスされるたびに消えてしまう。のをどうにかするために…↓↓
一回のフォーカスのみにしてね【one】をつかう。1回だけ
フォーカスの部分をone();の中に入れる
【one】のかき方はこちら→

イベント発生の条件→focus
イベント発生した時の処理→val（””）と色変更


＄("#name input").val("ここに入力").css("color","#cccccc")
.one("focus",function(){$(this).val("").css("color","000000")}）;

.one("発生条件",function(){発生時の処理}）;

◆blur（ブラー）

フォーム部分の選択（マウスやTabで）がは外れたのを感知して処理を実行してくれる


*どんな時に使うのか？
フォーカスが外れたときの処理を変えたいとき。

⇒フォームの入力/未入力によって処理を変えたい時は

if文をつかう。if文について→

もし、フォーカスされても入力されなかったら、文字表示しといてね。
　↓↓↓
※メソッドチェーンで↑のｊｓ（focus）につなげます。
.bluer(function（）｛

if（$(this).val()==""){　//もしフォームが空だったら
※同じ処理なので↑のｊｓ（focus）をそのままコピペします。
}

｝)；

◆change

入力された内容を感知する（フォーカスが外れたら感知します。）

*どんな時に使うのか？
選択が変更されたら、テキストの項目を変更したいとき。


セレクトボックスと一緒につかいます。
↓↓↓

optionタグにvalueに入れたテキストを読み込む

*ｈｔｍｌ側*
＜select＞
＜option value="いちばん"＞いちばん＜/option＞
＜option　value="にばん"＞にばん＜/option＞
＜option　value="さんばん"＞さんばん＜/option＞
＜/select＞

＜ｐ＞＜span＞いちばん ＜/span＞＜input・・・省略


セレクトボックスが変更されたら、セレクトボックスのvalueを＃Chanのspanにテキストかえてね　
　↓↓↓↓

*ｊｓ側*
＄(function（）｛
＄(”select”).change(function（）｛
＄(”＃chan span”).text(＄(this).val（）);
｝);

｝);

※テキストを変更するだけでなく、追加して項目を増やすこともできる。と思う