第14章　jQuery和jQuery Mobile基础课件.ppt

《第14章　jQuery和jQuery Mobile基础课件.ppt》由会员分享，可在线阅读，更多相关《第14章　jQuery和jQuery Mobile基础课件.ppt（9页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、JavaScript是最常见的脚本语言，它可以嵌入到HTML中，在客户端执行，是网页特效制作的最佳选择，同时也是浏览器普遍支持的网页脚本语言。JavaScript简介简介JavaScript是一种脚本编程语言，是基于对象并且事件驱动的程序。其程序代码嵌在HTML网页文件中，需要浏览者的浏览器进行解释运行。前面所学习的HTML属于一种标记语言，是用某种结构储存数据并在设备上显示的手段，两者属于完全不同的概念。在一个完整的网页中是离不开JavaScript程序的，因为有太多的功能需要它来实现。如果只是想单纯的显示网页的基本内容，那么，就没有必要再使用JavaScript程序了。在网页中使用在网页中

2、使用JavaScript的方法的方法JavaScript有着非常严格的编写规范，在前面的HTML学习中了解到JavaScript包含在网页的与标签中。由于JavaScript程序代码嵌入在HTML代码中，为了使页面代码结构清晰，设计者经常把JavaScript部分的代码放置在头部信息区。当然，也可以在HTML文档中多处嵌入JavaScript代码，但并不倡导的这样的做法。因为浏览器解析HTML文档时是自上而下的顺序，设计者需要确保JavaScript代码被优先解析。缩放和翻转变形缩放和翻转变形JavaScript的运算符是一些特定符号的集合，这些符号用来操作数据按特定的规则进行运算，并生成结果

3、。运算符所操作的数据被称为操作数，运算符和操作数连接并可运算出结果的式子就是表达式。实战练习实战练习使用使用JavaScript中的算术运算符中的算术运算符JavaScript条件和循环语句条件和循环语句JavaScript中提供了多种用于程序流程控制的语句，这些语句可以分为条件和循环两大类。条件语句包括if、switch等，循环语句包括while、for等。实战练习实战练习使用使用JavaScript中的中的if条件语句条件语句 最终文件：光盘最终文件第14章14-1-3.html视频：光盘视频第14章14-1-3.swf最终文件：光盘最终文件第14章14-1-4.html视频：光盘视频第1

4、4章14-1-4.swf JavaScript函数函数JavaScript中的函数是可以完成某种特定功能的一系列代码的集合，在函数被调用前函数体内的代码并不执行，即独立于主程序。函数的代码执行结果不一定是一成不变的，可以通过向函数传函数，用来解决不同情况下的问题，函数也可以返回一个值。实战练习实战练习使用使用JavaScript中的函数中的函数JavaScript事件事件事件是交互的桥梁，用户可以通过多种方式与浏览器载入的页面进行交互。Web应用程序开发者通过JavaScript脚本内置的和自定义的事件来响应用户的动作，就可以开发出更有交互性，动态性的页面。实战练习实战练习使用使用JavaSc

5、ript中的中的onLoad事件事件最终文件：光盘最终文件第14章14-1-5.html视频：光盘视频第14章14-1-5.swf最终文件：光盘最终文件第14章14-1-6.html视频：光盘视频第14章14-1-6.swfjQuery是一套开放原始代码的JavaScript函数库，可以说是目前最受欢迎的JS函数库，最让人津津乐道的就是它简化了DOM文件的操作，让我们轻松选择对象，并以简洁的程序完成想做的事情。除此之外，还可以通过jQuery指定CSS属性值，达到想要的特效与动画效果。另外，jQuery还强化异步传输以及事件功能，轻松访问远程数据。 jQuery简介简介jQuery是一个兼容多

6、浏览器的JavaScript库，核心理念是“写得更少，做得更多”。jQuery是免费的、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用AJAX以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。在网页中引用在网页中引用jQuery函数库函数库在网页中引用jQuery函数库的方法有两种，一种是直接下载js文件引用，另一种是使用CDN（Content Delivery Network）来加载链接库。 jQuery基本语法基本语法j

