JQuery 小练习(实例代码)

  1、按钮倒数10秒之后才能点击。这个效果一般在一些论坛注册时候用到比较多,废话少说,直接上代码:

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title></title>

  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>

  <script type="text/javascript">

  var timeOut;

  var count = 10;

  $(function() {

  $("#btnSubmit").attr("disabled", "disabled");

  $("#btnSubmit").val("确(" + count.toString() + ")定");

  timeOut = setTimeout(ButtonCount, 1000);

  });

  ButtonCount = function() {

  if (count == 0) {

  $("#btnSubmit").attr("disabled", "");

  $("#btnSubmit").val("确 定");

  clearTimeout(timeOut);

  }

  else {

  count--;

  $("#btnSubmit").attr("disabled", "disabled");

  $("#btnSubmit").val("确(" + count.toString() + ")定");

  setTimeout(ButtonCount, 1000);

  }

  }

  </script>

  </head>

  <body>

  <input type="button" value="确 定" id="btnSubmit" />

  </body>

  </html>

  2、即点即改,这个效果一个多月前还没有学jquery时觉得好酷,现在觉得其实也非常简单的东西,可以看出jquery在前端效果上大大简化了编写难度,代码如下:

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title></title>

  <style type="text/css">

  .caneditBg

  {

  background-color:Gray;

  }

  </style>

  <script src="js/jquery.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(function() {

  $(".canedit").each(function() {

  $(this).bind("dblclick", function() {

  var html = $(this).html();

  var textarea = "<textarea name='temTextarea' id='temTextarea' onblur='saveText(this)' >" + html + "</textarea>";

  $(this).empty().html(textarea);

  });

  $(this).mouseenter(function() { $(this).addClass("caneditBg") }).mouseleave(function() { $(this).removeClass("caneditBg") });

  });

  });

  saveText = function(o) {

  var text = $(o).val();

  $(o).parent().empty().html(text);

  }

  </script>

  </head>

  <body>

  <div class="canedit">

  即点即改!

  </div>

  <div>

  </div>

  </body>

  </html>

  以上代码只需要直接copy到html文件,并且保证导入jquery.js文件无错,就可以运行。