1、初始化移动浏览显示 <meta name=”viewport” content=”width=device-width,initial-scale=1”/> 2、引入jquery mobile的css文件和js文件  3、HTML5 date=*属性用于通过jquery mobile为移动设备创建交互外观 示例： ~~~ <div date-role = “page”> <div date-role = “header“> <h1>标题</h1> </div> <div role = “main” class=”ui-content”> <p>内容</p> </div> <div data-role = “footer”> <h1>页脚</h1> </div> </div> ~~~ 在一个html文件中可以放多个date-page，但默认显示第一个data-page 可以通过href的形式进行跳转，示例： ~~~ <div date-role = “page” id=”index1”> <a href=”#index1”>页面跳转</a> </div> <div date-role = “page” id=”index2”></div> ~~~ 4、设置页面过度效果data-transition ~~~ <div date-role = “page” id=”index1”> <a href=”#index1” data-transition=”slide”>页面跳转</a> </div> <div date-role = “page” id=”index2”></div> ~~~ 包括：slide/slideup/slidedown/pop/fade/flip/none 5、事件 (1)页面初始化事件：pagebeforecreate,pagecreate,pageinit (2)页面加载事件：pagebeforeload,pageload (3)页面过度事件：pagebeforeshow,pageshow,pagebeforehide,pagehide 示例： ~~~ $(document).on(“pagebeforecreate”,function(){ //do something }) $(document.on(“pagebeforehide”,”#index”,function(){ //do something[index页面消失时] }) ~~~ 6、jquery moblie按钮 示例：<a class=”ui-btn”>按钮</a> <input type=”submit” value=”按钮”/>//JQM直接添加了一些样式 让多个按钮并排显示(ui-btn-inline)： <a class=”ui-btn ui-btn-inline”>按钮</a><a class=”ui-btn ui-btn-inline”>按钮</a> 此外还有不同样式：ui-btn-a;ui-btn-b;ui-corner-all;ui-shadow 7、导航栏制作示例： ~~~ <div data-role=”navbar”> <ul> <li><a href=”#” data-icon=”camera”>导航1</a></li> <li><a href=”#” data-icon=”carat-l”>导航2</a></li> <li><a href=”#” data-icon=”carat-2”>导航3</a></li> </ul> </div> ~~~ data-icon可以设置导航图标，还可以自己制定 8、设置标题和当行蓝位置固定 设置data-position=”fixed” 9、列表 ~~~ <ul data-role=”listview data-inset=true”> <li>列表1</li> <li><a href=”#” >列表2</a></li> <li><a href=”#” >列表3</a></li> </ul> ~~~ listview指定列表样式；data-inset设置为true使列表留边距显示 复杂的列表：（详情见api） ~~~ <ul data-role=”listview data-inset=true”> <li><a href=”#” > <h2>G1次</h2> <p>北京-大连</p> <p>大连-北京</p> <p class=”ul-li-aside”>9:00开</p>//设置为右上角显示 </li> </ul> ~~~ 10、表单：直接使用html的默认表单就可以 表单自适应功能：ui-feild-content ~~~ <form> <div class=”ui-feild-content”><input type=”text”/></div> <div class=”ui-feild-content”><input type=”text”/></div> </form> ~~~ 11、表格 ~~~ <table data-role=”table” data-mode=”reflow” class=”ui-responsive table-stroke”> <thead> <tr> <td></td> <td></td> <td></td> </tr> </thead> </table> ~~~