jQuery Mobile 教程
1. jQuery Mobile 教程 2. jQuery Mobile 简介 3. jQuery Mobile 安装 4. jQuery Mobile 页面 5. jQuery Mobile 过渡 6. jQuery Mobile 按钮 7. jQuery Mobile 按钮图标 8. jQuery Mobile 工具栏 9. jQuery Mobile 导航栏 10. jQuery Mobile 可折叠块 11. jQuery Mobile 网格 12. jQuery Mobile 列表视图 13. jQuery Mobile 列表内容 14. jQuery Mobile 表单 15. jQuery Mobile 表单输入 16. jQuery Mobile 表单选择 17. jQuery Mobile 表单滑动条 18. jQuery Mobile 主题 19. jQuery Mobile 事件 20. jQuery Mobile 触摸事件 21. jQuery Mobile 滚屏事件 22. jQuery Mobile 方向改变事件 23. jQuery Mobile 实例 24. jQuery Mobile Data 属性 25. jQuery Mobile 图标 26. jQuery Mobile页面事件 27. jQuery Mobile CSS 类

jQuery Mobile 安装

jQuery Mobile 安装


在你的网页中添加 jQuery Mobile

你可以通过以下几种方式将jQuery Mobile添加到你的网页中:

  • 从 CDN 中加载 jQuery Mobile (推荐)
  • 从jQuerymobile.com 下载 jQuery Mobile库

从 CDN 中加载 jQuery Mobile

CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。.

使用 jQuery 内核, 你不需要在电脑上安装任何东西; 你仅仅需要在你的网页中加载以下层叠样式 (.css) 和 JavaScript 库 (.js) 就能够使用 jQuery Mobile:

jQuery Mobile CDN:

<head>

<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入 jQuery 库 -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- 引入 jQuery Mobile 库 -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

55面试教程网 »

国内用户推荐使用百度CDN:

jQuery Mobile CDN(百度):

<head>

<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

55面试教程网 »

本教程引用的库为百度 CDN 资源库。



下载 jQuery Mobile

如果你想将 jQuery Mobile 放于你的主机中,你可以从 jQuerymobile.com下载该文件。


<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="jquery.mobile-1.4.5.css">

<script src="jquery.js"></script>

<script src="jquery.mobile-1.4.5.js"></script>

</head>

提示: 将下载的文件放置于与网页同一目录下。

你是否想知道为什么在 <script> 标签中 没有插入 type="text/javascript" ?

在 HTML5 已经不需要该属性。 JavaScript 在所有现代浏览器中是 HTML5 的默认脚本语言!