JQuery 小练习(实例代码)

175 阅读 0 评论 116 点赞

我是靠谱客的博主纯真芝麻，最近开发中收集的这篇文章主要介绍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> 