A quick review of jQuery
1. 下載 jQuery
可以通過下面的標記把 jQuery 新增到網頁中，請注意，<script> 標籤應該位於頁面的 <head> 部分。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>法②從 Google 或 Microsoft 載入 CDN jQuery 核心檔案（推薦，可提供使用者的載入速度）：
//使用 Microsoft 的 CDN <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
2. 語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行“操作”（actions）
//演示了 jQuery 的 hide() 函式，隱藏了 HTML 文件中所有的 <p> 元素。 <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head>
知識點：選擇器 （元素、屬性、CSS）
//jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
……
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
……
3. jQuery 效果
3.1 隱藏和顯示
$(selector).hide(speed,callback);
可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。
使用 toggle() 方法來切換 hide() 和 show() 方法：
……
$("button").click(function(){
$("p").toggle(1000); //速度值為1000毫秒
});
……3.2 淡入淡出效果
jQuery 擁有下面四種 fade 方法：
- fadeIn() // 淡入
- fadeOut() // 淡出
- fadeToggle() // 淡入淡出切換
- fadeTo() // 淡入到指定透明度，必須規定效果時長
//下面的例子演示了帶有不同引數的 fadeIn() 方法：
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});//不透明度值介於 0 與 1 之間
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo(3000,0.7);
});3.3 滑動
jQuery 擁有以下滑動方法：
- slideDown() //向下滑動元素
- slideUp() //向上滑動元素
- slideToggle() //向上下切換滑動元素
語法：$(selector).slideDown(speed,callback);
3.4 動畫
jQuery animate() 方法用於建立自定義動畫，語法：$(selector).animate({params},speed,callback);
必需的 params 引數定義形成動畫的 CSS 屬性。記得更改元素的position屬性。
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>請注意，生成動畫的過程中可同時使用多個屬性：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}); 當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 外掛。
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px', //可使用相對值
width:'+=150px'
});
});您甚至可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
}，3000);
});使用佇列功能
//把 <div> 元素移動到右邊，然後增加文字的字號：
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
3.5 jQuery stop() 停止動畫
語法：$(selector).stop(stopAll,goToEnd);
可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。
因此，預設地，stop() 會清除在被選元素上指定的當前動畫。
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">開始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"開始"</b> 按鈕會啟動動畫。</p>
<p><b>"停止"</b> 按鈕會停止當前活動的動畫，但允許已排隊的動畫向前執行。</p>
<p><b>"停止所有"</b> 按鈕停止當前活動的動畫，並清空動畫佇列；因此元素上的所有動畫都會停止。</p>
<p><b>"停止但要完成"</b> 會立即完成當前活動的動畫，然後停下來。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
4. JQuery Callback函式
當動畫 100% 完成後，即呼叫 Callback 函式。
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
5. jQuery - Chaining
Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
6. jQuery HTML （待……）
三個簡單實用的用於 DOM 操作的 jQuery 方法：
- text() - 設定或返回所選元素的文字內容
- html() - 設定或返回所選元素的內容（包括 HTML 標記）
- val() - 設定或返回表單欄位的值