jQuery Mobile 是基于 jQuery 开发的移动端 UI 框架，专门用来快速搭建手机端网页，自带触摸交互组件页面切换主题样式，不需要自己手写大量移动端适配代码，适合快速制作 H5 移动端演示页面简易移动应用，它核心依靠 data 属性来定义组件类型，开发者只需要在普通 html 标签上面添加对应的 data 属性，框架就会自动渲染成移动端控件，示例里面会包含页面结构引入资源按钮列表弹窗导航栏这些基础模块，需要注意这个框架已经停止官方维护，新项目一般推荐现代移动端框架，学习它主要是理解早期移动端 H5 开发思路。

基础准备工作

1 需要引入三个核心资源，jQuery 主库，jQuery Mobile 的 js 文件，jQuery Mobile 的 css 样式文件

2 页面必须使用 html5 文档声明，viewport 标签一定要写，用来控制手机端缩放，否则页面会出现缩放异常

3 框架的页面单元叫做 page，每一个 data role 等于 page 的 div 代表一个独立页面，多页面应用可以在同一个 html 里面写多个 page，切换的时候不会刷新整个网页

完整基础示例代码

jQueryMobile示例

这是jQuery Mobile基础示例页面

页脚区域

页脚区域

常用组件示例说明

1 导航栏 data role 等于 navbar，可以在头部或者底部做多选项切换导航

2 列表视图 data role 等于 listview，自动渲染成移动端列表样式，支持分组分割线

3 表单控件 输入框单选复选下拉框，框架会自动美化原生表单，适配触摸点击

4 弹窗 data role 等于 dialog，点击链接弹出独立对话框页面

5 折叠面板 data role 等于 collapsible，实现点击展开收起内容

核心运行原理

框架初始化的时候会扫描页面所有带 data 属性的标签，自动增强渲染样式，绑定触摸事件比如滑动点击长按，页面切换采用 ajax 加载方式，切换的时候带过渡动画，默认有淡入滑动等转场效果，可以通过 data transition 修改动画类型。

常用属性对照表

data 属性作用
data-role定义组件类型 page header content footer button listview
data-transition页面切换动画 fade slide pop
data-theme切换内置主题配色 a b c d e
data-inset列表是否带内边距圆角样式

开发注意事项

1 资源版本要匹配，jQuery 版本和 jQuery Mobile 版本不能错配，否则会出现组件不渲染报错

2 框架是旧技术，在新版手机浏览器部分特性兼容性下降，性能不如现代前端框架

3 多页面写法适合小型 H5，页面数量很多的时候不推荐，会造成单 html 文件体积过大

4 自定义样式需要覆盖框架自带 css，注意选择器优先级，否则自定义样式容易失效

综合来看这个 jQueryMobile 使用示例可以快速理解框架核心写法，重点掌握 data 属性驱动渲染单页多 page 切换，适合学习早期移动端 H5 开发，正式新项目谨慎选用，因为官方已经停止更新维护。

【常见问题】

问题 1 jquerymobile 使用示例分享里面页面切换为什么没有动画

回答 1 jquerymobile 使用示例分享里面页面切换无动画，一般是没有添加 data transition 属性，或者浏览器对转场动画支持异常，也有可能 jQuery 和 jQuery Mobile 版本不匹配

问题 2 jquerymobile 使用示例分享可以做多页面跳转吗

回答 1 jquerymobile 使用示例分享支持同文件多 page 跳转，通过锚点 href 指向对应 page 的 id，依靠框架 ajax 切换页面，不需要刷新整个网页

问题 3 jquerymobile 使用示例分享现在还适合新项目吗

回答 1 jquerymobile 使用示例分享对应的框架已经停止官方维护，兼容性和性能有限，新项目一般不推荐，这个示例更适合学习历史移动端 H5 开发思路

【免责申明】

本内容为技术学习演示示例，框架已停止官方维护，不同浏览器版本存在兼容性差异，代码仅用于学习参考，不建议直接用于生产正式项目。