目的：開發自己的APP——前端篇。
已有基礎：HTML、CSS、Javascript、jQuery
由於有jQuery的基礎，所以優先選擇了jQuery Mobile框架作爲APP開發的前端框架。
----------------------------我是華麗麗的分割線-------------------------
這一章主要寫一些概覽性的知識，沒有什麼實質性內容，沒有興趣可以直接略過。
1.爲什麼需要jQuery Mobile
問這個問題的前提是，我們現在做的不是native開發，而是hybrid開發或者web app的開發。
1.1APP開發的三種方式
如果不明白三者的區別的話，可以簡單看看下面的解釋，不明白的可以找專門的文章搜一搜。
Native開發：即傳統開發，IOS用Object C語言開發，Android用Java開發，界面和後臺都不涉及所謂前端的知識。
優點：充分利用手機的自帶功能，拍照，搖一搖（加速度檢測）等，渲染效果好。2d、3d一般只能用這種方式開發。
缺點：學習成本高。
Web APP開發：簡單說就是有着類似APP感覺的手機版的網頁。使用最多的應該是微信平臺的開發。
優點：開發迅速，簡單。一個平臺網站，改一改前端樣式就可以直接適配手機瀏覽器了。
缺點：只能開發普通瀏覽性APP，不能調用手機資源，功能欠缺，無法離線。
Hybrid開發：介於以上二者之間，既可以用前端寫樣式，又可以利用PhoneGap等封裝後使用手機自身功能。
1.2爲什麼是jQuery Mobile
明白我們要做的是什麼開發了，那麼再接着回答這個問題。
兼容性良好（基本適配所有常見設備操作系統和瀏覽器）
在做移動開發時，我們面對的是非常不一樣的設備。算起來市場上有3000多種移動平臺，差不多有50中瀏覽器，誰也不知道你的用戶會用什麼樣子的設備，所以要減少開發成本，做兼容性開發。
學習成本低
做前端，都不可避免要學習javascript的知識，不可避免要學習一個框架，jQuery框架本身有十分廣泛的使用，而jQuery Mobile是從jQuery衍生來的，容易上手。
2.jQuery Mobile是什麼
2.1官方說明：
jQuery Mobile是一個支持所有流行移動設備平臺的統一的用戶界面系統，基於堅如磐石的jQuery及jQuery UI。它輕量級的代碼使用漸進增強方式構建，具有可伸縮、易更換主題的設計特點。
2.2解析：
jQuery Mobile=jQuery核心+JavaScript庫+CSS3樣式表+一些資源圖片。
主要特性：
1.跨平臺、跨設備、跨瀏覽器
2.爲觸屏設備優化過的UI
3.設計爲可修改主題及自定義
4.只使用無侵入性的HTML5，無需瞭解任何JavaScript、CSS和API知識
5.自動調用AJAX來加載動態內容
6.輕量級尺寸，壓縮後爲12KB
7.漸進增強
8.可訪問性支持（爲視力有障礙的人士提供可訪問體驗）
說明：
無侵入性：
先說侵入性：侵入就是說免不了會和頁面中的其他相關內容起衝突，如樣式亂掉、JS錯誤、某html標籤不被支持等問題，造成侵入後，要麼是自身的東西影響了其他的，要麼自身的東西被影響了。這樣理解的話，無侵入性就是不會對頁面上其它因素造成影響並且自身不會被其它因素影響。具體一點比如說，我們不用擔心jQuery Mobile裏用的HTML5標籤會不會被設備瀏覽器支持，或者一些其它的兼容性。我們只需從jQuery Mobile層面考慮兼容性即可，不用考慮其內部細節。（我沒找到確切的定義，有問題的地方歡迎大家指導）
插一句：使用標準無侵入性的HTML5創建應用，特別適合搜索引擎優化（SEO）以及網站性能優化（WPO）。
漸進增強：
核心原則是：在所有瀏覽器上都能訪問基本內容和使用基本功能；語義標籤包含了所有內容；增強佈局由外部鏈接的CSS提供；增強行爲由不衝突的、外部鏈接的JavaScript提供；尊重終端用戶瀏覽器的偏好支持。
最後提一下JM測試。在真機上看效果是最好的了，不過有一點值得注意，就是一定多在幾種設備上測試一下。這是個充滿惡意的世界，bug不知道什麼時候就莫名其妙的跑出來了。所以可以把代碼可以放到網上，比如自己開發個微信賬號神馬的開發下，之後請朋友幫忙訪問看效果就好。
文章的最後，給一個最簡單的jQueryMobile代碼。可以看看效果，先自己研究下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="b">
<li data-role="list-divider">Summary</li>
<li><a href="cap1.html">The Platform</a></li>
<li><a href="cap2.html">The Page</a></li>
<li><a href="cap3.html">Lists</a></li>
<li><a href="cap4.html">Components</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Links</li>
<li><a href="http://www.mobilexweb.com">Mobile Web Blog</a></li>
<li><a href="http://www.oreilly.com">O'Reilly Media</a></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2014 Johnzhangscorpio</h4>
</div>
</div>
</body>
</html>
