JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 網路參考資源： http://www.w3schools.com/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.11.1版，目前2.x版不支援IE 6, 7, 8 選擇Download the compressed, production jQuery 1.11.1，下載jquery-1.11.1.min.js檔案 將檔案置於HTML網頁的同一個資料夾，在HTML網頁<head>標籤的<script>子標籤含括jQuery函數庫 <head> <script src=" jquery-1.11.1.min.js"></script> </head> 若不要自行下載檔案，可直接使用Google提供的網路節點 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>
jQuery實例 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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
jQuery Event Methods hover 參考資料 The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element. Example: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); 參考資料 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hover
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.11.1/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.11.1/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.11.1/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.11.1/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>
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>