《jQuery程序设计基础教程 工业和信息化普通高等教育十二五 规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第1章》由会员分享，可在线阅读，更多相关《jQuery程序设计基础教程 工业和信息化普通高等教育十二五 规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第1章（32页珍藏版）》请在金锄头文库上搜索。
1、,jQuery程序设计基础教程,授课教师： 职务：,第1章 jQuery概述,课程描述 本章介绍jQuery的概况，使读者了解什么是jQuery，以及jQuery的优势，然后配置好jQuery的工作环境，通过演示简单的实例使读者初识jQuery，并讲解jQuery的开发工具，为阅读本书后面的内容奠定基础。,本章知识点,1.1初识jQuery 1.2 jQuery对象和DOM对象 1.3 jQuery开发工具,1.1 初识jQuery,1.1.1 什么是jQuery 1.1.2 jQuery的优势 1.1.3 下载jQuery脚本文件和配置jQuery环境 1.1.4 第一个简单的jQuery程
2、序,1.1.1 什么是jQuery,对于不了解jQuery的读者而言，可以从jQuery的首字母联想它的根基，没错jQuery属于Java家族，它是一种快捷、小巧、功能丰富的JavaScript库。jQuery提供很多支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更加轻松。,Web应用程序的基本架构,Web服务器,Web服务器通常需要有固定的IP地址和永久域名，其主要功能如下： 存放Web应用程序。 接受用户申请的服务。如果用户申请浏览ASP、PHP等脚本文件，则Web服务器会对脚本进行解析，生成对应的临时HTML（HTM）文件。 如果脚本中需要访问数据库，则将SQL语句传
3、送到数据库服务器，并接收查询结果。 将HTML（HTM）文件传送到Web浏览器。,Web浏览器的主要功能如下, 由用户向指定的Web服务器（网站）申请服务。申请服务时需要指定Web服务器的域名或地址以及要浏览的HTML（HTM）文件或ASP、PHP等脚本文件。 从Web服务器下载申请的HTML（HTM）文件。 解析并显示HTML（HTM）文件，用户可以通过Web浏览器申请指定的Web服务器 Web浏览器和Web服务器使用HTTP协议进行通信。,jQuery的主要功能, 遍历和操作HTML元素。要实现动态网页，就需要在程序中对网页的内容进行控制。而HTML元素是构成网页的基本元素。jQuery可
4、以使用选择器选择网页中指定的HTML元素或遍历网页中的HTML元素，并可以在程序中获取和设置HTML元素的属性、对HTML元素进行创建、插入、删除、复制、替换等操作。本书将在第3章介绍jQuery选择器，在第4章介绍操作DOM元素的方法。 设置HTML元素的CSS样式。CSS（层叠样式表）是用来定义网页的显示格式的，使用它可以设计出更加整洁、漂亮的网页。通过在jQuery中设置HTML元素的CSS样式，可以很方便地动态改变HTML元素的显示样式。本书将在第8章介绍设置CSS样式的方法。 事件处理。jQuery可以很方便的将事件处理函数绑定到指定的HTML事件。从而对HTML事件进行相应。相关内
5、容将在第7章介绍。 很方便地实现与Ajax的交互。Ajax是用于创建交互式Web应用的网页开发技术，可以实现与服务器之间的异步通信。关于jQuery与Ajax的内容将在第10章介绍。 实现动画特效。在前端开发技术中，如何使界面更加美观、绚丽是很重要的课题。jQuery可以很方便地在HTML元素上实现动画效果，例如显示、隐藏、淡入淡出和滑动等，从而使页面活泼起来。本书将在第9章介绍jQuery动画特效。,1易于使用 2提供更多的功能强大的API 3拥有强大的开源讨论区 4设计更美观、专业的网页,1.1.2 jQuery的优势,比较知名的jQuery讨论区,1.1.3 下载jQuery脚本文件和配
6、置jQuery环境,1引用jQuery官网的在线最新脚本 2引用本地的jQuery脚本,1引用jQuery官网的在线最新脚本,jQuery官网提供在线的最新jQuery，地址如下： http:/ 引用jQuery官网在线最新脚本的方法如下： / jQuery程序 ,1.2.2 设置字体属性,在下面的情况下，引用在线jQuery脚本会出现问题： （1）Web服务器不能访问互联网。例如， 出于安全考虑，一些企业或机构的内部网站与外网是物理隔离的。 （2）jQuery官网有时也可能会出现掉线的情况（尽管目前出现这种情况的概率很低）。,可以通过下面的url访问jQuery下载页面,http:/ /
7、jquery程序 ,1.1.4 第一个简单的jQuery程序, $(document).ready(function() $(“p“).click(function() $(this).hide(); ); ); 单击我，我就会消失。 ,实例说明如下,（1）$()是jQuery()的缩写，它可以在DOM中搜索与指定的选择器（将在第3章中介绍）匹配的元素，并创建一个引用该元素的jQuery对象。 （2）$(document)是jQuery的常用对象，表示HTML文档对象。$(document).ready()方法指定$(document)的ready事件处理函数。ready事件当文档对象就绪的时
8、候被触发。 （3）$(“p“)是jQuery一个选择器，用于选择网页中所有的元素，$(“p“).click方法指定元素的click事件处理函数。click事件用户单击当元素对象的时候被触发。 （4）$(this)是一个JQuery对象，表示当前引用的HTML元素对象（这里指p元素）。hide()方法用于隐藏当前引用的HTML元素对象。 （5）【例1-1】首先在网页中使用p元素定义了一个字符串“单击我，我就会消失。”。然后通过jQuery 编程指定单击p元素时执行$(this).hide()隐藏p元素。,提示,浏览本例时应将网页文件和jQuery脚本库文件jquery.js放置在相同目录下。,1
9、.2 jQuery对象和DOM对象,1.2.1 DOM对象 1.2.2 jQuery对象,1.2.1 DOM对象,DOM是Document Object Model（文档对象模型）的简称，是W3C（万维网联盟）推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)。 HTML DOM 定义了访问和操作HTML文档的标准方法。它把HTML文档表现为带有元素、属性和文本的树结构（节点树）,使用HTML DOM 表现的HTML文档,浏览器对象,在HTML DOM类结构中包含一组浏览器对象。这组浏览器对象构成浏览器对象模型（BOM）。,BOM对象的具体功能,1.2.2
10、 jQuery对象,jQuery对象不同于DOM对象，但在实际使用时经常被混淆。DOM对象是通用的，既可以在jQuery程序中使用，也可以在标准JavaScript程序中使用。例如，在准JavaScript程序中根据HTML元素id获取对应的DOM对象的方法如下： var domObj = document.getElementById(“id“); 而jQuery对象来自jQuery类库，只能在jQuery程序中使用。只有jQuery对象才能引用jQuery类库中定义的方法，因此，应该尽可能在jQuery程序中使用jQuery对象，这样才能充分发挥jQuery类库的优势。通过jQuery的选
11、择器$()可以获得HTML元素获取对应的jQuery对象。例如，根据HTML元素id获取对应的jQuery对象的方法如下： var jqObj = $(“#id“);,DOM对象可以通过$()转换成jQuery对象,var jqObj = $( domObj);,1.3 jQuery开发工具,1.3.1 使用Dreamweaver编辑jQuery程序 1.3.2 调试jQuery程序,1.3.1 使用Dreamweaver编辑jQuery程序,Dreamweaver是著名网站开发工具。它使用所见即所得的接口，也具有HTML编辑的功能。很多前端设计人员都喜欢使用Dreamweaver设计网页，而
12、jQuery程序通常是嵌入在HTML网页中的。因此使用Dreamweaver作为jQuery开发工具是不错的选择。 要使Dreamweaver支持jQuery，就需要在Dreamweaver中安装一个jQuery_API.mxp插件。在本书下载源代码的01目录中提供了此插件的Dreamweaver CS5版本jQuery_api_for_dw_cs5.mxp。如果读者使用其他版本的Dreamweaver，可以自己搜索对应的jQuery_API.mxp插件）。,扩展管理对话框,运行Dreamweaver CS5，在菜单中依次选择“命令”“扩展管理”，打开扩展管理对话框,成功安装后的扩展管理对话框,单击“安装”按钮，打开选择文件的对话框，选择jQuery_api_for_dw_cs5.mxp，然后单击“确定”按钮。,在Dreamweaver中自动提示jQuery语法,重新启动Dreamweaver后，新建或编辑网页，引用jQuery.js后，就可以自动提示jQuery语法了,1.3.2 调试jQuery程序,使用Dreamweaver编辑jQuery程序很方便，但是不能调试jQuery程序。如果程序中有bug就不容易分析和解决了。 jQuery是JavaScript的脚本库，因此调试jQuery程序实际上就是调试JavaScript程序，具体方法将在2.9节介绍。,
