授業第6回
面白いjQueryの解説を見つけました！ここをクリック
１、jQueryでフォームを操作する
問題１ ボタンをクリックしたら、下のDVIの中にテキストボックスの値を表示する
問題２ テキストボックスのサイズを変える
問題３ テキストボックスを増やす
問題４ テキストボックスの入力値を検査する
１〜４の解答例
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>ふるさと紹介</title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//イベントは基本的にreadyブロックの中に書く
$(function(){
$("#disp").click(function(){
$("#res").css({fontSize:"36px"});
$("#res").html($(this).prev().val());
});
$("#disp1").click(function(){
$("#input1").attr("size",30);
$("#res1").html("変更しました");
});
$("#disp2").click(function(){
$("#incf").append("<input type='text' size='30' />");
$("#res2").html("変更しました");
});
$("#disp3").click(function(){
if($("#input3").val().match(/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/g)){
$("#res3").html("携帯番号です");
}else{
$("#res3").html("携帯番号でない");
}
if($("#input3").val().match(/^[a-zA-Z0-9]+@[a-z]+\.[a-z]+\.[a-z]+$/g)){
$("#res4").html("メールです");
}else{
$("#res4").html("メールでない");
}
});
});
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>問題１</legend>
<input type="text" size="10" value="" id="input" />
<input id="disp" type="button" value="テキストボックスの値を下に表示" />
</fieldset>
</form>
<div id="res"> </div>
<form action="">
<fieldset>
<legend>問題２</legend>
<input type="text" size="10" value="" id="input1" />
<input id="disp1" type="button" value="サイズ変更" />
</fieldset>
</form>
<div id="res1"> </div>
<form id="incf" action="">
<fieldset>
<legend>問題３</legend>
<input type="text" size="10" value="" id="input2" />
<input id="disp2" type="button" value="テキストボックスを増やす" />
</fieldset>
</form>
<div id="res2"> </div>
<form action="">
<fieldset>
<legend>問題４</legend>
<input type="text" size="30" value="" id="input3" />
<input id="disp3" type="button" value="値を検査" />
</fieldset>
</form>
<div id="res3"> </div>
<div id="res4"> </div>
</body>
</html>
５〜１０の解答例
問題５ 二つ前と二つ後のテキストボックスの値を表示する
問題６ テキストボックスに入力されたら値を表示する
問題７ チェックボックスが何個選択されているか？
問題８ 選択しているチェックボックスの選択をすべて解除するボタン
問題９ ラジオボタンをチェックして、その値を下に表示する
問題１０ テキストボックスに入力されている数字を合計して、下に表示する
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//イベントは基本的にreadyブロックの中に書く
$(function(){
$("#disp").click(function(){
var a1=$("#input3").prev().prev().prev().prev().val();
var a2=$("#input3").next().next().next().next().val();
$("#res").text("a1="+a1+" a2=" + a2);
});
$("#input6,#input7").blur(function(){
$("#res1").text($(this).val());
});
$("#disp2").click(function(){
var cnt=$("input:checked").length;
$("#res2").text("選ばれている数= "+cnt);
});
$("#disp3").click(function(){
$("input:checked").attr("checked",false);
});
$("input:radio").click(function(){
$("#res3").text($(this).val());
});
$("#disp4").click(function(){
var a=$(".sum");
var b=0;
$.each(a,function(){
b+=parseInt($(this).val());
});
$("#res4").text("合計= "+b);
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<form action="">
<fieldset>
<legend>問題５</legend>
<input type="text" size="10" value="" id="input1" /><br />
<input type="text" size="10" value="" id="input2" /><br />
<input type="text" size="10" id="input3" value="ここから"/><br />
<input type="text" size="10" value="" id="input4" /><br />
<input type="text" size="10" value="" id="input5" /><br />
<input id="disp" type="button" value="二つ前と二つ後のテキストボックスの値を表示する" />
</fieldset>
</form>
<div id="res"> </div> <form action="">
<fieldset>
<legend>問題６（何か入力して移動後）</legend>
<input type="text" size="10" value="ここに入力" id="input6" />
<input type="text" size="10" value="" id="input7" />
</fieldset>
</form>
<div id="res1"> </div> <form action="">
<fieldset><legend>問題７</legend>
<input type="checkbox" value="山下" />
<input type="checkbox" value="林" />
<input type="checkbox" value="田中" />
<input type="checkbox" value="モリタ" />
<input type="checkbox" value="楠" />
<input id="disp2" type="button" value="チェックボックスが何個チェックされているか" />
</fieldset>
</form>
<div id="res2"></div>
<form action="">
<fieldset><legend>問題８</legend>
<input type="checkbox" value="山下" />
<input type="checkbox" value="林" />
<input type="checkbox" value="田中" />
<input type="checkbox" value="モリタ" />
<input type="checkbox" value="楠" />
<input id="disp3" type="button" value="チェックボックス選択解除" />
</fieldset>
</form>
<form action="">
<fieldset><legend>問題９</legend>
<input type="radio" value="山形" name="r1"/><label>山形</label>
<input type="radio" value="山下" name="r1"/><label>山下</label>
<input type="radio" value="林" name="r1"/><label>林</label>
<input type="radio" value="福井" name="r1"/><label>福井</label>
<input type="radio" value="今津" name="r1"/><label>今津</label>
</fieldset>
</form>
<div id="res3"></div>
<form action="">
<fieldset>
<legend>問題10</legend>
<input type="text" size="10" value="" class="sum" /><br />
<input type="text" size="10" value="" class="sum"/><br />
<input type="text" size="10" value="" class="sum"/><br />
<input type="text" size="10" value="" class="sum"/><br />
<input type="text" size="10" value="" class="sum"/><br />
<input id="disp4" type="button" value="数値の合計" />
</fieldset>
</form>
<div id="res4"></div>
</body>
</html>
課題１
上の例をjqQuestion1.html〜jqQuestion10.htmlとして、public_html/tomcat/mobile2011に保存してください。
（最初は答えを見ずに、問題を考えてみてください）
これは評価課題としますので、リンクを作って公開します。
jQueryのまとめとなる課題ですので、各自必ず作ってください。