JQuery 小练习(实例代码)


Posted in Javascript onAugust 07, 2009

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文件无错,就可以运行。
Javascript 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
js字符编码函数区别分析
Dec 28 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
javascript常用函数(1)
Nov 04 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
原生js轮播特效
May 18 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
js正确获取元素样式详解
Aug 07 #Javascript
JavaScript 乱码问题
Aug 06 #Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 #Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 #Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 #Javascript
javascript Array.remove() 数组删除
Aug 06 #Javascript
实现连缀调用的map方法(prototype)
Aug 05 #Javascript
You might like
php修改指定文件后缀的方法
2014/09/11 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP 8新特性简介
2020/08/18 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
python实现按任意键继续执行程序
2016/12/30 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python raise的基本使用
2020/09/10 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
校庆标语集锦
2014/06/25 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
小学校长开学致辞
2015/07/29 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers