JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青
是一個高效率和簡潔的JavaScript函數庫 jQuery 是一個高效率和簡潔的JavaScript函數庫 提供網頁設計者更簡潔的方式，來撰寫JavaScript程式碼和擴充JavaScript的功能。 傳統JavaScript程式碼建立的功能，使用jQuery通常只需1/4的程式碼長度就可以達成 強調JavaScript與HTML之間的交互作用，可以 處理DOM，走訪網頁元素來更改外觀 新增特效、事件處理、動畫 支援Ajax來加速Web應用程式開發
大綱 jQuery下載與使用 jQuery Selectors jQuery與CSS jQuery特效
1. jQuery下載與使用 在jQuery官方網站可以下載jQuery最新版 若不要自行下載檔案，可直接使用Google提供的網路節點 http://jquery.com/download/ 建議使用1.10.2版，目前2.x版不支援IE 6, 7, 8 選擇Download the compressed, production jQuery 1.10.2，下載jquery-1.10.2.min.js檔案 將檔案置於HTML網頁的同一個資料夾，在HTML網頁<head>標籤的<script>子標籤含括jQuery函數庫 <head> <script src="jquery-1.10.2.min.js"></script> </head> 若不要自行下載檔案，可直接使用Google提供的網路節點 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>
jQuery實例 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html> 滑鼠按一下
The Document Ready Event allows us to execute a function when the document is fully loaded (文件完全載入後，執行此函數)： $(document).ready(function(){ // jQuery methods go here... }); 也可簡化為： $(function(){ 「$」符號：jQuery物件的別名 參數doucment是指HTML網頁本身 jQuery基本語法: $(selector).action()
jQuery Event Methods http://www.w3schools.com/jquery/jquery_events.asp 參考資料 http://www.w3schools.com/jquery/jquery_ref_events.asp
2. jQuery Selectors http://www.w3schools.com/jquery/jquery_selectors.asp The element Selector You can select all <p> elements on a page like this: $("p") The #id Selector The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. The .class Selector The jQuery class selector finds elements with a specific class. 參考資料 http://www.w3schools.com/jquery/jquery_ref_selectors.asp
More Examples of jQuery Selectors
3. jQuery與CSS http://www.w3schools.com/jquery/jquery_css_classes.asp addClass() Adds one or more classes to the selected elements removeClass() Removes one or more classes from the selected elements toggleClass() Toggles between adding/removing classes from the selected elements css() Sets or returns the style attribute
toggleClass實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Toggle class</button> </body> </html>
4. jQuery特效 分類 特效名稱 說明 基本 show() 顯示元素 hide() 隱藏元素 toggle() 按一下可以切換顯示或隱藏元素 滑動 slideDown() 元素向下滑動 slideUp() 元素向上滑動 slideToggle() 切換元素向上和向下滑動 淡入淡出 fadeIn() 淡入元素，即慢慢變成不透明 fadeOut() 淡出元素，即慢慢變成透明 fadeToggle() 切換淡入與淡出元素 fadeTo() 元素慢慢變成指定的透明度
jQuery特效基本語法 $(選擇器).特效方法(持續時間, 回撥函數) 持續時間(Duration)：動畫持續的時間 Fast(相當200毫秒)、normal(相當400毫秒)和slow(相當600毫秒) 或指定毫秒（例如：100、250和500等值）。 回撥函數(Callback)：當特效結束後呼叫的函數。 jQuery 1.4版之後新增delay()方法，可以讓我們延遲一段時間才執行之後的特效方法例如： $('.more').delay("500"); 串聯多種特效 可以在同一行程式碼替選擇元素新增多種方法，例如： $(this).hide().delay("1500") .fadeIn('1500').delay("1500") .fadeOut('1500').delay("1500")
Hide與Toggle實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#p1").toggle(); $("#p2").hide(); }); </head> <body> <button>Toggle</button> <p id="p1">First</p> <p id="p2">Second</p> </body> </html>
slideToggle實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> </body> </html>
fadeToggle實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/out boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html>
Callback實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); </head> <body> <button>Hide</button> <p>This is a paragraph with little content.</p> </body> </html>
Animate(動畫效果)實例 $(selector).animate({params},speed,callback); <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); </head> <body> <button>Start Animation</button> <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>
參考資料 網路資源 http://www.w3schools.com/jquery/