JQuery 小练习(实例代码)

【 tulaoshi.com - Web开发 】

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文件无错，就可以运行。