jQuery Mobile 是创建移动WEB应用程序的框架。在学习和使用该框架的过程中，有一些心得想要和大家分享一下。
一、框架
因为是移动端开发，所以不要忘了下面这个重要的meta标签哦：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
使用jquery mobile要引入相应的css文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css">
jquery mobile依赖jquery，因此要先引入jquey.js再引入jquery.mobile.js：
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
在引用jquey.js文件的时候一定要注意版本，要在1.8以上，但也不能过高，3.0以下就可以了。##jquey.js文件版本要在1.8以上，3.0以下就可以。
落落一开始就引用了cdnj上的最高版本3.3.1，结果页面不能正常显示，出现了下图这样的异常情况：
当落落把jquery.js版本换成1.8.3的，页面就正常显示了。
二、基本页面结构
h5 data-*属性用于通过jquery mobile为移动设备创建交互外观。
<div data-role="page">
<div data-role="header">
<h1>标题</h1>
</div>
<div role="main" class="ui-content">
<p>内容</p>
</div>
<div data-role="footer">
<p>页脚</p>
</div>
</div>
jqm中，可以在单一HTML文件中创建多个页面。
需要通过唯一的id来分隔每个页面，并使用href属性连接彼此。
例：
<div data-role="page" id="index">
<div data-role="header">
<h1>标题1</h1>
</div>
<div data-role="content">
<p>内容1</p>
<p><a href="#index2">index2</a></p>
</div>
<div data-role="footer">
<p>页脚1</p>
</div>
</div>
<div data-role="page" id="index2">
<div data-role="header">
<h1>标题2</h1>
</div>
<div role="main" class="ui-content">
<p>内容2</p>
<p><a href="#index">index</a></p>
</div>
<div data-role="footer">
<p>页脚2</p>
</div>
</div>
关于页面内容部分，落落看到有两种写法：
写法一
<div data-role="content">
<p>内容1</p>
<p><a href="#index2">index2</a></p>
</div>
写法二
<div role="main" class="ui-content">
<p>内容2</p>
<p><a href="#index">index</a></p>
</div>
落落把两种写法都用了，发现视觉效果是一致的，在chrome浏览器上，第一种写法解析后如下：
<div data-role="content" class="ui-content" role="main">
<p>内容1</p>
<p><a href="#index2" class="ui-link">index2</a></p>
</div>
第二种写法解析后如下：
<div role="main" class="ui-content">
<p>内容2</p>
<p><a href="#index">index</a></p>
</div>
两种写法解析后，第二种写法少了data-role属性，其它则一致，展示的效果也一致。
落落查看了一下w3c文档，文档上使用的是第一种写法。
对于页面的页眉和页脚，一般都是固定的，不会随着页面的滚动而滚动。想要达成这样的效果在jqm里也很简单，只需要添加属性data-position="fixed"。
例：
<div data-role="header" data-position="fixed">
<h1>标题1</h1>
</div>
关于如何从一个页面过渡到另一个页面，jqm有一系列效果，这些过渡效果可以用于任意连接，通过data-transition属性达成。例如data-transition="slide"。默认效果是淡入淡出，若data-transition属性值设置为none则没有效果。如果你想应用某个效果，那你需要做的就仅仅是设置相应的data-transition属性值。
三、页面事件
$(document).on("事件名称","#链接的id属性值",function(){})
w3c jQuery Mobile 事件参考手册详细列出了所有的 jQuery Mobile 事件，网址如下：
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_events.asp
请注意，要通过使用 on()方法来绑定事件哦。
关于事件pageinit和pageshow，一定要注意它们的区别哦。
pageinit：页面初始化之后，只执行一次。
pageshow：页面显示的时候，每次进入页面都会执行。
四、组件
1.按钮
通过给a、button、input元素添加类class="ui-btn"或者增加data-role="button"可以创建按钮。
例如：
<a class="ui-btn">我是按钮</a>
jqm对input元素进行了优化，比如下面的代码，没有添加class="ui-btn"或者增加data-role="button"，但是它呈现的仍是按钮的样式，而且多了阴影、圆角等效果：
<input type="submit" value="我是按钮">
关于按钮还有以下样式：
ui-corner-all圆角
ui-shadow 阴影
ui-btn-inline并排显示
ui-btn-a
ui-btn-b
这些样式都要在使用了类ui-btn的基础上使用。关于后两种样式，分别使用在两个按钮上，两个按钮会呈现不同的效果，第一个按钮默认背景色白色，第二个按钮默认背景色黑色。如：
<a class="ui-btn ui-btn-a">按钮1</a>
<a class="ui-btn ui-btn-b">按钮2</a>
效果如下：
对于按钮的样式，除了通过添加以上类名来完成，还可以通过
data-*的方式达成：data-inline=true"两个或多个按钮并排显示data-corners true | false规定按钮是否有圆角。data-mini true | false规定是否是小型按钮data-shadow true | false 规定按钮是否有阴影。如需创建后退按钮，使用
data-rel="back"属性（会忽略锚的 href 值）
<a href="#" data-role="button" data-rel="back">返回</a>
还可以对按钮进行组合：
data-role="controlgroup" 属性与data-type="horizontal|vertical"一同使用，以规定水平或垂直地组合按钮。
<div data-role="controlgroup" data-type="horizontal">
<a href="" data-role="button">按钮 1</a>
<a href="" data-role="button">按钮 2</a>
<a href="" data-role="button">按钮 3</a>
</div>
默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。
注：w3c建议使用 data-role="button"的 <a> 元素来创建页面之间的链接，而 <input>或 <button>元素用于表单提交。
2、导航栏
导航栏由一组水平排列的链接构成，通常位于页眉或者页脚内部。
导航栏中的链接会自动转换为按钮。
使用data-role="navbar"属性定义导航栏即可。
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a href="">按钮1</a>
</li>
<li>
<a href="">按钮2</a>
</li>
<li>
<a href="">按钮3</a>
</li>
</ul>
</div>
</div>
导航栏按钮在5个以内（包含5个）时会水平排列在一行内显示，按钮平分设备宽度；
导航栏按钮在5个以上则会换行显示。建议最多5个按钮。
通过data-icon属性可以为导航栏的按钮添加图标。
3、列表
jqm中的列表视图是标准的html列表（有序列表ol和无序列表ul）.
想要创建列表，需要在ol或ul元素上添加data-role="listview"；要想使这些列表项目可以点击，要在每个列表项li中规定链接。
<ul data-role="listview" data-inset="true">
<li><a href="">项目1</a></li>
<li><a href="">项目2</a></li>
<li><a href="">项目3</a></li>
<li><a href="">项目4</a></li>
<li><a href="">项目5</a></li>
</ul>
如果列表项没有a链接，那么列表项就没有右边的箭头。
data-inset="true"表示列表不要贴边显示，为列表添加圆角和外边距；列表默认是贴边显示的。
默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）。
下面的这段代码中，class="ui-li-aside"可以实现该元素在列表右上角的效果。
<li>
<a href="">
<h1>G1次</h1>
<p>上海南——北京西</p>
<p class="ui-li-aside">2018年3月15日17:30开</p>
</a>
</li>
如果要在列表中添加搜索框，要使用 data-filter="true" 属性：
<ul data-role="listview" data-inset="true" data-filter="true">
<li>
<a href="">
<h1>G1次</h1>
<p>上海南——北京西</p>
<p class="ui-li-aside">2018年3月15日17:30开</p>
</a>
</li>
<li><a href="">项目2</a></li>
<li><a href="">项目3</a></li>
<li><a href="">项目4</a></li>
<li><a href="">项目5</a></li>
</ul>
默认搜索框中的文本是
"Filter items..."。如需修改默认文本，使用data-filter-placeholder属性。例：
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">
4、表单
使用html原生表单即可。
jqm建议每一个input都添加一个label，每个input元素都有name属性和id属性。
要想表单自适应，需要为每一个表单元素添加带有类ui-field-contain的div将input（input和其对应的label）标签包裹起来，当屏幕大于480px时label和对应的input会水平显示，否则上下显示。
<div data-role="content">
<form action="">
<div class="ui-field-contain">
<label for="ipt1">发车站</label>
<input type="text" name="ipt1" id="ipt1">
</div>
<div class="ui-field-contain">
<label for="ipt2">终点站</label>
<input type="text" name="ipt2" id="ipt2">
</div>
<div class="ui-field-contain">
<label for="ipt3">车次</label>
<input type="text" name="ipt2" id="ipt2">
</div>
</form>
</div>
如果将所有的input包裹在一个带有类ui-field-contain的div中会怎么样呢？
当屏幕大于480px时label和对应的input会水平显示，但是上下表单元素之间没有间隔，很不美观。
当屏幕小于480px时label和对应的input会上下显示，表单元素之间少了分割线，间隔也缩小了。
相比较而言，还是每一个表单元素单独包裹一个带有类
ui-field-contain的div更美观。
5、表格
jqm对原生表格提供了reflow table mode模式（回流表格模式），在较宽的屏幕下展示普通的表格列，在较窄的屏幕下将数据堆叠变成表单式表格。
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
data-role="table"jqm下的表格
data-mode="reflow" class="ui-responsive"回流表格，自适应
class="table-stroke" 为每一行添加下划线
五、事件
jqm中可以使用任何标准的jquery事件。
jqm还提供了若干为移动浏览器定制的事件：
触摸事件：触摸屏幕时触发（敲击、滑动）touch、tap、taphold（长按）、swipe（在某个元素上水平滑动超过30px）
滚动事件：上下滚动时触发scrollstart、scrollstop
方向事件：设备垂直或水平旋转时触发
页面事件：页面被显示、隐藏、创建、加载、卸载时触发
在 jQuery Mobile 中，使用 pageinit 事件来阻止 jQuery 代码在文档结束加载 前运行:
$(document).on("pageinit","#pageone",function(){
// jQuery 事件...
});
六、jqm ajax和ajax跨域
jqm中使用ajax和在jquery中一致。
https://www.imooc.com/video/4233
有时需要在请求ajax期间显示加载提示框，这是可手动显示jqm加载器。
$.mobile.loading("show");
加载完毕的回调函数中可以在让它隐藏：
$.mobile.loading("hide");
单纯的前端方式解决跨域：
www.corsproxy.com
通过cors（跨域资源共享）Proxy对请求进行转发。服务器端对于cors的支持，主要是通过设置Access-Control-Allow-Origin来进行。
在地址后面加上url，如地址为www.xxx.com/service，则修改为www.corsproxy.com/www.xxx.com/service即可。
这种方式被同源策略所禁止。
http://www.w3school.com.cn/jquerymobile/jquerymobile_events_intro.asp
jquery mobile学习的一些网站：
http://www.w3school.com.cn/jquerymobile/
http://www.imooc.com/learn/207
