3.2.5 Mobile jQuery

Submitted by mei on 一, 2011-10-10 20:07

什麼是jQuery？

jQuery是一套跨瀏覽器的JavaScript函式庫且為開放原始碼，它強化了HTML和JavaScript間的操作，語法方面的設計，讓許多的操作都變得容易許多，如操作文件、動畫效果、事件處理、發展Ajax等等的功能，並且提供API讓開發者將自己所寫的功能融入jQuery中。

什麼是Mobile？

Mobile基本上分成兩種，一種是Native App，利用該平台上的專用語言寫出針對這個平台的應用程式，因此只能使用在特定的裝置上。另一種雖然也要用專用語言來寫，但實際使用的時候，是用Brower來讀取網路上的Web Page，因此可以跨不同的Mobile裝置。

什麼是Mobile jQuery？

為了讓Mobile的第二種方式能方便撰寫，因此才有這個方案，它是一套建立於jQuery 與jQuery UI的強健基礎上為各種的Mobile平台提供統一的UI介面的系統，利用html5來處理，讓不同的裝置能讀取到它的介面時，能夠有統一的介面，也不需要因為不同的手機，而去設計不同的頁面。

JQuery Mobile 的網頁部分主要是以page來做分類，每個page可以分為、content與footer三部分，以往我們在寫網頁時，如果內容過多，會採取分散的方式，避免初始化過長，並以超連結的方法讓使用者可以選取自己想要的資訊位置，而JQuery Mobile因為效能關係，採取超連結攔截技術，使用Ajax驅動網頁的瀏覽，使用部分跟新代替全頁跟新，節省CSS的排版、JavaScript的剖析和執行時間，而且瀏覽過的網站，會在目前主要文件中，加快使用者的瀏覽速度。

特色有：
1.用jQuery核心，所以語法跟jQuery相同。
2.輕量的大小。
3.使用Html5的標記驅動來進行配置，因此只需使用一寫Script，提升開發時間。
4.若發現Html標記中有用到Html5的data-role屬性，會自動初始化此標記。
5.精簡的觸控和滑鼠，只需要一個簡單的API方式。
6.兼容主要的移動和桌面平台-IOS、黑莓、WebOS等和所有現在桌面瀏覽器。
7.包括了WAI-ARIA的輔助功能，確保頁面的螢幕閱讀器和其他輔助技術。

用法:

jQuery 物件也可以透過它提供的的另外一個縮寫符號 (別名)－錢字號「$」，jQuery 程式碼由 $ (或jQuery) 開始 → 後面會接著圓刮號「()」→ 而圓刮號裡面的參數是你想叫 jQuery 幫你找什麼 (取得哪個(些)元素) → 接著是你想叫 jQuery 執行什麼動作 (或處理事件)。例如 $("div").addClass("special"); 也就是透過 $("div").addClass("special") 的語法，可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class

主要有三個步驟
1.宣告html5 documnt。
2.包含jQuery mobile css, jQuery, jQuery mobile library 。
3.使用jQuery mobile定義的語法。

於《使用jQuery Mobile 快速開發mobile 網站| brooky's blog》網站所找到的簡單例子：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial on Codeforest.net</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>