JavaScript+jQuery交互式Web前端开发（第2版） 课件 第9章 jQuery（上）.pptx

第9章jQuery（上）;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;初识jQuery;了解什么是jQuery，能够描述jQuery的特点;9.1.1什么是jQuery;jQuery具有以下6个特点。;目前jQuery有3个系列的版本，分别是jQuery1.x、jQuery2.x和jQuery3.x系列的版本。

它们的区别在于，jQuery1.x系列的版本保持了对早期版本的IE浏览器的支持；jQuery2.x系列的版本不兼容IE6~IE8浏览器，从而更加轻量化；jQuery3.x系列的版本不兼容IE6~IE8浏览器，此系列的版本增加了一些新方法，并对一些方法进行了优化和改进。;掌握jQuery的下载和引入，能够独立完成jQuery的下载并且能够使用两种方式引入jQuery;在学习使用jQuery之前，需要下载和引入jQuery，具体操作步骤如下。;9.1.2下载和引入jQuery;9.1.2下载和引入jQuery;9.1.2下载和引入jQuery;掌握jQuery的简单使用，能够使用jQuery实现简单的页面效果;在使用jQuery时可以分为3个步骤，具体如下。;下面通过代码演示jQuery的简单使用，首先定义一个div标签，并使用jQuery获取元素，然后将元素在页面中隐藏，示例代码如下。;熟悉jQuery对象，能够区别jQuery对象和DOM对象;在页面中引入jQuery后，全局作用域下会新增两个变量，分别是$和jQuery，这两个变量引用的是同一个对象，该对象称为jQuery顶级对象。为了方便书写，通常使用$变量。

下面通过代码演示$变量和jQuery变量的使用。;;9.1.4 jQuery对象;9.1.4 jQuery对象;;9.1.4 jQuery对象;9.1.4 jQuery对象;9.1.4 jQuery对象;jQuery选择器;掌握基本选择器的使用，能够灵活应用基本选择器获取元素;jQuery提供了类似CSS选择器的机制，使用选择器可以很方便地获取元素，使用jQuery选择器获取元素的语法格式如下。;下面列举jQuery中常用的基本选择器，具体如下表所示。;下面通过代码进行演示。;;;下面列举jQuery中常用的层次选择器，具体如下表所示。;下面通过代码进行演示。;;;下面列举jQuery中常用的筛选选择器，具体如下表所示。;续上一页表;选择器;下面通过代码进行演示。;前面的示例代码运行后，使用了筛选选择器的输出结果如下图所示。;;;1.属性选择器;续上一页表;2.子元素选择器;9.2.4 其他选择器;3.表单选择器;9.2.4 其他选择器;9.2.4 其他选择器;jQuery内容操作;掌握jQuery内容操作，能够灵活应用jQuery中操作元素内容的方法;9.3jQuery内容操作;下面列举jQuery中元素内容操作的方法，具体如下表所示。;;jQuery样式操作;掌握css()方法的使用，能够灵活应用css()方法操作元素的样式;9.4.1 css()方法操作元素的样式;9.4.1 css()方法操作元素的样式;下面通过代码演示如何使用css()方法操作元素的样式。

首先定义一个div标签，并设置其宽度为100px，高度为100px，背景颜色为blue，然后使用css()方法将div标签的宽度设置为200px，高度为200px，背景颜色为pink。;;9.4.2 操作元素样式类;下面通过代码进行演示。

首先定义1个div标签和3个类，这3个类分别为first、second和third，再使用addClass()方法为div标签添加first类和second类，然后使用removeClass()方法删除div标签中的first类，最后使用toggleClass()方法判断div标签中是否存在third类，若存在则删除该类，否则添加该类。;9.4.2 操作元素样式类;jQuery属性操作;掌握prop()方法的使用，能够应用prop()方法操作元素的属性;9.5.1 prop()方法;9.5.1 prop()方法;9.5.1 prop()方法;掌握attr()方法的使用，能够应用attr()方法获取或设置标签的属性值;attr()方法用于获取或设置标签的属性值，例如，给div元素添加index属性，保存元素的索引。attr()方法的语法格式如下。;下面通过代码进行演示。;掌握data()方法的使用，能够应用data()方法获取或设置数据;data()方法用于在指定的元素上获取或设置数据，该方法的语法格式如下。;下面通过代码进行演示。;data()方法不仅可以在指定的元素上获取或设置数据，而且可以读取HTML