不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中，还是已经开始用它做项目的开发者，欢迎加入这个jqm学习之旅
1、什么是jQuery Mobile？按照官方的描述：针对智能手机和平板、做过触摸优化的web框架。截止到编写这个教程的时候，目前最新的版本是1.3.0。
2、jQuery Mobile推崇什么？其实很多读者应该多用过jquery，它推崇的是"write less,do more"，那jQuery Mobile呢？
答案是一定的，而且更加针对移动设备。
3、相关资源依赖？jQuery Mobile首先依赖jquery框架提供的接口处理相关操作
自身依赖两个主要部分：
js：jquery-mobile.js
css：jquery-mobile.css
如果你对版本意识不关心的话，我们可以直接去官网CDN下载最新的zip包,这里就不做过多的介绍了，我们直入主题吧。
4、我们先来看一下采用jQuery Mobile开发的一个最简单的页面结构是怎样的？ <!doctype html> <html lang="zh-hans"> <head> <meta charset="UTF-8"> <title>jQuery Mobile教程-基础篇-页面基本结构</title> <!-- 设置meta viewport start --> <meta content="width=device-width,minimum-scale=1,maximum-scale=1"> <!-- 设置meta viewport end --> <!-- jqm依赖文件start --> <link href="../css/jquery.mobile-1.1.0.css" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.mobile-1.1.0.js" type="text/javascript"></script> <!-- jqm依赖文件end --> </head> <body> <!-- 页面容器start --> <div data-role="page"> <!-- 页眉部分start --> <div data-role="header"> <h1>我是header部分</h1> </div> <!-- 页眉部分end --> <!-- content部分start --> <div data-role="content"> <p>jQuery Mobile教程-基础篇-我是content部分</p> </div> <!-- content部分end --> <!-- 页脚部分start --> <div data-role="footer"> <h3>我是footer部分</h3> </div> <!-- 页脚部分end --> </div> <!-- 页面容器end --> </body> </html>如下图：
接下来我们会从使用频率这个维度来给大家介绍几个常见的组件，让大家快速地熟悉基本的用法。
demo
PS:
1、有问题欢迎在官网留言或者直接联系我：@zhangyaochun_fe
2、可以在官网的问答频道进行提问，我们会尽快回复
3、谢谢您对w3cplus的jquery mobile系列教程的关注
专注于前端开发，对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习，涉足移动前端许久，爱好分享交流…个人博客focus-fe。欢迎随时关注我：新浪微博
相关文章
精彩导读
热门资讯
关注我们
