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

第9章jQuery（上）《JavaScript+jQuery交互式Web前端开发（第2版）》学习目标/Target了解什么是jQuery，能够描述jQuery的特点掌握jQuery的下载和引入，能够独立完成jQuery的下载并且能够使用两种方式引入jQuery熟悉jQuery对象，能够区别jQuery对象和DOM对象掌握jQuery的简单使用，能够使用jQuery实现简单的页面效果学习目标/Target掌握jQuery选择器的使用，能够根据不同场景使用不同的jQuery选择器获取元素掌握jQuery内容操作，能够灵活应用jQuery中操作元素内容的方法掌握jQuery属性操作，能够灵活应用prop()方法、attr()方法和data()方法操作元素的属性掌握jQuery样式操作，能够根据不同场景使用jQuery实现元素的样式操作章节概述/SummaryjQuery提供了许多简化DOM操作、事件处理、动画效果等常见任务的方法和函数。通过使用jQuery，可以快速地开发交互性更强的网页和Web应用程序，减少冗余的代码，解决浏览器兼容问题。因此，学习和掌握jQuery具有重要的价值。jQuery的知识内容较多，本章首先对jQuery的上半部分内容进行讲解。目录/Contents9.1初识jQueryjQuery选择器9.2jQuery内容操作jQuery属性操作jQuery样式操作9.1初识jQuery9.1.1什么是jQuery先定一个小目标！了解什么是jQuery，能够描述jQuery的特点9.1.1什么是jQueryjQuery是一款快速、简洁、开源、轻量级的JavaScript库，它的设计宗旨是“writeless,domore”（使用更少的代码，做更多的事情）。9.1.1什么是jQueryjQuery具有以下6个特点。代码可读性强。语法简洁易懂，文档丰富。支持CSS1~CSS3定义的属性和选择器。支持事件、样式、动画和Ajax操作。可跨浏览器，支持的浏览器包括IE、Firefox和Chrome等。可扩展性强，插件丰富，可以通过插件扩展更多功能。9.1.1什么是jQuery目前jQuery有3个系列的版本，分别是jQuery1.x、jQuery2.x和jQuery3.x系列的版本。它们的区别在于，jQuery1.x系列的版本保持了对早期版本的IE浏览器的支持；jQuery2.x系列的版本不兼容IE6~IE8浏览器，从而更加轻量化；jQuery3.x系列的版本不兼容IE6~IE8浏览器，此系列的版本增加了一些新方法，并对一些方法进行了优化和改进。9.1.2下载和引入jQuery先定一个小目标！掌握jQuery的下载和引入，能够独立完成jQuery的下载并且能够使用两种方式引入jQuery9.1.2下载和引入jQuery在学习使用jQuery之前，需要下载和引入jQuery，具体操作步骤如下。在Chrome浏览器中访问jQuery的下载页面，如下图所示。9.1.2下载和引入jQuery在jQuery的下载页面，单击“jQuery3.6.4”的“minified”链接，弹出“CodeIntegration”对话框，如下图所示。9.1.2下载和引入jQuery引入jQuery。引入方式有两种，第1种方式是将“CodeIntegration”对话框中的整个<script>标签的代码复制到页面文件中使用。整个<script>标签的具体代码如下。<scriptsrc="/jquery-3.6.4.min.js"integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="crossorigin="anonymous"></script>9.1.2下载和引入jQuery第2种方式是复制“CodeIntegration”对话框中的地址“/jquery-3.6.4.min.js”，并在浏览器中访问该地址，将“jquery-3.6.4.min.js”文件保存到计算中，然后在程序中手动引入jQuery。引入jQuery的示例代码如下。<scriptsrc="jquery-3.6.4.min.js"></script>上述示例代码表示引入当前目录下的jQuery-3.6.4.min.js文件。9.1.3 jQuery的简单使用先定一个小目标！掌握jQuery的简单使用，能够使用jQuery实现简单的页面效果9.1.3 jQuery的简单使用在使用jQuery时可以分为3个步骤，具体如下。在程序中引入jQuery文件。获取需要操作的元素。调用操作方法，例如调用hide()