1. 簡易jquery應用
1-1 index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jquery測試</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("#tbl").hide();
$("#box").click(function(){
$("#tbl").slideDown("slow").css("border","1px solid blue").css("width","250px");
});
$("button").click(function(){
$("#tbl").fadeOut("slow");
});
$("#sex_b").click(function(){
$("body").removeClass().addClass("boy");
});
$("#sex_g").click(function(){
$("body").removeClass().addClass("girl");
});
$("input[name=my_name]").change(function(){
$("#box").prepend("嗨！" + $("input[name=my_name]").val()).css("color","red");
});
});
</script>
<style>
.boy{
background-image:url(boy.jpg);
background-position:right top;
background-repeat:no-repeat;
}
.girl{
background-image:url(girl.jpg);
background-position:right top;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box">點我填寫功能表</div>
<table id="tbl">
<tr>
<th>姓名</th>
<td><input type="text" name="my_name"></td>
</tr>
<tr>
<th>性別</th>
<td>
<input type="radio" name="sex" value="男" id="sex_b">男
<input type="radio" name="sex" value="女" id="sex_g">女
</td>
</tr>
<tr id="tel">
<th>電話</th>
<td><input type="text" name="my_tel" value="留個電話吧～"></td>
</tr>
<tr>
<td colspan=2><button>關閉</button></td>
</tr>
</table>
</body>
</html>
