越來越覺得常規javascript已經跟不上節奏了，打算學點進階的，從JQuery學起。
JQuery是一個Javascript庫，可以從JQuery.com下載，放到本地，用
<script src="jquery.js"></script>
語句來引用。如果不想下載jquery，可以引用web上的jquery庫，從google或微軟的服務器上引用他們的jquery庫。
引用google的jquery庫：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
引用微軟的jquery庫：
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
推薦引用google或者微軟的jquery庫。許多用戶在訪問其他站點時，已經從谷歌或微軟加載過 jQuery。所以結果是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。同時，大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也可以提高加載速度。
所有的JQuery函數都位於一個 document ready 函數中
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。如果在文檔沒有完全加載之前就運行函數，操作可能失敗。
Jquery選擇器就不講了。兩個要注意的地方都說完了，下面演示一個實例，我把以前用常規javascript寫的進度條用jquery有重新寫了一遍，雖說用的知識點都很簡單，但寫出來也費了我一番心思的，因為有些東西和常規javascript還是不一樣，這個放在代碼後面說。下面是進度條完整代碼。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery之進度條</title>
<!--加載google的jquer庫y-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var i = 0;//進度百分值
//為id="btn"的元素（Start按鈕）添加click事件，點擊後進度條開始增長
$("#btn").click(function(){
//為id="val"的元素（進度條div）添加動畫，在3000毫秒內進度條寬度從0px增長到300px
$("#val").animate({width:'300px'},3000);
$(this).attr("disabled",true);//禁用Start按鈕
$("#btnp").attr("disabled",false);//啟用Pause按鈕
setPercent();//調用setPercent()函數，後面的百分數開始計數
});
//百分數計數函數
function setPercent()
{
//進度條未滿的時候
if(i <= 100)
{
$("#percent").html(i+"%");//設置進度百分數的值
i = i + 1;//將進度百分值+1
st = setTimeout(setPercent,3);//每3毫秒執行一次本函數，相當於進度條每3毫秒增加1%
}
//進度條滿的時候
else
{
clearTimeout(st);//進度百分數停止增加
$("#btnc").attr("disabled",false);//啟用Clear按鈕
$("#btnp").attr("disabled",true);//禁用Pause按鈕
}
}
//為id="btnc"的元素（Clear按鈕）添加click事件，點擊後回到初始狀態
$("#btnc").click(function(){
i = 0;//進度百分值置零
$("#val").css("width","0px");//進度條置零
$("#percent").html("0%");//進度百分值置零
$("#btnp").val("Pause");//Pause按鈕value設置成"Pause"
$("#btn").attr("disabled",false);//啟用Start按鈕
$("#btnp").attr("disabled",true);//禁用Pause按鈕
$("#btnc").attr("disabled",true);//禁用Clear按鈕
});
//為id="btnp"的元素（Pause按鈕）添加click事件，點擊後進度條被暫停或繼續
$("#btnp").click(function(){
//如果按鈕值為Pause，表示按下之後暫停進度
if("Pause" == $("#btnp").val())
{
$("#val").stop();//停止進度條動畫
clearTimeout(st);//停止百分值增長
$("#btnp").val("Go on");//將按鈕值設置為Go on
$("#btnc").attr("disabled",false);//啟用Clear按鈕
}
//如果按鈕值為Go on，表示按下之後繼續進度
else
{
i = parseInt(delEnd($("#percent").html()));//獲取暫停時的百分值字符串，去掉分號，並轉為整數
var temp = 30 * (100 - i);//計算動畫剩余時間
$("#val").animate({width:'300px'}, temp);//繼續動畫
setPercent();//百分值繼續增長
$("#btnp").val("Pause");//將按鈕值設置成"Pause"
$("#btnc").attr("disabled",true);//禁用Clear按鈕
}
});
//去除百分值字符串裡面的分號的函數
function delEnd(str)
{
var temp="";
for(var i=0; i < str.length-1; i++)
{
temp=temp+str[i];
}
return temp;
}
});
</script>
</head>
<body>
<div id="bar" >
<div id="val" ></div>
</div>
<div id="percent" >0%</div>
<div ></div>
<br />
<input id="btn" type="button" value="Start" />
<br />
<input id="btnc" type="button" value="Clear" disabled />
<br />
<input id="btnp" type="button" value="Pause" disabled />
</body>
</html>
這次主要花了些時間在實現百分值的增長上，因為要用到setTimeout()函數,在jquery中，setTimeout(code,delay)裡面的code如果是函數的話只要填函數名就行了，不需要引號，不需要括號。比如，有一個function show()，設置500ms後調用show()，在jquery中應該這樣寫：
setTimeout(show, 500);
而在傳統javascript裡面卻要這樣寫：
setTimeout("show()", 500);
這一點對於setInterval()也是一樣的。
------------------------------------------分割線------------------------------------------
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用（雙色）》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