JQM，为了是页面访问速度加快，每一个链接都是通过AJAX 方式进行载入，不会加载新页面HEAD 区域的内容。
Jquery Mobile支持包含历史回退按钮的自动ajax读取外部页面的功能，
基本页面结构。
1 |
<divid="page"data-role="page">
|
2 |
内容区域、、
|
3 |
</div>
|
链接时，通过 AJAX， 将链接页面的PAGE 部分，载入至 首页。 而为了防止内存占用过高，使浏览内存较低的设备出现浏览器崩溃的情况。 JQM 只会缓存一个页面至页面中 。当请求另一个页面时，即将上一个页面的PAGE 区的DOM 移除。当在返回这个页面时，从历史记录中，重新加载该页面。
强制缓存页面的方法
在页面的page 上加入
data-dom-cache="true"
<div id="PagesBox" data-role="page" data-dom-cache="true"> </div>
页面预加载，
在链接上加入
data-prefetch
如：
<a href=\'#\'" data-prefetch> ... </a>
也可以，
$.mobile.loadPage(PageUrl,{showLoadMsg: false });
JQM 中的事件 。
点击 ， tap 。
在快速完成一次点击时，触发。 等同于 ，WEB 事件中的click ..
$("#a").live("tap",function(){
// 您想执行的code
});
点住不放 ， taphold
在按住不放后触发该事件(接近一秒钟的时间).
向上滑动，swipe 垂直向上滑动距离超过30CM 时触发。
向左滑动，swipeleft
向右滑动，swiperight
方向改变时。
orientationchange 即，通过重力感应旋转手机时，触发的函数。 在本地应用中，可以关闭手机重力感应系统，而在web 中不能关闭此功能。
i)在页面中添加这个属性，就可以将当前页面缓存到Dom缓存中，这样做的意义就是在下次再次访问这个页面的时候，就会调用Dom缓存中的页面。
data-dom-cache=true
ii)js后台中可以动态的添加下面属性，就可以设置当前页面缓存
$.mobile.page.prototype.options.domCache = true;
使用页面缓存的功能将会使DOM内容变大，可能导致某些浏览器打开的速度变得缓慢。因此，一旦选择了开启使用缓存功能，就要管理好缓存的内容，并做到及时清理。
.页面page控制、缓存问题
jquery mobile的页面机制主要分两种，一是单页，而是多页。
单页就是你在一个 html页面里面把所有需要用到的page都写在里面了，这个时候页面之间的转场一个可以靠 a标签里的href，里面是想要转到页面的ID
|
1
|
<Ahref="#page_id"></A>
|
那么我们更多的是使用多页的机制，把每个page独立写到不同的html页面里，在需要转到对应页面时，才通过ajax去获取页面的内容和js，这样使我们的app代码部署就如我们网站开发一样，一个页面一个html文件。
这样就会存在一个问题，因为每个page不像单页一样写在一起，jquery mobile的机制只会把需要显示的page加载到dom里面，当离开这个page时，会自动把这个page的dom清除掉，假如你想要保留这个page在dom里，以后再次显示，需要加上 data-dom-cache="true" 一属性
|
1
2
3
|
<DIVdata-dom-cache="true"data-role="page">
page内容
</DIV>
|
解决了page缓存的问题，那么又会遇到page里的js问题。例如我希望把page的dom缓存下来，但是我又希望每次这个page显示的时候，触发执行一些js，那么这个时候我们在对应page的事件处理时，就不能用 pageinit而是要用pageshow了，因为pageinit只在这个page从dom加载进来时触发，如果page缓存了，那么pageinit只会在第一次时触发。
|
1
2
3
|
$('#page_id').bind('pageshow',function(){
//页面每次显示你需要做的
}) |
除了pageshow，还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应，都是可以针对不同的需求使用的。
******************************************************************************************
// 去掉缓存 重新加载
1. 是否有加 data-dom-cache＝"true" ，有的话直接去掉，
2. 使用$.mobile.changepage(B页面，{reloadpage:true});
******************************************************************************************
在jQuery Mobile中，可以通过页面缓存的方式将访问过的历史内容写入页面文档的缓存中；当用户重新访问时，不需要重新加载，只要从缓存中读取就可以。
实例2-6 jQuery Mobile页面缓存
1. 功能说明
新建一个HTML页面，在内容区域中显示“这是一个被缓存的页面”文字。将“page”容器的“data-dom-cache”属性设置为“true”，可以将该页面的内容注入文档的缓存中。
2. 实现代码
新建一个HTML页面2-6.htm，加入代码如代码清单2-6所示。
代码清单 2-6 jQuery Mobile 页面缓存
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile页面缓存</title>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<link href=\'#\'" /jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css" />
<script src=\'#\'" /jquery-1.6.4.js"
type="text/javascript"></script>
<script src=\'#\'" /jquery.mobile-1.0.1.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.mobile.page.prototype.options.domCache = true;
})
</script>
</head>
<body>
<div data-role="page" data-dom-cache="true">
<div data-role="header"><h1>缓存页面</h1></div>
<div data-role="content">
<p>这是一个被缓存的页面</p>
</div>
<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
3. 页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-6所示。
4. 源码分析
本实例通过添加“page”容器的“data-dom-cache”属性，将对应容器中的全部内容写入缓存中。一般说来，如果需要将页面的内容写入文档缓存中，有以下两种方式：
·在需要被缓存的元素属性中添加一个“data-dom-cache”属性，设置该属性值为“true”或不设置属性值均可。该属性的功能是将对应的元素内容写入缓存中。
·通过JavaScript代码设置一个全局性的jQuery Mobile属性值为“ture”，即添加代码“$.mobile.page.prototype.options.domCache = true”，可以将当前文档写入缓存中。
说明 使用页面缓存的功能将会使DOM内容变大，可能导致某些浏览器打开的速度变得缓慢。因此，一旦选择了开启使用缓存功能，就要管理好缓存的内容，并做到及时清理。
相关推荐
4. **页面导航:** jQuery Mobile 自带了一个基于链接的页面导航系统，可以处理页面间的过渡效果，无需实际的页面刷新。 5. **自动适应屏幕大小:** 通过流式布局和媒体查询，jQuery Mobile 能够自动适应不同尺寸的...
在导航方面，jQuery Mobile提供了多种导航结构，如无刷新的页面切换、模态对话框和面板。理解这些导航机制有助于构建流畅的用户体验。同时，书里也会介绍如何处理页面加载和更新，确保数据的正确同步。 最后，性能...
- 利用数据-URL（data-url）缓存页面，减少网络请求。 - 调整主题系统，仅使用需要的主题颜色。 - 自定义图标，减少不必要的图标资源。 总结，jQuery Mobile 1.4.5 为移动Web应用开发提供了强大而灵活的工具，通过...
还会介绍如何利用jQuery Mobile的特性，如页面自动导航（Page Transitions）、数据绑定（Data Binding）和事件处理（Events），来实现平滑的页面间过渡和用户交互。 在控件部分，你将学习如何创建各种交互元素，...
- 通过这些实例，你可以实践如何构建和布局页面，以及如何应用和自定义 `jQuery Mobile` 的组件。 学习这个项目，你将能够理解 `jQuery Mobile` 的核心概念，掌握如何创建响应式布局，以及如何利用其丰富的组件库...
为了提高性能，可以使用数据属性（如`data-dom-cache="true"`）缓存页面，减少DOM操作，以及使用`$.mobile.ignoreContentEnabled = true;`防止自动增强某些元素。 掌握这些jQuery Mobile的常用技巧，将有助于提升...
在“JqueryMobile快速上手教程”中，我们将探讨如何利用页面预加载和缓存技术来优化用户体验，特别是以“班级通知页”为例，展示其实战应用。 **页面预加载** 页面预加载是 jQuery Mobile 提供的一项特性，其目的是...
在IT行业中，地图技术是移动应用开发不可或缺的一部分，特别是在使用jQuery Mobile这个轻量级的前端框架构建响应式、触屏友好的网页应用时。jQuery Mobile提供了丰富的交互元素和组件，而将地图集成到这些应用中则能...
1. `jquery.mobile-1.4.2.css` 是主样式表，包含了所有基本的样式规则，用于构建jQuery Mobile的页面布局和交互元素。 2. `jquery.mobile.inline-svg-1.4.2.css` 添加了对内联SVG图形的支持，使图标在不同设备上都能...
在Android开发中，WebView是一个非常重要的组件，它允许我们在原生应用中展示网页...更多关于WebView和jQuery Mobile的高级用法，如离线缓存、自定义主题、表单处理等，您可以参考jQuery Mobile官方文档进行深入学习。
首先，我们需要在HTML页面中引入jQuery和jQuery Mobile库。它们可以通过CDN或本地资源加载。 ```html <!DOCTYPE html> , initial-scale=1"> <title>jQuery Mobile Web API示例 ...
《使用jQuery Mobile实现火车列次查询系统》 在网页开发中，jQuery Mobile是一个强大的框架，专为移动设备设计，提供了一套完整的用户界面组件和交互效果。本教程将深入探讨如何利用jQuery Mobile来构建一个实用的...
这个版本的Demo集成了多个CSS文件，包括`jquery.mobile-1.4.5.css`、`jquery.mobile.icons-1.4.5.css`等，这些文件为页面布局、图标展示提供了完整的样式支持。例如，`jquery.mobile-1.4.5.css`是基础样式文件，定义...
jQuery Mobile 提供了一系列的事件，如 `pageinit`, `pageshow`, `pagehide` 等，这些事件可以在页面加载或切换时触发，便于执行初始化代码或清理工作。 #### 六、最佳实践 - **优化性能**：避免过多的 DOM 操作，...
利用HTML5的离线存储功能，开发者可以预先缓存页面和资源，确保用户在网络断开时仍能访问应用的部分功能。 在兼容性方面，jQuery Mobile 1.3.2 支持所有主流的移动浏览器，包括iOS的Safari、Android的WebView、...
- **标签：“jQueryMobile”** - **关键词提取**：jQuery Mobile作为标签，明确了本书的重点技术领域和工具选择。 - **关联性**：jQuery Mobile是构建响应式移动Web应用的强大框架，这直接关联到书籍的主题。 ###...
2. **Ajax导航系统**：jQuery Mobile通过Ajax技术实现页面间的平滑过渡，这使得用户在浏览多页面应用时感觉更像是在使用原生应用，而非传统的Web页面。 3. **数据链接（data-url）**：这是jQuery Mobile的标志性...
- **动态加载**：大型应用可以利用`data-dom-cache="true"`缓存页面，避免重复加载。 - **减少DOM元素**：过多的DOM节点会影响性能，应尽量减少不必要的HTML元素。 通过以上介绍，你应该对jQuery Mobile有了初步...
5. **动态加载**：jQuery Mobile支持页面的动态加载，通过`data-url`属性可以指定页面的唯一标识，从而实现页面的异步加载和缓存，提高性能。 6. **主题和样式**：jQuery Mobile使用一套基于CSS的可配置主题系统，...