:::
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.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tbl').hide();
$('.box').click(function(){
$('#tbl').fadeIn('slow');
$('.box').css("color","blue").css("font-size","2em");
});
$('button').click(function(){
$('#tbl').fadeOut('slow');
$('.box').css("color","red").css("font-size","1em");
});
$('#my_name').change(function(){
$('.box').append("嗨！" + $('#my_name').val());
});
});
</script>
</head>
<body>
<div class='box'>
點我填寫功能表
</div>
<table id='tbl'>
<tr>
<th>姓名</th>
<td><input type="text" name="my_name" id="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>
