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 相关文章推荐
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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
php&amp;java(二)
2006/10/09 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
常用的javascript function代码
2008/05/23 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
JS求平均值的小例子
2013/11/29 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
教你用Python创建微信聊天机器人
2020/03/31 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
大学生个人先进事迹材料范文
2014/05/03 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python