jQuery Mobile大致上跟一般的HTML页面大致一样，不同之处就在于加了"<meta name="viewport" content="width=device-width, initial-scale=1">"这一代码主要作用就是初始化浏览器显示的宽度、缩放比例。整体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery mobile</title>
<!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
<!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入jquery mobile的样式-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--引入jquery-->
<script src="js/jquery-1.11.1.js"></script>
<!--引入jquery mobile脚本-->
<script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>
之前说过jquery mobile跟jquery类似，从上面的示例代码就可以看出，引入样式表跟JS脚本，jquery mobile就可以开始工作了。jquery mobile主要是通过HTML5的data-*这个属性来创建移动设备的交互页面。一般来说，一个网页一般分为标题栏、内容、页脚三部分，当然只有内容也是可以的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery mobile</title>
<!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
<!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入jquery mobile的样式-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h2>我是头部</h2></div>
<div role="main" class="ui-content"><p>我是主体</p></div>
<div data-role="footer"><h2>我是底部</h2></div>
</div>
<!--引入jquery-->
<script src="js/jquery-1.11.1.js"></script>
<!--引入jquery mobile脚本-->
<script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>
运行上面这段代码，如图所示:
这是我在Chrome浏览器用手机模拟器看到的页面效果，不需要写样式来控制页面显示效果，这里要注意的是使用头部和底部使用data-role=""，而主体使用role=""，当然主体使用data-role也是没问题，这样做是为了区分开是内容还是标题栏。
关于调试，我这里推荐使用Chrome浏览器，也就是谷歌浏览器，因为它的兼容性和调试性更好，同时我们在jquery mobile中，可以在一个html文件中创建多个页面，这跟我们传统的web页面不同，以前的我们一个html页面要跳转到另一个html页面，或者需要在一个页面跳转到多个页面中，我们常用iframe等等的方式进行跳转，但是在jquery mobile中,我们可以用一个页面就完成一个webapp(就是整个项目),说白了就是能够在一个html文件中创建多个页面，哪jquery mobile是通过什么方式来区分多个页面和写多个页面呢？这时，我们只需要通过唯一的id来分隔每张页面，并使用href属性来链接各个页面，具体代码实现如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery mobile</title>
<!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
<!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入jquery mobile的样式-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header"><h2>我是头部1</h2></div>
<div role="main" class="ui-content"><p>我是主体1</p></div>
<div data-role="footer"><h2>我是底部1</h2></div>
</div>
<div data-role="page" id="index2">
<div data-role="header"><h2>我是头部2</h2></div>
<div role="main" class="ui-content"><p>我是主体2</p></div>
<div data-role="footer"><h2>我是底部2</h2></div>
</div>
<!--引入jquery-->
<script src="js/jquery-1.11.1.js"></script>
<!--引入jquery mobile脚本-->
<script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>
运行这段代码我们会发现第二个页面没有显示，所以这时我们需要设置一个链接，来进行页面之间的跳转，具体如下，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery mobile</title>
<!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
<!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入jquery mobile的样式-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h2>我是头部1</h2>
</div>
<div role="main" class="ui-content">
<p>我是主体1</p>
<p><a href="#index2">index2</a></p>
</div>
<div data-role="footer">
<h2>我是底部1</h2>
</div>
</div>
<div data-role="page" id="index2">
<div data-role="header">
<h2>我是头部2</h2>
</div>
<div role="main" class="ui-content">
<p>我是主体2</p>
<p><a href="#index">index</a></p>
</div>
<div data-role="footer">
<h2>我是底部2</h2>
</div>
</div>
<!--引入jquery-->
<script src="js/jquery-1.11.1.js"></script>
<!--引入jquery mobile脚本-->
<script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>
运行这段代码，点击页面的上的超链接就会跳转到对应的页面上。