Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] jQuery講義

1. jQuery概述


jQuery的口號是 write less, do more(寫得更少,實現的更多)

jQuery是一套運用JavaScript來與HTML和CSS進行互動的新方法,了解CSS的概念,便能輕鬆的學習這套程式庫。
jQuery對跨瀏覽器的支援完整,可支援複雜動畫並實現風視覺效果。




2. jQuery參考網站


範例網站:2013-第12屆新人王網站設計大賽第一名作品
http://www.funtaipei.tw/

使用工具
Notepad++ http://notepad-plus-plus.org/zh/

http://jquery.com/

下載:http://jquery.com/download/
技術文件:http://api.jquery.com/
介面:https://jqueryui.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/



jQuery 教學 - 基礎篇
http://jsgears.com/thread-63-1-1.html

jQuery 語法
「快速選取元素」並且「做一些事情」
$("div").fadeIn(2000); 選取文件內所有的 div元素,以兩秒鐘的速度淡入出現



3. jQuery練習效果參考






4. jQuery參考語法


<head> <!--網站基底網址--> <base href="........." /> <!--jQuery 語法--> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); $( "#accordion" ).accordion(); }); </script> </head>

淡入效果
<head> <!--jQuery 語法--> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#main" ).hide(); $( "#main" ).fadeIn(2000); }); </script> </head>


5. 上課影音


jQuery介紹
http://youtu.be/EmRAG1VT3Cg





jQuery簡介-tabs範例介紹
http://youtu.be/9EMiLNCmm1M





jQuery範例說明--以FunTaipei為例
http://youtu.be/Bx_5bsxL7nQ





jQuery動態網頁初探作業說明
http://youtu.be/ScKyR0mrh1s





Edited 6 time(s). Last edit at 05/13/2015 09:29AM by JinJin.
(編輯記錄)