09jQuery基礎動畫與特效-NCNUMoodle課程.pptVIP

JQuery基礎與動畫、特效 靜宜大學 資管系 楊子青 jQuery 是一個高效率和簡潔的JavaScript函數庫 提供網頁設計者更簡潔的方式，來撰寫JavaScript程式碼和擴充JavaScript的功能。 傳統JavaScript程式碼建立的功能，使用jQuery通常只需1/4的程式碼長度就可以達成 強調JavaScript與HTML之間的交互作用，可以 處理DOM，走訪網頁元素來更改外觀 新增特效、事件處理、動畫 支援Ajax來加速Web應用程式開發 大綱 jQuery下載與使用 jQuery Selectors jQuery與CSS jQuery特效 1. jQuery下載與使用 在jQuery官方網站可以下載jQuery最新版 /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提供的網路節點 head script src=/ajax/libs/jquery/1.11.1/jquery.min.js/script script jQuery實例 !DOCTYPE html html head script src=/ajax/libs/jquery/1.11.1/jquery.min.js /script script $(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); }); /script /head body pIf you click on me, I will disappear./p pClick me away!/p pClick 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 methods go here... }); 「$」符號：jQuery物件的別名 參數doucment是指HTML網頁本身 jQuery基本語法: $(selector).action() jQuery Event Methods /jquery/jquery_events.asp 參考資料 /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!); }); 參考資料 /jquery/tryit.asp?filename=tryjquery_hover 2. jQuery Selectors /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 fin