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