移动Web开发之jQueryMobile.pptxVIP

目录jQuery Mobile简介实例10-1：搭建jQuery Mobile开发环境实例10-2：搭建测试环境实例10-3：动态滑动条实例10-4：使用选择菜单综合实例：网上订餐系统10.1.1 什么是jQueryJQuery MobIle简介1jQuery是一款优秀的JavaScript框架，是一个轻量级的js库，核心理念是“write less,do more”（写得更少，做得更多）。它是一个兼容多浏览器的JavaScript库，2006年1月由美国人John Resig在纽约的Barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。在网页制作领域中，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交互。JQuery MobIle简介jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。1jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。1．jQuery库jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记将jQuery添加到网页中：headscript type=text/javascript src=jquery.js/script/headJQuery MobIle简介1jQuery库包含以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTML DOM遍历和修改AJAXUtilities2．jQuery基础语法JQuery MobIle简介1使用jQuery的基础语法如下：$(selector).action()美元符号$定义jQuery；选择符(selector)“查询”和“查找”HTML元素；action()执行对元素的操作。例如：$(this).hide() //隐藏当前元素$(p).hide() //隐藏所有段落$(.test).hide() //隐藏所有class=test的所有元素$(#test).hide() //隐藏所有id=test的元素10.1.2 jQuery Mobile基础JQuery MobIle简介11．什么是jQuery Mobile？jQuery Mobile是jQuery在手机上和平板设备上的版本，随着智能手机系统的普及，现在主流移动平台上的浏览器功能已经赶上了桌面浏览器，因此jQuery团队引入了jQuery Mobile（简称为JQM）。JQM的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码基础。jQuery Mobile是一个为触控优化的框架，用于创建移动Web应用程序；jQuery适用于所有流行的智能手机和平板电脑；jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习；它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。2．为什么使用jQuery Mobile？JQuery MobIle简介1jQuery Mobile将“write less,do more”这一理念提升到了新的层次：它自动为网页设计交互的易用外观，并在所有移动设计上保持一致。开发者不需要为每种移动设备或OS编写一个应用程序，例如：Android和Blackberry用Java编写，iOS用Objective C编写，Windows Phone用C#和.net编写。jQuery Mobile只用HTML、CSS和JavaScript，这些技术是所有移动Web浏览器的标准。JQuery MobIle简介3．如何获取jQuery Mobile？1常用以下两种方式获取jQuery Mobile：从CDN引用jQuery Mobile（推荐）；从jQ下载jQuery Mobile库。获取和使用方法将在实例10-1中进行讲解。为了更好地在PC端浏览jQue