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 @   楚广明  阅读(813)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手