Jquery初学者指南－4

 
 
 
 
   1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2:  <html>
   3:      <head>
   4:          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5:          <title>关于基本的特效</title>
   6:          <script type="text/javascript" src="lib/jquery/jquery.js"></script>
   7:          <script type="text/javascript">
   8:          $("document").ready(function(){
   9:              //加入效果特效
  10:              $("a").click(function(){
  11:                  $(this).hide("slow");
  12:                  return false;
  13:              });
  14:              //特别效果2
  15:              $("h2").toggle(function(){
  16:                  $(this).hide("slow");
  17:              },function(){
  18:                  $(this).show("fast");
  19:              });
  20:              
  21:              
  22:              //动态载入内容
  23:              $("h1").click(function(){
  24:                  $(this).load("load.html");
  25:              });
  26:   
  27:          });
  28:   
  29:          </script>
  30:      </head>
  31:      <body>
  32:          <a >this is test hide effect</a>
  33:          <br>
  34:          <h2>这是隐藏与显示</h2>
  35:          <br>
  36:          <h1>这是一个载入的内容</h1>
  37:      </body>
  38:  </html>
 
 
 
   1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2:  <html>
   3:      <head>
   4:          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5:          <title>Jquery表单  Demo</title>
   6:          <script type="text/javascript" src="lib/jquery/jquery.js">
   7:          </script>
   8:          <script type="text/javascript">
   9:              function showMsg(e)
  10:              {
  11:                  $(e.target).attr('disabled',true);
  12:                  if($('#msg').html().length==0)
  13:                  {
  14:                      $('#msg').html("<h1>Hello</h1>");
  15:                  }
  16:                  $("#msg").fadeIn();
  17:                  setTimeout(function(){
  18:                      $("#msg").fadeOut();
  19:                      $(e.target).attr("disabled",false);
  20:                  },3000);
  21:              }
  22:          $(document).ready(function(){
  23:              $("#btn").click(showMsg);
  24:          });
  25:          </script>
  26:      </head>
  27:      <body>
  28:          <div id="msg"></div>
  29:          <input type="button" value="click me" id="btn" />
  30:      </body>
  31:  </html>

posted @ 2008-12-09 10:24  楚广明  阅读(810)  评论(1)  编辑  收藏  举报