admin 管理员组文章数量: 887021
2023年12月17日发(作者：编程分几个阶段)
第7章 jQuery Mobile概述
第7章 jQuery Mobile概述
jQuery Mobile是用于前端开发的免费开源框架，可以运行在目前所有主流智能手机、平板等移动终端和兼容运行在桌面设备的网页中。这让设计者不需要为每一个移动设备或操作系统单独开发应用，而可以通过使用该框架，设计一个高度响应式的网站或应用运行于所有流行的智能手机、平板电脑和桌面系统。
【教学导航】
教学目标
重难点
教学方法
课时建议
（1） jQuery Mobile框架的安装和引用
（2） jQuery的基本语法
（1） jQuery Mobile框架的安装和引用
理论实践一体化、比较法
1课时
【教学任务】
一、jQuery Mobile简介
jQuery Mobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统，它具有简单、高效的特点，能够让没有美工基础的开发者在极短的时间内做出非常完美的界面设计。
jQuery Mobile是一套以jQuery为基础，为跨平台移动设备提供的用户界面函数库。jQuery Mobile框架是以jQuery类库为基础而开发的，它沿用了jQuery框架的语法、接口、样式等核心内容，但主要专注于移动方面的设计。jQuery Moible框架设计的宗旨是通过使用较少的HTML5、CSS3、JavaScript和AJAX代码来达到对页面高效布局的目的，完全将jQuery框架倡导的“写得更少、做得更多”理念升华到一个全新的高度。
（1）jQuery Mobile工作原理
jQuery Mobile通过提供可触摸的UI小部件和AJAX导航系统，使页面支持动画式切换效果。以页面中的元素标签为事件驱动对象，当触摸或单击时进行触发，最后在移动终端的浏览器中实现一个个应用程序的动画展示效果。
（2）jQuery Moible特点
1
第7章 jQuery Mobile概述
➢
框架体积小
➢
强大的AJAX驱动导航
➢
强大的浏览器兼容性
➢
丰富的主题风格
➢
支持触摸与其他鼠标事件
二、jQuery Mobile框架安装与引用
（1）下载jQuery Mobile库到本地引用
下载详见操作步骤，之后，通过HTML引入CSS和JavaScript的语法，引用库文件的代码为：
（2）CDN引用jQuery Mobile库
jQuery Mobile框架支持目前主流的CDN方式引用库文件，这样可以最大程度提高文件下载速度，其引用示例代码如下：
三、jQuery基本语法
由于jQuery Mobile的操作形式和jQuery一样，所以在此简单回顾一些jQuery的基础。
jQuery的使用方法非常简单，只需要指定作用的DOM对象及对象执行的操作即可，其基本语法格式如下。$(选择器).操作();
2
第7章 jQuery Mobile概述
其中，“$()” 是jQuery常用的一个回传函数，表示选取的意思，可看作英文
selector 的缩写，具体选取的内容由函数所带的选择器参数说明，对选取内容的想要执行什么方法或者处理什么事件，则通过“$()”后面所带的操作方法来实现。
除此之外，“$”是jQuery中最频繁使用的符号，提供了各种各样丰富的功能，可作为功能函数的前缀，完善，创建页面的DOM节点等。jQuery选择器和操作类型详见示例演示。
3
版权声明：本文标题：《响应式网页开发实战》教学教案—第7章 jQuery Mobile概述 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1702817990h432034.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论