第14章-jQuery和jQuery-Mobile基础.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,14.1,JavaScript,基础,JavaScript,是最常见的脚本语言，它可以嵌入到,HTML,中，在客户端执行，是网页特效制作的最佳选择，同时也是浏览器普遍支持的网页脚本语言。,JavaScript,简介,JavaScript,是一种脚本编程语言，是基于对象并且事件驱动的程序。其程序代码嵌在,HTML,网页文件中，需要浏览者的浏览器进行解释运行。前面所学习的,HTML,属于一种标记语言，是用某种结构储存数据并在设备上显示的手段，两者属于完全不同的概念。在一个完整的网页中是离不开,JavaScript,程序的，因为有太多的功能需要它来实现。如果只是想单纯的显示网页的基本内容，那么，就没有必要再使用,JavaScript,程序了,。,在网页中使用,JavaScript,的方法,JavaScript,有着非常严格的编写规范，在前面的,HTML,学习中了解到,JavaScript,包含在网页的,与,标签中。由于,JavaScript,程序代码嵌入在,HTML,代码中，为了使页面代码结构清晰，设计者经常把,JavaScript,部分的代码放置在头部信息区。当然，也可以在,HTML,文档中多处嵌入,JavaScript,代码，但并不倡导的这样的做法。因为浏览器解析,HTML,文档时是自上而下的顺序，设计者需要确保,JavaScript,代码被优先解析。,缩放和翻转变形,JavaScript,的运算符是一些特定符号的集合，这些符号用来操作数据按特定的规则进行运算，并生成结果。运算符所操作的数据被称为操作数，运算符和操作数连接并可运算出结果的式子就是表达式。,实战练习,使用,JavaScript,中的算术运算,符,JavaScript,条件和循环语句,JavaScript,中提供了多种用于程序流程控制的语句，这些语句可以分为条件和循环两大类。条件语句包括,if,、,switch,等，循环语句包括,while,、,for,等。,实战练习,使用,JavaScript,中的,if,条件语句,最终文件：光盘,最终文件,第,14,章,14-1-3.html,视频：光盘,视频,第,14,章,14-1-3.swf,最终文件：光盘,最终文件,第,14,章,14-1-4.html,视频：光盘,视频,第,14,章,14-1-4.swf,JavaScript,函数,JavaScript,中的函数是可以完成某种特定功能的一系列代码的集合，在函数被调用前函数体内的代码并不执行，即独立于主程序。函数的代码执行结果不一定是一成不变的，可以通过向函数传函数，用来解决不同情况下的问题，函数也可以返回一个值。,实战,练习,使用,JavaScript,中的函数,JavaScript,事件,事件是交互的桥梁，用户可以通过多种方式与浏览器载入的页面进行交互。,Web,应用程序开发者通过,JavaScript,脚本内置的和自定义的事件来响应用户的动作，就可以开发出更有交互性，动态性的页面。,实战,练习,使用,JavaScript,中的,onLoad,事件,最终文件：光盘,最终文件,第,14,章,14-1-5.html,视频：光盘,视频第,14,章,14-1-5.swf,最终文件：光盘,最终文件,第,14,章,14-1-6.html,视频：光盘,视频,第,14,章,14-1-6.swf,14.2,jQuery,基础,jQuery,是一套开放原始代码的,JavaScript,函数库，可以说是目前最受欢迎的,JS,函数库，最让人津津乐道的就是它简化了,DOM,文件的操作，让我们轻松选择对象，并以简洁的程序完成想做的事情。除此之外，还可以通过,jQuery,指定,CSS,属性值，达到想要的特效与动画效果。另外，,jQuery,还强化异步传输以及事件功能，轻松访问远程数据。,jQuery,简介,jQuery,是一个兼容多浏览器的,JavaScript,库，核心理念是“写得更少，做得更多”。,jQuery,是免费的、开源的，使用,MIT,许可协议。,jQuery,的语法设计可以使开发者更加便捷，例如操作文档对象、选择,DOM,元素、制作动画效果、事件处理、使用,AJAX,以及其他功能。除此之外，,jQuery,提供,API,让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页,。,在网页中引用,jQuery,函数库,在网页中引用,jQuery,函数库的方法有两种，一种是直接下载,js,文件引用，另一种是使用,CDN,（,Content Delivery Network,）来加载链接库。,jQuery,基本语法,jQuery,必须等浏览器加载,HTML,的,DOM,对象之后才能执行，可以通过,.ready(),方法来确认,DOM,对象是否已经全部加载，代码如下所示。,jQuery(document).ready(function(),/,程序代码,);,jQuery,选择器,jQuery,选择器用来选择,HTML,中的元素，可以通过,HTML,标签名称、,id,属性以及,class,属性等来选择网页中的元素。,使用,jQuery,设置,CSS,样式属性,掌握了,jQuery,选择器的用法之后，除了可以操控,HTML,元素之外，还可以使用,css(),方法来改变网页元素的,CSS样式。例如，设置,HTML,页面中所有,元素的文字颜色为红色，可以写为如下的代码。,$(“p”).css(“color”,”red”);,实战练习,使用,jQuery,改变列表第一行效果,最终文件：光盘,最终文件,第,14,章,14-2-5.html,视频：光盘,视频,第,14,章,14-2-5.swf,14.3,jQuery Mobile,基础,jQuery Mobile,是,jQuery,在手机和平板电脑等移动设备上应用的版本。,jQuery Mobile,不仅给主流移动平台带来,jQuery Mobile,核心库，而且会发布一个完整统一的,jQuery,移动,UI,框架。,jQueryMobile,简介,jQuery Mobile,是一个基于,HTML 5,，拥有响应式网站特性，兼容所有主流移动设备平台的统一,UI,接口系统与前端开发框架，可以运行在所有智能手机、平板电脑和桌面设备上,。设计者,可以通过,jQuery Mobile,框架设计一个高度响应式的网站或应用运行于所有流行的智能手机、平板电脑和桌面系统。,jQuery Mobile,功能特点,jQuery Mobile,是一套以,jQuery,和,jQuery UI,为基础，提供移动设备跨平台的用户界面函数库。通过它制作出来的网页能够支持大多数移动设备的浏览器，并且在浏览网页时，能够拥有操作应用软件一样的触碰及滑动效果。,jQuery Mobile,的工作原理,jQuery Mobile,的工作原理是：提供可触摸的,UI,小部件和,AJAX,导航系统，使页面支持动画式切换效果。以页面中的元素标签为事件驱动对象，当触摸或单击时进行触发，最后在移动终端的浏览器中实现一个个应用程序的动画展示效果。,14.4,jQuery Mobile,操作流程,jQuery Mobile,的操作流程与编写,HTML,页面相似，编写和开发,jQuery Mobile,页面的工具也与,HTML,页面的工具相同，可以通过记事本或专业的,Dreamweaver,来编辑制作,jQuery Mobile,页面，完成,jQuery Mobile,页面的制作后，将其保存为,.html,或,.htm,文件，就可以在浏览器或模拟器中浏览了。,下载移动设备模拟器,jQuery Mobile,页面主要用于智能手机等移动设备浏览的，所以需要使用能够产生移动设备屏幕大小的模拟器来预览所制作,jQuery 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 Mobile,页面也非常简单。在,jQuery Mobile,页面中通过,标签来组织页面结构，通过在标签中设置,data-role,属性来设置该标签的作用。每一个设置了,data-role,属性的,标签就是一个容器，可以在该容器中放置其他的页面元素。,实战练习,第一个,jQuery Mobile,页面,jQuery Mobile,页面链接,在,jQuery Mobile,页面中，如果将页面元素的,data-role,属性值设置为,page,，则该元素成为一个容器，即页面中的某块区域。在一个,jQuery Mobile,页面中，可以设置多个元素成为容器，虽然元素的,data-role,属性值都是,page,，但是它们对应的,id,名称不允许相同,。,实战练习,实现,jQuery Mobile,页面中的链接跳转,最终文件：光盘,最终文件,第,14,章,14-4-3.html,视频：光盘,视频,第,14,章,14-4-3.swf,最终文件：光盘,最终文件,第,14,章,14-4-4.html,视频：光盘,视频,第,14,章,14-4-4.swf,14.5,本章小结,在本章中向读者介绍了有关,JavaScript,和,jQuery,的相关基础知识，使读者对,JavaScript,和,jQuery,有所了解。重点介绍了,jQuery Mobile,的功能特点以及操作流程等内容，使读者对,jQuery Mobile,有初步的认识和了解，并通过简单的,jQuery Mobile,页面的制作，讲解了创建,jQuery Mobile,页面的方法，为后面学习,jQuery Mobile,页面打下坚实的基础。,