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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
vue插槽slot的理解和使用方法
2019/04/03 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python re模块的高级用法详解
2018/06/06 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
基于python3实现倒叙字符串
2020/02/18 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
求职信范文怎么写
2014/01/29 职场文书
领导干部考察材料
2014/02/08 职场文书
课外小组活动总结
2014/08/27 职场文书
自我检讨报告
2015/01/28 职场文书
交通安全月活动总结
2015/05/08 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技