移动Web开发之jQuery Mobile(课堂PPT)
合集下载
jqx课件(完整版)
1.B 针对课程中的重点、难点问题进行深入解
析，帮助学生更好地理解和掌握。
案例分析与实战演练
1.C 结合具体案例，进行分析和讨论，引导学生 进行实战演练，培养学生的实际应用能力。
拓展资源与学习建议
1.D 提供相关的拓展资源和学习建议，帮助学生
进行课外自主学习和拓展。
02 jqx基础
jqx概述
jqx是一款基于jQuery的UI组件库
jqx课件(完整版)
汇报人： 2023-12-26
目录
• 引言 • jqx基础 • jqx数据绑定 • jqx事件处理 • jqx样式与布局 • jqx高级功能 • jqx实战案例
引言
01
目的和背景
01
提高学习效果
通过提供全面、系统的课程内容，帮助学生更好地理解 和掌握相关知识，提高学习效果。
02
辅助教师教学
为教师提供丰富的教学资源和素材，方便教师进行教学 设计和课堂讲解，提高教学效果。
03
推动教育信息化
作为教育信息化的一部分，jqx课件的推广和应用有助 于推动教育行业的数字化、智能化发展。
课件内容概述
基础知识
1.A 介绍与课程相关的基本概念、原理和方法，为 学生打下坚实的知识基础。
重点难点解析
事件绑定
支持通过事件进行数据绑 定，实现用户交互与数据 更新的联动。
数据更新与同步
数据更新机制
数据校验与错误处理
支持实时监听数据源变化，并自动更 新界面元素。
支持数据校验和错误处理机制，确保 数据的准确性和完整性。
数据同步策略
提供多种数据同步策略，如立即更新 、延迟更新、批量更新等。
04 jqx事件处理
jqx核心特性
析，帮助学生更好地理解和掌握。
案例分析与实战演练
1.C 结合具体案例，进行分析和讨论，引导学生 进行实战演练，培养学生的实际应用能力。
拓展资源与学习建议
1.D 提供相关的拓展资源和学习建议，帮助学生
进行课外自主学习和拓展。
02 jqx基础
jqx概述
jqx是一款基于jQuery的UI组件库
jqx课件(完整版)
汇报人： 2023-12-26
目录
• 引言 • jqx基础 • jqx数据绑定 • jqx事件处理 • jqx样式与布局 • jqx高级功能 • jqx实战案例
引言
01
目的和背景
01
提高学习效果
通过提供全面、系统的课程内容，帮助学生更好地理解 和掌握相关知识，提高学习效果。
02
辅助教师教学
为教师提供丰富的教学资源和素材，方便教师进行教学 设计和课堂讲解，提高教学效果。
03
推动教育信息化
作为教育信息化的一部分，jqx课件的推广和应用有助 于推动教育行业的数字化、智能化发展。
课件内容概述
基础知识
1.A 介绍与课程相关的基本概念、原理和方法，为 学生打下坚实的知识基础。
重点难点解析
事件绑定
支持通过事件进行数据绑 定，实现用户交互与数据 更新的联动。
数据更新与同步
数据更新机制
数据校验与错误处理
支持实时监听数据源变化，并自动更 新界面元素。
支持数据校验和错误处理机制，确保 数据的准确性和完整性。
数据同步策略
提供多种数据同步策略，如立即更新 、延迟更新、批量更新等。
04 jqx事件处理
jqx核心特性
jQuery基础入门ppt
jQuery的选择器
jQuery 选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法
完善的事件处理机制
基本选择器
基本选择器是 jQuery 中最常用的选择 器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选 元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删 除. 这个方法的返回值是一个指向已被删除 的节点的引用. empty(): 清空节点 – 清空元素中的所有后 代节点(不包含属性节点).
创建节点和插入节点示例 var newP =$("<p>武广高速铁路即将通车！ </p>"); newP.insertAfter(―#chapter‖); //将创建的newP元 素插入到ID为#chapter的元素之后 或者 newP.appendTo(―body‖); //插入到body元素里
内容过滤选择器示例
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa $("p:cotains(di)") 改变不包含子元素(或者文本元素) 的 div 空 元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p元素的背景 色为 # bbffaa $("p:has(.mini)") 改变含有子元素(或者文本元素)的div元素 的背景色为 # bbffaa
jqx教学课件
过滤数据
使用jqx的filter函数，可以根据指定的条件对数据进行过滤， 从而提取出符合要求的数据。
转换数据
使用jqx的map、reduce等函数，可以将数据进行转换，例 如将数组转换为对象、将字符串转换为数字等。
使用jqx进行数据分析和处理
数据统计
使用jqx的reduce函数，可以对数据进行统计，例如求和、求平均值、求最 大值等。
jqx教学课件
xx年xx月xx日
contents
目录
• jqx简介 • jqx基础知识 • jqx进阶知识 • jqx实际应用案例 • jqx常见问题及解决方案
01
jqx简介
jqx是什么
总结词
jqx是一种基于JavaScript的开源前端框架。
详细描述
jqx是一个功能强大的前端框架，主要用于开发具有丰富交互和良好用户体验的 Web应用程序。它提供了一系列的组件和工具，包括UI组件、图表、表单、数据 交互等，以帮助开发者快速构建高质量的Web应用程序。
05
jqx常见问题及解决方案
jqx使用过程中的常见问题
• 总结词：jqx使用过程中可能会遇到一些令人困惑的问题，以下列出了一些常见的解决方案。 • 详细描述 • 问题1：如何使用jqx进行数据筛选和转换？ • 解决方案1：使用jqx的筛选器和转换器功能，可以方便地对数据进行处理。 • 问题2：如何将jqx与其他数据处理工具结合使用？ • 解决方案2：jqx可以与其他数据处理工具（如Excel、Python等）进行数据交互，具体方法可参考相关文档
正则表达式
使用正则表达式来匹配和查找字符串中的 模式。
jqx的高级应用
文件读写操作
可以读写文件，并支持文件的格式 化操作。
使用jqx的filter函数，可以根据指定的条件对数据进行过滤， 从而提取出符合要求的数据。
转换数据
使用jqx的map、reduce等函数，可以将数据进行转换，例 如将数组转换为对象、将字符串转换为数字等。
使用jqx进行数据分析和处理
数据统计
使用jqx的reduce函数，可以对数据进行统计，例如求和、求平均值、求最 大值等。
jqx教学课件
xx年xx月xx日
contents
目录
• jqx简介 • jqx基础知识 • jqx进阶知识 • jqx实际应用案例 • jqx常见问题及解决方案
01
jqx简介
jqx是什么
总结词
jqx是一种基于JavaScript的开源前端框架。
详细描述
jqx是一个功能强大的前端框架，主要用于开发具有丰富交互和良好用户体验的 Web应用程序。它提供了一系列的组件和工具，包括UI组件、图表、表单、数据 交互等，以帮助开发者快速构建高质量的Web应用程序。
05
jqx常见问题及解决方案
jqx使用过程中的常见问题
• 总结词：jqx使用过程中可能会遇到一些令人困惑的问题，以下列出了一些常见的解决方案。 • 详细描述 • 问题1：如何使用jqx进行数据筛选和转换？ • 解决方案1：使用jqx的筛选器和转换器功能，可以方便地对数据进行处理。 • 问题2：如何将jqx与其他数据处理工具结合使用？ • 解决方案2：jqx可以与其他数据处理工具（如Excel、Python等）进行数据交互，具体方法可参考相关文档
正则表达式
使用正则表达式来匹配和查找字符串中的 模式。
jqx的高级应用
文件读写操作
可以读写文件，并支持文件的格式 化操作。
jQuery Mobile中文手册：开发入门
最为直观也是最不唐突的适合移动用户的方式是通过使用一个特殊的 metatag：viewport。
metatag 是一个放入 HTML 文档的 head 元素内的 HTML 标记。如下是一个使用 viewport 标记的简单 例子： 。当这个 metatag 被添加到一个 HTML 页面后，我们看到此页面被缩放到更为适合这个移动设 备的大小，如图 2 所示。如果浏览器不支持此标记，它会简单地忽略此标记。 为了设置特定的值，将 viewport metatag 的 content 属性设为一个显式的值： 。通过改变初始值，屏幕就可以按要求被放 大或缩小。将值分别设置在 1.0 和 1.3 之间对于 iPhone 和 Android 平台是比较合适的。viewport metatag 还支持最小和最大伸缩，可用来限制用户对呈现页面的控制力。
技术理论
WebKit 和 HTML5
WebKit 是一种浏览器引擎，支撑着 iPhone 内的 Mobile Safari 浏览器以及 Android 内的浏览器背 后的技术。WebKit 也在其他的移动环境内有自己的用武之地，但是我们还是将我们的讨论集中于 iPhone 和 Android 平台。
除了 Android 设备与其他设备之间的这些物理差异之外，经验还表明 Android 的软件还通过设备内置 的(on-device)浏览器设置对页面的呈现实施了更多控制。不仅稳定，Android 平台还很灵活。取决于 SDK 等级和制造商，某个设备上的设置很可能不同于您的开发环境。
图 4 显示了取自 Android Emulator V1.6 的浏览器应用程序的设置页面。这个设置屏幕允许用户将一 个设备设置为一个预先定义的缩放等级(far、near、medium)或请求此设备自动适应页面。
metatag 是一个放入 HTML 文档的 head 元素内的 HTML 标记。如下是一个使用 viewport 标记的简单 例子： 。当这个 metatag 被添加到一个 HTML 页面后，我们看到此页面被缩放到更为适合这个移动设 备的大小，如图 2 所示。如果浏览器不支持此标记，它会简单地忽略此标记。 为了设置特定的值，将 viewport metatag 的 content 属性设为一个显式的值： 。通过改变初始值，屏幕就可以按要求被放 大或缩小。将值分别设置在 1.0 和 1.3 之间对于 iPhone 和 Android 平台是比较合适的。viewport metatag 还支持最小和最大伸缩，可用来限制用户对呈现页面的控制力。
技术理论
WebKit 和 HTML5
WebKit 是一种浏览器引擎，支撑着 iPhone 内的 Mobile Safari 浏览器以及 Android 内的浏览器背 后的技术。WebKit 也在其他的移动环境内有自己的用武之地，但是我们还是将我们的讨论集中于 iPhone 和 Android 平台。
除了 Android 设备与其他设备之间的这些物理差异之外，经验还表明 Android 的软件还通过设备内置 的(on-device)浏览器设置对页面的呈现实施了更多控制。不仅稳定，Android 平台还很灵活。取决于 SDK 等级和制造商，某个设备上的设置很可能不同于您的开发环境。
图 4 显示了取自 Android Emulator V1.6 的浏览器应用程序的设置页面。这个设置屏幕允许用户将一 个设备设置为一个预先定义的缩放等级(far、near、medium)或请求此设备自动适应页面。
jqx公开课教学课件
jqx公开课教学课件介绍本课件是为jqx公开课教学所准备的教学材料。
通过本课件，学生将能够全面了解jqx的基本概念、特点和使用方法。
课件内容包括以下几个方面：1. jqx简介- jqx是一种基于JavaScript的前端框架，用于开发用户界面。
- 通过jqx，开发者可以轻松实现页面的交互效果和数据展示。
2. jqx的特点- 支持跨浏览器和跨平台。
- 提供丰富的UI组件，如按钮、表格、图表等。
- 可以快速定义和定制界面样式。
- 支持数据绑定和事件处理。
- 具有优秀的性能和响应能力。
3. jqx的使用方法3.1 引入jqx库3.2 创建jqx组件$("#myButton").jqxButton({ width: '100px', height: '30px' });3.3 配置和使用jqx组件- 针对每个jqx组件，可以通过配置选项来自定义其外观和行为。
$("#myButton").jqxButton({ disabled: true });$("#myGrid").jqxGrid({ columns: [{ text: 'Name', datafield:'name' }] });4. 示例代码和实践- 通过实际的示例代码，演示jqx组件的创建和使用方法。
$(document).ready(function(){$("#myButton").jqxButton({ width: '100px', height: '30px' });$("#myButton").on('click', function() {alert('Button clicked!');});});5. 总结通过本课件的学习，学生可以初步掌握jqx的基本概念和使用方法。
第2章 jQuery Mobile页面
4 在 jQuery Mobile 的所有链接上，默认使用淡入淡
出的效果（如果浏览器支持）。
5
jQuery Mobile页面切换效果
1
浏览器支持页面切换效果的使用条件
2 页面切换效果可被应用于任何使用 data-transition 属
性的链接或表单提交：
<a href="#anylink" data-transition="slide"> 切换到第二个页面 </a>
5
添加新主题
1
• 可以自定义新主题。 • 通过编辑2CSS 文件（如已下载 jQuery Mobile） 来添加或编辑新主题。
• 添加一段样式，用字母名（f-z）对类进行重命名， 3 然后调整为喜欢的颜色和字体即可。
• 工具条添加类： ui-bar-(a-z)
4 • 文本内容添加类 : ui-body-(a-z)
页面效果在浏览器中显示。
5
jQuery Mobile 外部页面链接 1
设置外部页面链接的方法 在<a>中增加rel属性，并将属性值设为external
<a href="about.html" rel="external"> 3 <h4>Onest</h4> </a>
4
pages.html 5 2
jQuery Mobile多容器页面结构
1
在一个页面中，可以包含一个元素属性“data2 role”值为“page”的容器，也允许包含多个， 从而形成多容器页面结构。 容器之间各自独立，拥有唯一的id号属性。页面加 载时，以堆栈的方式同时加载；容器访问时，以内 4 部链接“#” 加对应“id”的方式进行设置。单击 该链接时，jQuery Mobile 将在页面文档寻找对 应id号的容器，实现容器间内容的访问。
出的效果（如果浏览器支持）。
5
jQuery Mobile页面切换效果
1
浏览器支持页面切换效果的使用条件
2 页面切换效果可被应用于任何使用 data-transition 属
性的链接或表单提交：
<a href="#anylink" data-transition="slide"> 切换到第二个页面 </a>
5
添加新主题
1
• 可以自定义新主题。 • 通过编辑2CSS 文件（如已下载 jQuery Mobile） 来添加或编辑新主题。
• 添加一段样式，用字母名（f-z）对类进行重命名， 3 然后调整为喜欢的颜色和字体即可。
• 工具条添加类： ui-bar-(a-z)
4 • 文本内容添加类 : ui-body-(a-z)
页面效果在浏览器中显示。
5
jQuery Mobile 外部页面链接 1
设置外部页面链接的方法 在<a>中增加rel属性，并将属性值设为external
<a href="about.html" rel="external"> 3 <h4>Onest</h4> </a>
4
pages.html 5 2
jQuery Mobile多容器页面结构
1
在一个页面中，可以包含一个元素属性“data2 role”值为“page”的容器，也允许包含多个， 从而形成多容器页面结构。 容器之间各自独立，拥有唯一的id号属性。页面加 载时，以堆栈的方式同时加载；容器访问时，以内 4 部链接“#” 加对应“id”的方式进行设置。单击 该链接时，jQuery Mobile 将在页面文档寻找对 应id号的容器，实现容器间内容的访问。
jqx教学动画课件(用)
后期处理
测试与优化
完成动画制作后，进行测 试和优化，确保动画课件 的稳定性和流畅性。
内容审查
对动画课件的内容进行审 查，确保内容的准确性和 可读性。
发布与分享
将动画课件发布到相关平 台或网站上，与受众群体 分享。
03
CATALOGUE
jqx教学动画实例解析
实例一：基本操作
总结词
了解jqx的基本操作和界面元素
jqx的背景可以追溯到2006年，当时jQuery开始流行，但插件库并不丰富，开发 者需要自己编写大量的代码来完成复杂的交互效果。因此，jqx应运而生，为开 发者提供了一站式的解决方案。
jqx基本概念
jqx是一个基于jQuery的插件库，因此它继承了jQuery的所 有特性，包括选择器、事件处理、动画效果等。
技巧二：注重细节，提升质量
总结词
关注细节能够提升动画质量，使动画更加生动、形象。
详细描述
在制作过程中，注重对细节的处理，如添加合适的音效、调整动画的帧率、优化角色动作等。这些细 节的优化能够使动画更加生动、有趣，提高观众的学习体验。
建议一：持续学习，提升技能
要点一
总结词
要点二
详细描述
不断学习新的技能和知识，能够提升制作水平，制作 出更高质量的动画。
jqx教学动画课件(用)
2023-11-11
CATALOGUE
目 录
• jqx基础知识 • jqx教学动画制作流程 • jqx教学动画实例解析 • jqx教学动画制作常见问题及解决
方案 • jqx教学动画制作技巧与建议 • 总结与展望
01
CATALOGUE
jqx基础知识
jqx背景介绍
jqx是一种基于jQuery的插件库，旨在为开发者提供更丰富的交互功能和更高效 的开发体验。
jqx完整版PPT课件
06
jqx性能优化与最佳实践
性能优化技巧分享
01
02
03
04
减少HTTP请求
通过合并CSS、JS文件， 使用CSS Sprite、Image Map等技术减少页面加 载时的HTTP请求数量。
优化图片
压缩图片大小、使用适 当的图片格式（如WebP、 AVIF等）、利用CDN加 速图片加载。
启用缓存
01
02
03
数据源配置与绑定
介绍如何在jqx组件中配置 数据源，实现数据的动态 绑定和展示。
数据格式化与解析
详细讲解如何对绑定到组 件的数据进行格式化处理， 以及如何将用户输入的数 据解析为实际数据。
数据操作与更新
阐述如何在jqx组件中对数 据进行增删改查等操作， 以及如何实现数据的实时 更新和同步。
编写JavaScript代码
在HTML文件的`<body>`标签中编写 JavaScript代码，创建和配置jqx应用。
引入必要的库
在HTML文件的`<head>`标签中引入jQuery 库和jqx相关的CSS和JavaScript文件。
运行应用
将HTML文件在浏览器中打开，即可看到创 建的jqx应用。
复杂布局与样式定制
布局管理器使用
介绍jqx布局管理器的使用方法，实现组件的复杂布局和动态调整。
样式定制与主题设计
详细讲解如何对jqx组件进行样式定制，包括颜色、字体、边框等 属性的设置，以及如何实现自定义主题的设计和应用。
响应式布局设计
阐述如何在jqx组件中实现响应式布局，以适应不同设备和屏幕尺 寸的展示需求。
兼容多种浏览器，如 Chrome、Firefox、 Safari等
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery Mobile简介 实例10-1：搭建jQuery Mobile开发环境
实例10-2：搭建测试环境 实例10-3：动态滑动条 实例10-4：使用选择菜单 综合实例：网上订餐系统
.
目 录
1
10.1.1 什么是jQuery
jQuery不但兼容CSS 3，而且还兼容各种浏览器（IE 6.0＋，FF 1.5＋，Safari 2.0＋，Opera 9.0＋），jQuery 2.0及后续版本将不再支持IE 6/7/8浏览器。 jQuery使用户能够更加方便地处理HTMLdocuments、events、实现动画效果，并且方便地 为网站提供Ajax交互。
（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如： （3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：
.
4
实 例10-3
动 态 滑 动 条
20
4
实 例10-3
动 态 滑 动 条
.
21Βιβλιοθήκη 4实 例10-3动 态 滑 动 条
.
22
4
实 例10-3
.
1
J Qu e r y
Mo b I l e简 介
8
4．jQuery Mobile的基本特点
（1）简明 （2）持续增强和优雅降级
（3）Accessibility
.
1
J Qu e r y
Mo b I l e简 介
9
（4）小规模 （5）主题设置
.
1
J Qu e r y
Mo b I l e简 介
10
1．下载插件
.
1
J Qu e r y
Mo b I l e简 介
2
jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。 jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。 jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面 插入一堆js来调用命令了，只需定义id即可。
文件下载页面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
13
（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobilex.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。
解压后的效果
.
实
2
例10-1
搭 建
获得的可运行文件 （3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运 行，初始运行界面如下图所示，此处选择语言“简体中文”。
选择语言
.
3
实 例10-2
搭 建 测 试 环 境
17
（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置 即可，如下图所示。
11
（1）登录jQuery Mobile官方网站（），如下图所示。
jQuery Mobile的官方网站界面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
12
（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。
动 态 滑 动 条
.
23
4
实 例10-3
动 态 滑 动 条
.
24
4
实 例10-3
动 态 滑 动 条
.
25
初始效果
创建了一个滑动条
.
4
实 例10-3
动 态 滑 动 条
26
5
实 例10-4
使 用 选 择 菜 单
.
27
5
实 例10-4
使 用 选 择 菜 单
.
28
5
实 例10-4
使 用 选 择 菜 单
.
29
5
实 例10-4
使 用 选 择 菜 单
.
30
初始效果
选择年份
.
5
实 例10-4
使 用 选 择 菜 单
31
选择月份
最终结果
.
5
实 例10-4
使 用 选 择 菜 单
32
网上订餐系统执行效果
.
6
综合 实例 网上 订餐 系统
jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。 jQuery.Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
.
1
J Qu e r y
Mo b I l e简 介
6
2．为什么使用jQuery Mobile？
.
1
J Qu e r y
Mo b I l e简 介
7
3．如何获取jQuery Mobile？
从CDN引用jQuery Mobile（推荐）； 从下载jQuery Mobile库。
设置界面
.
3
实 例10-2
搭 建 测 试 环 境
18
（5）单击“启动”按钮后，成功 运行测试工具Opera Mobile Emulator，如右图所示。
Opera Mobile Emulator运行效果
.
3
实 例10-2
搭 建 测 试 环 境
19
（1）create：当slider被创建时触发，例如：
1．jQuery库
.
1
J Qu e r y
Mo b I l e简 介
3
1
J Qu e r y
Mo b I l e简 介
.
4
2．jQuery基础语法
例如：
.
1
J Qu e r y
Mo b I l e简 介
5
10.1.2 jQuery Mobile基础
1．什么是jQuery Mobile？
jQuery Mobile是一个为触控优化的框架，用于创建移动Web应用程序； jQuery适用于所有流行的智能手机和平板电脑； jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习； 它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。
j Q u e r y
M o b I l e 开 发 环 境
14
2．使用URL方式加载插件文件
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
15
（1）登录Opera官方 网站，如右图所示。
Opera官方网站
.
3
实 例10-2
搭 建 测 试 环 境
16
（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，笔者获得的是： Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。
实例10-2：搭建测试环境 实例10-3：动态滑动条 实例10-4：使用选择菜单 综合实例：网上订餐系统
.
目 录
1
10.1.1 什么是jQuery
jQuery不但兼容CSS 3，而且还兼容各种浏览器（IE 6.0＋，FF 1.5＋，Safari 2.0＋，Opera 9.0＋），jQuery 2.0及后续版本将不再支持IE 6/7/8浏览器。 jQuery使用户能够更加方便地处理HTMLdocuments、events、实现动画效果，并且方便地 为网站提供Ajax交互。
（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如： （3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：
.
4
实 例10-3
动 态 滑 动 条
20
4
实 例10-3
动 态 滑 动 条
.
21Βιβλιοθήκη 4实 例10-3动 态 滑 动 条
.
22
4
实 例10-3
.
1
J Qu e r y
Mo b I l e简 介
8
4．jQuery Mobile的基本特点
（1）简明 （2）持续增强和优雅降级
（3）Accessibility
.
1
J Qu e r y
Mo b I l e简 介
9
（4）小规模 （5）主题设置
.
1
J Qu e r y
Mo b I l e简 介
10
1．下载插件
.
1
J Qu e r y
Mo b I l e简 介
2
jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。 jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。 jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面 插入一堆js来调用命令了，只需定义id即可。
文件下载页面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
13
（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobilex.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。
解压后的效果
.
实
2
例10-1
搭 建
获得的可运行文件 （3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运 行，初始运行界面如下图所示，此处选择语言“简体中文”。
选择语言
.
3
实 例10-2
搭 建 测 试 环 境
17
（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置 即可，如下图所示。
11
（1）登录jQuery Mobile官方网站（），如下图所示。
jQuery Mobile的官方网站界面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
12
（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。
动 态 滑 动 条
.
23
4
实 例10-3
动 态 滑 动 条
.
24
4
实 例10-3
动 态 滑 动 条
.
25
初始效果
创建了一个滑动条
.
4
实 例10-3
动 态 滑 动 条
26
5
实 例10-4
使 用 选 择 菜 单
.
27
5
实 例10-4
使 用 选 择 菜 单
.
28
5
实 例10-4
使 用 选 择 菜 单
.
29
5
实 例10-4
使 用 选 择 菜 单
.
30
初始效果
选择年份
.
5
实 例10-4
使 用 选 择 菜 单
31
选择月份
最终结果
.
5
实 例10-4
使 用 选 择 菜 单
32
网上订餐系统执行效果
.
6
综合 实例 网上 订餐 系统
jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。 jQuery.Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
.
1
J Qu e r y
Mo b I l e简 介
6
2．为什么使用jQuery Mobile？
.
1
J Qu e r y
Mo b I l e简 介
7
3．如何获取jQuery Mobile？
从CDN引用jQuery Mobile（推荐）； 从下载jQuery Mobile库。
设置界面
.
3
实 例10-2
搭 建 测 试 环 境
18
（5）单击“启动”按钮后，成功 运行测试工具Opera Mobile Emulator，如右图所示。
Opera Mobile Emulator运行效果
.
3
实 例10-2
搭 建 测 试 环 境
19
（1）create：当slider被创建时触发，例如：
1．jQuery库
.
1
J Qu e r y
Mo b I l e简 介
3
1
J Qu e r y
Mo b I l e简 介
.
4
2．jQuery基础语法
例如：
.
1
J Qu e r y
Mo b I l e简 介
5
10.1.2 jQuery Mobile基础
1．什么是jQuery Mobile？
jQuery Mobile是一个为触控优化的框架，用于创建移动Web应用程序； jQuery适用于所有流行的智能手机和平板电脑； jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习； 它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。
j Q u e r y
M o b I l e 开 发 环 境
14
2．使用URL方式加载插件文件
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
15
（1）登录Opera官方 网站，如右图所示。
Opera官方网站
.
3
实 例10-2
搭 建 测 试 环 境
16
（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，笔者获得的是： Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。