HTML5程序设计-jQuery程序设计.pdf

HTML5基础教程（第2版） 授课教师： 职务： 第14章 jQuery程序设计 课程描述 jQuery是一套Javascript脚 本库，它类似于.NET的类库 ,将一些工具方法或对象方 法封装在类库中。jQuery提 供了强大的功能函数和丰富 的用户界面设计。其实 jQuery并不是HTML5的组成 部分。但是，在HTML5时代， 如果您的网页里还充满了标 准Javascript语言编写的程 序，这显然是不合时宜的事 情。本章就简要地介绍一下 当前非常流行的Javascript 框架——jQuery的概况。 本章知识点 14.1 jQuery基础 14.2 jQuery选择器 14.3 设置HTML元素的属性与CSS样式 14.4 表单编程 14.5 事件和Event对象 14.6 jQuery动 14.7 jQuery Mobile 14.1 jQuery基础 p 14.1.1 下载jQuery p 14.1.2 初识jQuery 14.1.1 下载jQuery p既然jQuery是一套Javascript脚 本库，那么在开始jQuery程序设 计之前，就要把它下载到本地。 pjQuery的官方网址为http:// 。可以访问下面 的url下载最新版本的jQuery脚 本库。 http:// /download 下载jQuery 14.1.2 初识jQuery p为了在JavaScript程序中引用jQuery库，可以 在script标签中使用src属性指定14.1.1 小 节下载得到的jQuery脚本库文件的位置，例如： script src=jquery.js/script script // JavaScript程序 …… /script 【例14-1】 一个jQuery 编程的简单实例 !doctype html html head meta charset=utf-8 titleDemo/title /head body a href=/jQuery/a script src=jquery.js/script script $(document).ready(function(){ $(a).click(function(event){ alert(Hello jQuery); event.preventDefault(); }); }); /script /body /html 实例说明如下 （1）$(document)是jQuery的常用对象，表示HTML文档对象。 ()方法指定$(document)的ready事件处理函数。ready事件 文档对象就绪的时候被触发。 （2）$(a)表示网页中所有的a元素，$(a).click方法指定 a元素的click事件处理函数。click事件用户单击当元素对 象的时候被触发。 （3）event.preventDefault()方法阻止元素发生默认的行为 （例如，当点击提交按钮时阻止对表单的提交）。 （4） 【例14-1】首先在网页中使用a元素定义了一个访问 /的超链接。然后通过jQuery 编程指定单 击a元素时不执行默认的行为，而是弹出一个显示 “Hello jQuery”的对话框。 $()是jQuery()的缩写，它可以在DOM （Document Object Model， 文档对象模型）搜索与指定的选择器匹配的元素，并创建一个 引用该元素的jQuery对象。 提示 浏览本例时应将网页文件和jQuery脚本库 文件jquery.js放置在相同目录下。 【例14-2】 !doctype html html head script typ