今天测试jQuery Mobile的主题功能时，动态改变它的theme，出现总是没有更新主题效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.min.css" />
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script type="text/javascript">
$(function(){
var selTheme = $("#selTheme");
selTheme.bind("change",function(){
if(selTheme.val()!=""){
$.cookie("StrTheme",selTheme.val(),{
path:"/weixin",
expires:1
})
window.location.reload();
}
});
});
/*
该段代码放在ready里面，则只有第一次生效，因为放在ready里面就意味着要等DOM加载完成在执行，
此时页面已经加载了一种主题，再执行该段代码更换另一宗主题，但是没有刷新，所以页面在显示上就没有变化过来
*/
if($.cookie("StrTheme")){
alert($.cookie("StrTheme"));
$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}
</script>
<base>
<title>jqueryMobile_3</title>
</head>
<body>
<!-- 页面一 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>雾烨</h1>
<div data-role="navbar">
<ul>
<!-- 添加样式， class="ui-btn-active" 表示该按钮是活动的 -->
<li><a href="index.html" data-iconpos="top" data-icon="search">Search</a></li>
<li><a href="index.html" data-iconpos="top" data-icon="home">Home</a></li>
<li><a href="jqueryMobile_4.html" data-iconpos="top" data-icon="info">More</a></li>
</ul>
</div>
</div>
<div data-role="content">
<select id="selTheme" data-native-menu="false">
<option value="">选择主题</option>
<option value="a">主题a</option>
<option value="b">主题b</option>
<option value="c">主题c</option>
<option value="d">主题d</option>
<option value="e">主题e</option>
</select>
</div>
<div data-role="footer">
<h2>©2015 ripin.com test</h2>
</div>
</div>
</body>
</html>
将该段代码
if($.cookie("StrTheme")){
alert($.cookie("StrTheme"));
$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}
放到ready()外，问题解决，此刻才深刻理解到先加载完DOM再 执行ready中的函数的意思。这里的主题无效也是因为已经加载完dom内容，页面显示已经完成，此时主题设置了，但是没有刷新，所以页面显示上也就无效。
相关推荐
在早期版本的Vue（v1.x）中，`ready`事件处理函数是一个重要的生命周期钩子，它会在组件挂载完成后被调用，即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而，在Vue的最新版本（v2.x及以上）中，`ready`...
在 jQuery 中，ready() 函数是用来执行代码的一个核心函数，它确保了在 DOM（文档对象模型）完全加载和解析完成后执行代码。为了理解 ready() 函数，我们需要与 window 的 load 事件进行比较，了解它们在页面加载...
5. 对于使用模块化的JavaScript开发框架，如RequireJS等，可以利用它们提供的依赖管理功能来控制脚本的加载和执行顺序，这样也可以有效避免ready函数的冲突问题。 6. 在更为极端的情况下，如果项目结构允许，甚至...
JQuery的ready函数与JS的onload的区别：1.执行时间[removed]必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同[removed]不能...
在Vue的生命周期中，提供了多种钩子函数，如 `beforeCreate`、`created`、`beforeMount`、`mounted` 等，帮助开发者在不同阶段对组件进行操作和控制。然而，在实际项目开发中，有时我们可能需要一个特定的钩子来标记...
网页中 JS 函数自动执行常用三种方法 在网页开发中，自动执行 JS 函数是一种常见的需求，例如在页面加载完成后执行某些操作。今天，我们将介绍网页中 JS 函数自动执行常用三种方法。 JS 方法 在 HTML 中，我们...
这篇教程聚焦于jQuery库中的一个核心方法——`ready`，它在页面加载过程中的作用至关重要。`ready`方法确保了指定的函数在DOM（文档对象模型）完全加载并准备就绪时执行，而不是等待所有资源如图片、脚本等完全加载...
"ready.js" 是一个轻量级、高效的JavaScript库，它允许开发者在DOM（文档对象模型）加载完成后执行指定的函数，从而确保页面元素已经就绪，可以进行操作。这个压缩包包含一个名为 "ready.js-master" 的目录，很可能...
在这篇文章中，我们将深入探讨jQuery中的ready函数、css函数和text()方法，并通过一个具体示例来展示它们的使用方法。 首先，ready函数是jQuery中用于确保文档完全加载和DOM树完全可用后再执行特定代码的方式。通常...
本文将深入探讨`ready()`和`onload`这两个事件处理函数，它们都是用来确保页面元素加载完成后再执行特定代码的，但它们的用法和触发时机有所不同。 首先，`$(document).ready()`，通常简写为`$(function() {...})`...
### jQuery下组织JavaScript代码(js函数化) #### 一、引言 随着项目的复杂度增加，JavaScript代码的组织和管理变得尤为重要。特别是在使用jQuery时，如何有效地组织代码，使其既易于维护又具有良好的可读性，成为...
`$(document).ready()` 函数提供了一种简单有效的方法来实现这一点。 **示例代码**: ```javascript $(document).ready(function(){ alert("开始了"); }); ``` 当页面DOM结构完全加载完毕后，上述代码中的函数将被...
JavaScript中的回调函数是一种常见且重要的编程模式，尤其在异步编程中扮演着核心角色。回调函数的基本概念是将一个函数作为参数传递给另一个函数，以便在特定条件满足时执行。这种设计模式允许开发者分离任务的执行...
首先，根据描述，我们要明确一个关键点：在JavaScript中，所有的函数本质上都是对象，而`Function`和`Object`之间的联系则体现在它们都是JavaScript内置的构造函数。 1. **函数作为对象**： - `fn instanceof ...
本文着重讲解了在JQuery中使用$(document).ready()函数的详细方法和它的重要性。 在JQuery中，$符号是JQuery库的简写和引用。例如，$()函数等同于jQuery()函数。它为开发者提供了一种方便的方式来选择和操作文档中...
`jQuery(document).ready()`函数是jQuery中的一个重要概念，它确保了在执行任何JavaScript代码之前，DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...
在JavaScript中，onload函数是最经常使用的，几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句，因为按照文档流的执行顺序，通常用于头部加载...