Recommended
More Related Content
Viewers also liked
Similar to jQuery 把玩 SVG 初體驗
Similar to jQuery 把玩 SVG 初體驗 (20)
jQuery 把玩 SVG 初體驗
- 1. jQuery 把玩 SVG 初體驗 ADAM HUNG MAGIC.MUSIC@GMAIL.COM
- 2. jQ學習資源 - I 網站 jQuery 官網: jquery.com jQuery UI: jqueryui.com jQuery Mobile: jquerymobile.com W3C中文網: w3school.com.cn/jquery/ Jquery123: jquery123.com 菜鳥教程: runoob.com
- 3. jQ學習資源 - II 簡報 jQuery Mobile 框架介紹與使用: slideshare.net/EZoApp/jquery-mobile-36199159 影片 邊做邊學jQ: youtube.com/playlist?list=PLpRG_zGZAavj3aztURYe_Sq286-Sl8PtR 書籍 你不能錯過的jQuery指南: books.com.tw/products/0010677441
- 4. jQ設定 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <head> <script src="https://www.google.com/jsapi"></script> <script> google.load("jquery", "1.11.3"); </script> </head> 或可以這樣寫
- 5. jQ基本架構 jQuery(document).ready(function() { // 要執行什麼寫在這 }); 用$取代jQuery字串讓語法更簡潔 $(document).ready(function() { alert(“測試成功"); });
- 6. jQ基礎選擇器 – Basic Selector 語法 範例 說明 * $( ' * ' ) All Selector - 選取所有文件中的元素 .class $( ' .myClass ' ) Class Selector - 選取所有套用指定 CSS 類別 的元素 tag $ ( ' div ' ) Element Selector - 選取類型為指定 tag 的元素 ID $ ( ' #myId ' ) ID Selector - 選取指定 ID 的元素 a, b, c, ... $ ( ' .myClass, div, #myId ' ) Multiple Selector - 以逗點區隔以選取各元素的 聯集 Basic Selector
- 7. darkthread.net/MiniJQueryLab/ 小試身手 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#id-button-show").click(function(){ $("p").show(); }); $("#id-button-hide").click(function(){ $("p").hide(); }); }); </script> <body> <p id="p1">jQ躲貓貓</p> <button type="button" id="id-button-show">顯示</button> <button type="button" id="id-button-hide">隱藏</button> </body>
- 8. SVG 動畫應用範例 － Firefox 十週年 來研究SVG動畫效果吧 tech.mozilla.com.tw/posts/5660/%E5%9B%9B%E5%80%8B-svg- %E5%8B%95%E7%95%AB%E6%87%89%E7%94%A8%E7%AF%84%E4%BE%8B- %EF%BC%8D-firefox- %E5%8D%81%E9%80%B1%E5%B9%B4%E6%B4%BB%E5%8B%95%E7%B6%B2%E7%A B%99%E6%8A%80%E8%A1%93%E8%A7%A3%E5%AF%86 再一個帥氣的網站 gardenestudio.com.br/
- 9. 可以再簡單一點 哥就是懶 lazylinepainter.info/ 百戰天蟲測bug worms2d.info/images/5/56/Worm_scalable.svg 好用的編輯器 sublimetext.com
- 10. 最後的最後 試不出來看這邊 janily.gitcafe.io/life/2013/12/11/svg-path-animation-jQuery/ 自己的外掛自己做 learn.jquery.com/plugins/basic-plugin-creation/ 外掛DIY中文介紹 lovelucy.info/write-a-jquery-plugin.html?variant=zh-hant