:::

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>


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

28人線上 (5人在瀏覽線上書籍)

會員: 0

訪客: 28

更多…