7、Query必须等浏览器加载HTML的DOM对象之后才能执行，可以通过.ready()方法来确认DOM对象是否已经全部加载，代码如下所示。jQuery (document).ready(function() /程序代码); jQuery选择器选择器jQuery选择器用来选择HTML中的元素，可以通过HTML标签名称、id属性以及class属性等来选择网页中的元素。使用使用jQuery设置设置CSS样式属性样式属性掌握了jQuery选择器的用法之后，除了可以操控HTML元素之外，还可以使用css()方法来改变网页元素的CSS样式。例如，设置HTML页面中所有元素的文字颜色为红色，可以写为如下的代码

8、。$(“p”).css(“color”,”red”); 实战练习实战练习使用使用jQuery改变列改变列表第一行效果表第一行效果最终文件：光盘最终文件第14章14-2-5.html视频：光盘视频第14章14-2-5.swfjQuery Mobile是jQuery在手机和平板电脑等移动设备上应用的版本。jQuery Mobile不仅给主流移动平台带来jQuery Mobile核心库，而且会发布一个完整统一的jQuery移动UI框架。jQuery Mobile简介简介jQuery Mobile是一个基于HTML 5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统与前端开发框架，可以

9、运行在所有智能手机、平板电脑和桌面设备上。设计者可以通过jQuery Mobile框架设计一个高度响应式的网站或应用运行于所有流行的智能手机、平板电脑和桌面系统。 jQuery Mobile功能特点功能特点jQuery Mobile是一套以jQuery和jQuery UI为基础，提供移动设备跨平台的用户界面函数库。通过它制作出来的网页能够支持大多数移动设备的浏览器，并且在浏览网页时，能够拥有操作应用软件一样的触碰及滑动效果。jQuery Mobile的工作原理的工作原理jQuery Mobile的工作原理是：提供可触摸的UI小部件和AJAX导航系统，使页面支持动画式切换效果。以页面中的元素标签

10、为事件驱动对象，当触摸或单击时进行触发，最后在移动终端的浏览器中实现一个个应用程序的动画展示效果。jQuery Mobile的操作流程与编写HTML页面相似，编写和开发jQuery Mobile页面的工具也与HTML页面的工具相同，可以通过记事本或专业的Dreamweaver来编辑制作jQuery Mobile页面，完成jQuery Mobile页面的制作后，将其保存为.html或.htm文件，就可以在浏览器或模拟器中浏览了。下载移动设备模拟器下载移动设备模拟器jQuery Mobile页面主要用于智能手机等移动设备浏览的，所以需要使用能够产生移动设备屏幕大小的模拟器来预览所制作jQuery

11、Mobile页面效果。在本节中将向读者介绍Opera Mobile Emulator移动设备模拟器。使用使用URL方式加载方式加载jQuery Mobile函数函数库库要开发jQuery Mobile页面，必须要引用jQuery Mobile函数库（.js）、CSS样式表（.css）和配套的jQuery函数库文件。引用方式有两种，一种是到jQuery Mobile官方网站上下载文件进行引用，另一种是直接通过URL链接到jQuery Mobile的CDN-hosted引用，不需要下载文件。 创建创建jQuery Mobile页面页面与开发和制作普通的网站页面相似，创建一个jQuery Mobil

12、e页面也非常简单。在jQuery Mobile页面中通过标签来组织页面结构，通过在标签中设置data-role属性来设置该标签的作用。每一个设置了data-role属性的标签就是一个容器，可以在该容器中放置其他的页面元素。 实战练习实战练习第一个第一个jQuery Mobile页面页面 jQuery Mobile页面链接页面链接在jQuery Mobile页面中，如果将页面元素的data-role属性值设置为page，则该元素成为一个容器，即页面中的某块区域。在一个jQuery Mobile页面中，可以设置多个元素成为容器，虽然元素的data-role属性值都是page，但是它们对应的id名称

13、不允许相同。实战练习实战练习实现实现jQuery Mobile页面中的链接跳转页面中的链接跳转 最终文件：光盘最终文件第14章14-4-3.html视频：光盘视频第14章14-4-3.swf最终文件：光盘最终文件第14章14-4-4.html视频：光盘视频第14章14-4-4.swf在本章中向读者介绍了有关JavaScript和jQuery的相关基础知识，使读者对JavaScript和jQuery有所了解。重点介绍了jQuery Mobile的功能特点以及操作流程等内容，使读者对jQuery Mobile有初步的认识和了解，并通过简单的jQuery Mobile页面的制作，讲解了创建jQuery Mobile页面的方法，为后面学习jQuery Mobile页面打下坚实的基础。