繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 小练习(实例代码)
- Javascript
- 鼠标移动到一张图片时变为另一张图片
- JS画图(非VML)--兼容IE/FF
- 基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
- jQuery的一些注意
- 找到一点可怜的关于dojo资料，谢谢作者！
- JS获取IUSR_机器名和IWAM_机器名帐号的密码
- 用js计算页面执行时间的函数
- JS的IE和Firefox兼容性集锦
- 标准布局应用：对联与旗帜
- XHTML-Strict 内允许出现的标签
- 自动生成文章摘要[JavaScript 版本]
- 飞鱼(shqlsl) javascript作品集
- prototype 1.5相关知识及他人笔记
- XP折叠菜单&仿QQ2006菜单
- 用Javascript轻松制作一套简单的抽奖系统
- 使用脚本控制网页Table的显示隐藏(全代码)_AX
- Javascript代码混淆综合解决方案-Javascript在线混淆器
- 用 JavaScript 迁移目录
- 用简单的脚本实现一款漂亮的下拉菜单
- 建立完全独立的JS对象
Javascript 中的 JQuery 小练习(实例代码)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 261 ::
收藏到网摘: n/a
空闲时候写的一些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文件无错，就可以运行。
评论 (0) All
