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 相关文章推荐
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
Javascript学习指南
Dec 01 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
微信小程序 form组件详解
Oct 25 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
jquery append与appendTo方法比较
May 24 jQuery
用Golang运行JavaScript的实现示例
Nov 25 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对象转换为数组函数(递归方法)
2012/02/04 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
php数据库备份还原类分享
2014/03/20 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Js动态创建div
2008/09/25 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
Python星号*与**用法分析
2018/02/02 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
普天C++笔试题
2016/03/20 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
党校学习个人总结
2015/02/15 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
导游词之千岛湖
2019/09/23 职场文书