2017 JQuery 應用範例

一. Jquery 簡介 :

JjQuery 是一套物件導向式簡潔輕量級的 JavaScript Library。透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達
到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等

JQuery 的好處 :

官方文件詳細 (重要)
簡潔不笨重，壓縮後大約 32kB (v1.12.4)
只要你有 JavaScript 的基礎，不用再多去學習一大堆新語法
不用去煩惱跨瀏覽器 (cross-browser) 的問題，jQuery 已經幫你作好了 (IE, Firefox, Safari, Opera, Chrome)
支援 CSS3 選擇器
社群活躍，你可以有很多人家寫好免費的 plugin 用
跟其它 library 一起使用也不衝突 (jQuery.noConflict())

學習 jQuery 之前你最好先了解 :

在輕鬆的使用 jQuery 之前，你必需先了解基本的 JavaScript、CSS 與 HTML。

摘自 : JQuery 教學

 https://www.fooish.com/jquery

二. JQuery 學習資源與測試 :

https://www.w3schools.com 不僅僅是 JQuery 的重要學習網站, 也是所有前端網頁設計重要的學習網站, 上面可以
作很多的程式測試, 如下最簡單的 jQuery hide() and show() 的測試 :

(1) 點選您要測試的 JQuery 查看範例程式碼

(2) 點選 Try it Yourself 去看一下程式碼及執行的結果 :

這樣就可以快速的測試出 Java Script 執行後的結果, 若確定該 Script 是可以的, 您就可以直接將左邊的程式碼複製貼
上到您自行開發設計的網頁中, 這樣可以在開發階段快速查找 Script 也可以測試出結果.

(3) JQuery UI http://jqueryui.com jQuery UI 通常會依賴相對應版本的 jQuery ，如果 jQuery 很舊的網站要特別確認
一下該版本是不是需要因此升級或找到對應版本的 jQuery UI

(4) JQuery mobile https://jquerymobile.com

jQuery Mobile 並不是行動版的 jQuery, 而是一個以 jQuery 框架為基礎, 用在行動裝置 (手機與平板)
上的跨平台使用者介面系統, 使用時仍然需要匯入 jQuery, 無法單獨使用. 它跟 jQuery UI 一樣都是屬
於 UI 層的框架, 可以說是行動版的 jQuery UI.
jQuery Mobile 並不是一個行動 App 的 SDK, 以 jQuery Mobile 創建的行動網頁程式只能在瀏覽器中
執行, jQuery Mobile 並無法將行動網頁編譯成原生的 App 程式, 要藉助 PhoneGap, jsWaffle 等框架
與原生程式的 SDK 才行.

摘自 : http://yhhuang1966.blogspot.tw/2013/11/jquery-mobile.html

三. JQuery範例介紹網站 :

http://abgne.tw/jquery-apply-list

http://www.jquerysample.com

http://www.w3school.com.cn/jquerymobile

四. 幾個會用到 JQuery 的客戶範例網站 :

http://www.frontpoint.com.tw

http://corpspirit.com.tw

https://www.scutum.com.tw

http://new.chin-ying.com

http://www.action-pluspackaging.com

JQuery 在移動式裝置上面的應用

五. JQuery 圖片輪播應用 :

範例一 : http://www.jamalady.com.tw (Jama 時尚手工內衣)

使用圖片如下 :

IMG_126.jpg

IMG_07.jpg

IMG_888.jpg

IMG_962.jpg

使用 JQuery 程式如下 :

(1) 引用 JQuery 的函式庫

<script src="http://www.jamalady.com.tw/lib/jquery/jquery-1.10.2.min.js"></script>
<script src="http://www.jamalady.com.tw/js/jquery.cycle.all.js"></script>
<script src="http://www.jamalady.com.tw/js/main.js"></script>

(2) 定義 cycle() 函數的時

<script>
$.fn.cycle.defaults.speed = 600;
$.fn.cycle.defaults.timeout = 5000;

$(function()
{
	$('#fade').cycle();
});
</script>


HTML 網頁內使用如下 :

(1) 建立一個 div 該 id 為 fade 然後將圖片
放入到該 div 中

<div id="fade" class="pics">

<img src="http://www.jamalady.com.tw/img/upload/index/IMG_126.jpg" width="1000" height="1000" align="right" border="0">
<img src="http://www.jamalady.com.tw/img/upload/index/IMG_962.jpg" width="1000" height="1000" align="right" border="0">
<img src="http://www.jamalady.com.tw/img/upload/index/IMG_888.jpg" width="1000" height="1000" align="right" border="0">
<img src="http://www.jamalady.com.tw/img/upload/index/IMG_07.jpg" width="1000" height="1000" align="right" border="0">

</div>

(2) 完成輪播

他 JQuery 網路資源 :

1. JQuery 線上教學
http://www.w3school.com.cn/jquery

2. Fooish 線上網頁教學
https://www.fooish.com/jquery

3. Runoob 線上教學r
http://www.runoob.com/jquery

4. HTML + CSS3 樣版
https://templated.co

5. Google web designer
https://www.google.com/webdesigner

範例 :
蜘蛛人遊戲 : https://www.youtube.com/watch?v=guMR82u0ZUs
廣告 : https://www.youtube.com/watch?v=5dftkqpFI40