在写移动端的网站的时候， 一定要写一个meta的name为viewport的属性， 因为该属性代表着网站页面的自适应。简单的写法为： 代表着网站为驱动设备的宽度。
然后加入框架之后， 写一个简单的界面。 这里面JQueryMobile大量的使用了一个data-的属性， 这里使用最多的事data-role。 代表着他默认的样式规则。 就是提前定义好了很多的样式来供使用。 常用的page. 代表着页面， listview， 代表着一个列表视图。
稍微说明一下。
data-role="page" 是代表着一个页面可以看做该内容下是一个页面显示的内容
data-role=”header"代表着 页面的页头， 就是页面的最上面显示的内容这里需要注意， 里面要加上子标签内容， 要不然， 就不会居中显示内容了。推荐使用h1.
data-role="footer"代表着页脚的内容。 也是网站的一个说明信息。 或者是一个底部导航菜单。 还有一部分， 就是data-role="content" 是代表着页面内容部分， 主要的内容在这里面显示。
这3个部分构成了一个简单的页面。 所以， 现在可以体验到它的强大， 不用写太多的代码一个简单的框架就好了， 下面继续增加一个listveiw的列表视图。
完成列表视图的代码， 增加一个文章列举表的代码， 这里列表是使用data-role="listview" 来修饰样式。 然后这里只需要加上data-role="listview" 发现想要的list效果就实现了。 这样一个简单的页面效果就实现了。
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
Jquery mobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统，与前端开发框架。可以运行在所有智能手机，平板电脑和桌面设备上。 jQuery Mobile秉承 “write less, do more”的原则到了一个新的高度：不需要为每一个移动设备或者操作系统单独开发应用，jQuery Mobile框架可以使您设计一个高度响应式的网站或应用运行于所有流行的智能手机，平板电脑和桌面系统。
jquery 你写方法动态刷新页面是没有问题。 只不过 jquery mobile 支持单页模式。 我很怀疑 你在page容器中 将data-dom-cache 设置成了true。 这样的效果是
1 你已经打开过的页面不再走后台 （不浪费客户流量）
2 如果你的jquery选择器 使用不当 你只是在给第一个页面刷新元素。（举例: 你选择了一个列表中的第一条信息。 打开一个详细页面。 进行了js操作后或者没进行js操作 再返回列表页点击第二条信息 再打开一个详细页面时 你发现你的js方法“失灵了” 实际上因为选择器指定的不对 js在给你更新第一个详细页面。 单页模式会将你打开过的页面全部累加起来 选择器 选取不正确 是无法更新后面打开的页面的。 必须正确指定自己想要刷新的页面。）
我怀疑你是第二种情况
需要使用 JQM 提供的 create 方法创建一次，才会附加上 JQM 的样式，立即生效； 如果是动态添加块状元素，如 div、p等： $('selector').trigger('create'); 如果是表单元素，如input、textarea、button等： $('selector').textinput(); 下拉元素，如select： $('selector')[0].selectedIndex = 3; // 先给 select 赋值$('selector').selectmenu('refresh'); // 然后刷新 Toggle switch 控制： var myswitch = $("#toggle");myswitch[0].selectedIndex = 1;myswitch .slider("refresh"); slider 控制： $('selector').val(value).slider('refresh'); listview 元素，如 li： $('selector').listview('refresh'); radio 元素： $("input[value=value]").attr('checked',true).checkboxradio('refresh'); checkbox 元素： $('selector').attr('checked',true).checkboxradio('refresh');
jQuery Mobile是移动前端框架，包含js、html、css，提供一套完整的移动前端开发组件，可以比喻成Android开发框架，尽可能提供移动APP所具有的所有功能，针对解决的问题有：
移动网页APP所常用的组件，例如：手机导航栏、选项卡、底部菜单、列表、表单等各种组件，而这些与Bootstrap提供的组件有很大区别，jQuery Mobile提供的是类似手机APP的组件，只用于移动网页，而Bootstrap提供的是面向所有设备的组件，并没有对移动设备专门考虑，与移动APP的组件体验不一样。
jQuery Mobile是一个基于jquery的html 5移动网站框架，用它做出来的网站界面和App风格类似。
jQuery Mobile文档,内容不多，耐心看完只需要1个小时，大体分成8大功能点
page：最基准单元，包括header,footer,导航栏
dialog：对话框,在手机屏幕弹出dialog来交互，我觉得不是很友好
transitions：转场效果
form:表单
button：大button，小button(放在各种栏上的都是小button)，还提供了若干内置标准icon
listview：列表，这是jquery mobile的核心UI，提供了10几种类型的List，简单好用
event：各种滚动，滑动，拖拽事件
Theming：官方提供了5种皮肤，也有工具可以自定义，切换皮肤只需要改动一个class
jQuery Mobile全面支持ajax，但也可以当做普通html模板在后端渲染数据，我选择后面一种
普通切换页面，不是在一个页面的html
带滑动效果的切换当前页面的div页面
一个完整的jqm页面
...
...
...
一个页面可以有很多个data=role="page" 他表示一个页面 id就是为了方便超链接点击找到他显示他
还有通过js来切换页面：
$.mobile.changePage("about/us.html", "slideup");
第一个是地址或者ID，第二个效果
jQuery Mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
每章中的 TIY 实例
通过我们的在线编辑器，您能够编辑代码，然后点击提交按钮来查看结果。
实例
在此处写入标题
在此处写入正文
在此处写入页脚文本
以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：
html代码如下：
[html] view plain copy
Your browser does not support the canvas element.
其中abc.js文件中的代码如下：
[javascript] view plain copy
function mousePos(e)
{//获取鼠标所在位置的坐标，相对于整个页面
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
};
}
function getCanvasPos(canvas,e)
{//获取鼠标在canvas上的坐标
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left * (canvas.width / rect.width),
y: e.clientY - rect.top * (canvas.height / rect.height)
};
}
function draw(e)
{
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,c.width,c.height);
cxt.fillStyle="#FF0000";
cxt.beginPath();
//cxt.arc(mousePos(e).x,mousePos(e).y,15,0,Math.PI*2,true);
cxt.arc(getCanvasPos(c,e).x,getCanvasPos(c,e).y,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
