JQuery 小練習(xí)(實(shí)例代碼)
更新時(shí)間：2009年08月07日 22:52:20 作者：
空閑時(shí)候?qū)懙囊恍﹋query小代碼，雖然就幾分鐘完成的小代碼，但每天保持練習(xí)，不至于頭腦會(huì)生銹；
1、按鈕倒數(shù)10秒之后才能點(diǎn)擊。這個(gè)效果一般在一些論壇注冊(cè)時(shí)候用到比較多，廢話少說(shuō)，直接上代碼：
<!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、即點(diǎn)即改，這個(gè)效果一個(gè)多月前還沒有學(xué)jquery時(shí)覺得好酷，現(xiàn)在覺得其實(shí)也非常簡(jiǎn)單的東西，可以看出jquery在前端效果上大大簡(jiǎn)化了編寫難度，代碼如下：
<!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">
即點(diǎn)即改！
</div>
<div>
</div>
</body>
</html>
以上代碼只需要直接copy到html文件，并且保證導(dǎo)入jquery.js文件無(wú)錯(cuò)，就可以運(yùn)行。
復(fù)制代碼 代碼如下:
<!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、即點(diǎn)即改，這個(gè)效果一個(gè)多月前還沒有學(xué)jquery時(shí)覺得好酷，現(xiàn)在覺得其實(shí)也非常簡(jiǎn)單的東西，可以看出jquery在前端效果上大大簡(jiǎn)化了編寫難度，代碼如下：
復(fù)制代碼 代碼如下:
<!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">
即點(diǎn)即改！
</div>
<div>
</div>
</body>
</html>
以上代碼只需要直接copy到html文件，并且保證導(dǎo)入jquery.js文件無(wú)錯(cuò)，就可以運(yùn)行。
相關(guān)文章
利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見到過(guò)吧,下面為大家詳細(xì)介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2013-12-12
使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊(cè)
這篇文章主要介紹了使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊(cè)的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery中$(function() {});問(wèn)題詳解
$(function() {});是$(document).ready(function(){ })的簡(jiǎn)寫，最早接觸的時(shí)候也說(shuō)$(document).ready(function(){ })這個(gè)函數(shù)是用來(lái)取代頁(yè)面中的window.onload;但是今天發(fā)現(xiàn) 好像不是這樣回事！是在做一個(gè)頁(yè)面載入效果時(shí)發(fā)現(xiàn)的！2015-08-08
小編收集了13個(gè)有用的CSS3,HTML5和jQuery搜索表單腳本來(lái)幫助大家從頭開始創(chuàng)建一個(gè)搜索框。希望能夠幫助到大家，讓我們一起來(lái)看看吧！2014-12-12
在IE10以上版本，微軟為了提高IE輸入框的便利性，增加了文本內(nèi)容全部刪除和密碼眼睛功能，但是有些時(shí)候打開新的頁(yè)面里，輸入框卻被鎖定無(wú)法編輯，需要刷新一下頁(yè)面，或者如果輸入框有內(nèi)容需要點(diǎn)擊一下輸入框后面的叉叉后才能輸入，怎么解決呢，下面小編給大家解答下2016-10-10
jquery實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航
這篇文章主要介紹了jquery動(dòng)畫特效結(jié)合css實(shí)現(xiàn)側(cè)邊彈出的垂直導(dǎo)航的方法及代碼分享,需要的朋友可以參考下2014-12-12
jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果示例
這篇文章主要介紹了jQuery使用animate實(shí)現(xiàn)ul列表項(xiàng)相互飄動(dòng)效果,結(jié)合實(shí)例形式分析了jQuery使用animate動(dòng)畫切換的操作技巧,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)?lái)一篇Jquery基礎(chǔ)之事件操作詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要給大家分享了js實(shí)現(xiàn)碰撞檢測(cè)特效代碼，主要就是使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版的碰撞檢測(cè)，有需要的小伙伴可以參考下2016-10-10
通過(guò)jquery和css相結(jié)合的方式實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊圖片彈出畫廊切換特效，效果逼真，下面小編把源碼分享給大家供大家參考2015-11-11