jQuerymobile 的页面跳转 原理

在jQuerymobile中，单击一个超链接，比如<a>标签，jQuerymobile将自动分析URL地址，产生一个AJAX请求。请求过程中会弹出一个进度提示框。

请求成功后，jQuerymobile自动构建页面结构，注入主页面的内容，同时初始化全部jQuerymobile组件，将新添加的内容展示在浏览器中。

请求失败后，弹出一个会自动消失的提示框，页面不刷新。

注意事项：

如果采用AJAX请求方式打开一个外部页面，注入主页面的内容也是以page为目标，page以外的内容将不会被注入主页面中，并且，必须确保外部

加载页面URL地址的唯一性。

如果不想采用AJAX请求方式打开一个外部页面，只需要在链接元素中，将“rel”属性设置为“external”，该页面将脱离整个jQuery Mobile主页面环境，以

独自打开页面效果在浏览器中显示.

---------------->上面文字太难理解，网上找到了，更好理解的解释：<-------------------

jQuery Mobile框架的页面加载机很特殊。如果不明白其中的奥秘，往往会出现一些让人摸不着头脑的怪现象，比如页面进入后点击按钮后Javascript就是不执行，而用F5刷新页面后又可以正常执行等。

即使我们明白了HTML文件与jQuery Mobile中page概念的区别，也还是不能解决上述问题。当然，了解这个是一个大前提。

原来，jQuery Mobile是用Ajax的方式加载所有HTML中的标记data-role="page"的DIV元素中，第一个HTML页面一般都是完全加载，包括 HEAD 和BODY 都会被加载到DOM中，完成后便是链接到的其他页面内容的加载。 第二个HTML页面只有 BODY 中的内容会被以Ajax的方式加载到头一个HTML的 DOM中。 并且第二HTML页面的 BODY 中的内容也并非全部加载，而仅仅是其中的第一个带data-role="page"属性的DIV会被加载进去，其余的东西则无缘进入页面渲染。

也就是说，首页才完全加载，其他页面都只加载 BODY 中第一个带data-role="page"属性的DIV的内容