:::

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>

:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D26%26tbdsn%3D745

書籍目錄

展開 | 闔起

線上使用者

39人線上 (8人在瀏覽線上書籍)

會員: 0

訪客: 39

更多…