（这段话直接摘自 中文API站 ）你学jquery的第一件事就是在 $(document).ready()函数中写代码，所以一切都在dom元素加载后执行。但是在jQuery Mobile中，AJAX会根据你的导航把每个页面的内容加载到dom中，而DOM ready 函数只是在第一个页面加载完毕才会执行。所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。

之所以要这么做的原因就是第①点，Jquery Mobile的跳转是基于AJAX的，所以ready()事件只会在主页面出发，子页面完全没效果。

要想在子页面加载时做一些初始化操作就得这样写：

$(document).on("pageinit","#page1",function(){ //do something... });

"#page1"是指需要初始化哪个page，所以这里引出了下一个注意事项“每个page的id一定要唯一”！

④每个page的id一定要唯一

如果整个应用都是使用Jquery mobile转场的话，那么所有html中的<div data-role="page" id="">这个id值都要不一样！只有ID不一样，才能让每个页面正确执行pageinit事件。

$(document).on("pageinit","#page1",function(){ //do something... }); $(document).on("pageinit","#page2",function(){ //do something... }); $(document).on("pageinit","#page3",function(){ //do something... });

⑤找页面元素最好从page id开始找

第④点说了，page的id一定要唯一，但是page下的元素的id在不同html页面是可以重复的，为了准确找到page子元素，我建议按照下面这样的格式来寻找：[$("page id").find("子元素")]

<script> $("#page1").find("#header_h1").html("页面一"); $("#page2").find("#header_h1").html("页面二"); $("#page3").find("#header_h1").html("页面三"); </script>

参数传递

在做java web项目的时候，完全不担心参数传递问题，但是HTML开发却跟java web有很大区别。

首先说明window.location的形式跳转到第二个页面如何接收参数。

一般跳转都是一个URL，而在URL后面接一个问号字符串"?xx=xx"就是带参数传递了，在第二个页面的时候可以获取当前页面的URL，再解析问号后面的字符串即可获得指定参数。

假设这是page1.html的跳转URL

<script> window.location = "page2.html?id=123&name=ABC"; </script>

在page2.html可以这样获得参数：

<script> var data = $.getUrlParam(window.location.href); alert("URL:"+window.location.href); alert("ID:"+data.id); alert("NAME:"+data.name); </script>

我封装了一个$.getUrlParam方法用于解析URL参数：

<script> /** * 解析URL中的参数 * @param {url路径} string * @returns {返回object<key,value>} */ $.getUrlParam = function(string) { var obj = new Object(); if (string.indexOf("?") != -1) { var string = string.substr(string.indexOf("?") + 1); var strs = string.split("&"); for (var i = 0; i < strs.length; i++) { var tempArr = strs[i].split("="); obj[tempArr[0]] = tempArr[1]; } } return obj; } </script>

而如果用Jquery Mobile的形式传递的话，则需要了解一个事件[pagebeforechange]，这个事件简单说就是在页面转场时触发，此时转场页面元素已经到位，你在这个事件内直接操作转场页面元素或js方法以达到参数传递的作用。

我是从 这个博客 看到这种传递参数的方式的。

<script> $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) { if (typeof data.toPage != "string") { var url = $.mobile.path.parseUrl(e.target.baseURI); if (url.href.search(pageUrl) != -1) { //从url中解析参数 var params = $.getUrlParam(url.href); var page = $(e.target).find("#子页面page ID"); page.find("#id").val(params.id); page.find("#name").html(params.name); } } } $.mobile.changePage("page2.html?id=123&name=ABC"); </script>

 注：上面代码通过[$(e.target).find("#子页面page ID");]获取的是page2.html的page id，随后再通过它找到自己的子元素进行数据初始化操作。

想了解更多pagebeforechange事件，可以自行网上搜索关键字查看，这类文章非常多！

目前我还有两个疑问：

一个是通过[$.mobile.changePage]跳转时，可以传入data属性，这个我不知道子页面怎么去接收。

$.mobile.changePage({ 　　url: "searchresults.php", 　　type: "get", 　　data: $("form#search").serialize() });

第二个是如果用<form action="page2.html">...</form>的形式提交表单数据到page2，不知道这个怎么接收参数。

因为目前用得还不深，等随后有相关开发需求再研究吧。