【IT168技术】很多开发者都积极寻找高效的方法，使得构建的基于移动的应用程序能在多种设备上运行。在本文中，将率先向大家介绍jQuery中的一个新的项目：JQuery Mobile。虽然它现在还在alpha版本，但其强大的功能还是值得我们先睹为快。
JQuery Mobile旨在为开发者提供一系列统一的接口工具,这些工具可以确保能在不同的移动设备的浏览器中得到充分的兼容。JQuery Mobile基于HTML5,jQuery和CSS，目的为了提供一个丰富交互性强的接口去兼容各种设备，同时允许经过少量的修改就能运行在一些兼容性方面有冲突的设备中。这一特性使得开发者可以在标准的桌面浏览器中就能进行各类型的测试，当然，在投入到真实生产环境前，应该是在不同的移动设备上进行测试的。
本文是介绍jQuery Mobile项目的文章，但读者要注意的是，在本文完成之际，jQuery Mobile项目还是处在alpha 2阶段，在未来的一段日子可能项目本身还会发生些改变。所以在本文中学到的一些语法和API，在将来的正式版本中有可能会发生变化。
jQuery Mobile的页面结构
jQuery Mobile的页面结构看起来跟典型的HTML文档是一样的，包括了页面头部，主体部分和footer。在HTML中的标签中，你会看到引用的jQuery库和jQuery Mobile库和jQuery Mobile的CSS文件，这些都可以在jQuery Mobile的网站(http:// http://jquerymobile.com/download/)下载，下面是一个简单的例子：
<head>
<meta charset="utf-8">
<title>W.J. Gilmore, LLC</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="apple-touch-icon" href="img/tutsTouchIcon.png" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" id="home">
<h1>WJGilmore, LLC</h1>
</div>
<div data-role="content">
<p>Check back regularly for the latest information about Jason's books!</p>
</div>
<div data-role="footer">
<h1>Copyright © 2010 W.J. Gilmore, LLC</h1>
</div>
</div>
</body>
</html>
在桌面浏览器或者手机浏览器上运行，会发现是如下图所示的效果：
正如你所看到的，jQuery Mobile自动使用CSS样式化了头部和尾部，是通过data-role属性去实现的。
