《web前端技术》课件-第十三章

Web前端技术签到扫码下载文旌课堂APP扫码签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。jQuery第十三章随着科技的迅速发展，互联网领域中陆续涌现出了一批优秀的JavaScript库，如Prototype、React、Zepto等。这些JavaScript库可以帮助开发人员从复杂烦琐的程序中解脱出来，将开发的重点从细节实现转向功能实现，从而提高项目开发的效率。jQuery是继Prototype之后又一个优秀的JavaScript库。本章将对jQuery的相关知识进行详细介绍。章节导读了解jQuery，熟悉下载和配置jQuery的方法。熟悉jQuery选择器、jQuery对网页元素进行的操作、jQuery的时间处理。掌握jQuery的动画效果，包括元素的隐藏与显示、元素的淡入淡出和元素的滑动效果等。学习目标提高自我学习能力，增强自信心。培养良好的学习方法，增强举一反三的能力。素质目标第十三章jQuery

/章节导航/13.1

jQuery

基础13.2

jQuery选择器13.3

jQuery操作元素13.4

jQuery的事件处理13.5

jQuery

的动画效果实战演练——制作自动隐藏式菜单

jQuery基础13.1jQuery是一个快速、简洁、灵活的JavaScript库，本节将带领大家认识jQuery，并介绍jQuery的下载和配置。13.1jQuery基础jQuery于2006年1月由JohnResig发布，其设计宗旨是“writeless,domore”，即倡导写更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。它的设计可以改变用户编写JavaScript代码的方式，有助于提高编程效率。13.1.1

认识jQuery13.1jQuery基础13.1.1

认识jQuery13.1jQuery基础使用jQuery可以极大地提高编写JavaScript代码的效率，还可以让代码更加简洁、健壮。可以说，jQuery适合任何应用JavaScript的项目开发。在实际开发中，要想使用jQuery，需要先下载并配置它。jQuery是一个开源的脚本库，大家可以从官方网站（https://jQ）下载，下面介绍具体下载步骤。步骤1

在浏览器的地址栏中输入https://jQ，并按Enter键，进入jQuery官方网站的首页，如图所示。13.1.2

下载和配置jQuery13.1jQuery基础jQuery官方网站首页步骤2

单击官方网站首页中的“DownloadjQueryv3.6.0”超链接，进入下载jQuery的网页，如图所示。13.1.2

下载和配置jQuery13.1jQuery基础进入下载jQuery的网页步骤3

单击下载页面中的“Downloadthecompressed,productionjQuery3.6.0”超链接，网页跳转至如图所示的代码页。13.1.2

下载和配置jQuery13.1jQuery基础jQuery3.6.0的代码页步骤4

在该代码页单击鼠标右键，然后在弹出的快捷菜单中选择“另存为”选项，或直接按“Ctrl+S”组合键，弹出“另存为”对话框，如图所示。在该对话框中选择保存的路径，然后单击“保存”按钮。13.1.2

下载和配置jQuery13.1jQuery基础“另存为”对话框在项目中通常使用压缩后的文件，即本节下载的jquery-3.6.0.min.js文件。TISHI提示将jQuery下载到本地计算机后，还需要在项目中进行配置，即将下载后的jquery-3.6.0.min.js文件放在项目的指定文件夹中（通常放在JS文件夹中），然后在需要应用jQuery的页面中引用该文件。具体的引用方法如下：13.1.2

下载和配置jQuery13.1jQuery基础（1）不考虑老版本浏览器兼容性的情况下，type="text/javascript"可以省略。（2）引用jQuery的<script>标签必须放在所有引用自定义脚本文件的<script>标签之前，否则在自定义的脚本代码中无法应用jQuery脚本库。TISHI提示<scriptsrc="jquery文件路径"type="text/javascript"></script>

jQuery选择器13.2选择器是一切网页操作的基础，在实际开发中，开发人员需要利用选择器获取需要的元素，从而操作相应的对象或数组，实现网页的业务逻辑。jQuery提供了许多功能强大的选择器，以帮助开发人员获取页面上的元素，获取的每个元素都以jQuery包装集的形式返回。jQuery包装集指的是通过jQuery的工厂函数“$()”返回的一个元素集。“$”是jQuery“类”的一个别称，“$()”构造了一个jQuery对象，所以“$()”也可以称为jQuery的构造函数。13.2jQuery选择器

基本选择器是jQuery选择器中最重要的部分，它是其他类型选择器的基础。基本选择器包括ID选择器、元素选择器、类名选择器、复合选择器和通配符选择器。

13.2.1基本选择器13.2jQuery选择器表

基本选择器选择器使用方法说明示例ID选择器$("#id")根据元素的id属性值获取一个元素，返回单个元素$("#user")，获取id属性值为user的元素元素选择器$("element")根据元素的标签名获取相应的元素，返回元素集$("div")，获取所有的div元素类名选择器$(".class")根据元素拥有的类名获取元素，返回元素集$(".test")，获取拥有test类名的所有元素

13.2.1基本选择器13.2jQuery选择器续表

基本选择器选择器使用方法说明示例复合选择器$("selector1,selector2,…,selectorN,")（selectorN表示选择器，可以是ID选择器、元素选择器或类名选择器等）将每个选择器获取到的元素合并，返回元素集$("div,p.test")，获取所有的div元素和拥有test类名的p元素通配符选择器$("*")获取网页上所有的元素，返回元素集$("*")，获取所有的元素

层级选择器通过DOM元素之间的父子关系和兄弟关系为筛选条件获取元素。jQuery提供的层级选择器有后代选择器、子代选择器、相邻选择器和兄弟选择器，详细介绍如表所示。13.2jQuery选择器

13.2.2层级选择器表层级选择器过滤选择器包括简单过滤器、内容过滤器、可见性过滤器、子元素过滤选择器和表单对象的属性过滤器。

13.2.3过滤选择器13.2jQuery选择器

简单过滤器是指以冒号开头，用于实现简单过滤效果的过滤器。1．简单过滤器13.2jQuery选择器

表

简单过滤器13.2jQuery选择器内容过滤器是指通过DOM元素包含的文本内容，以及是否含有匹配的元素进行筛选，从而获取相应的元素。2．内容过滤器表

内容过滤器13.2jQuery选择器元素的可见状态有两种，一种是隐藏状态，另一种是显示状态。可见性过滤器就是利用元素的可见状态获取元素的。3．可见性过滤器表

可见性过滤器13.2jQuery选择器子元素过滤选择器用于筛选给定某个元素的子元素，具体的过滤条件由选择器的种类决定。jQuery提供的子元素过滤选择器如表所示。4．子元素过滤选择器表

子元素过滤选择器13.2jQuery选择器表单对象的属性过滤器通过表单元素的状态（如是否可用、选中等）属性获取元素。5．表单对象的属性过滤器表

表单对象的属性过滤器13.2jQuery选择器属性选择器是以元素的属性作为过滤条件来获取元素的。

13.2.4属性选择器表

属性选择器13.2jQuery选择器表单在Web前端开发中占据重要的地位，在jQuery中引入的表单选择器能够让用户更加方便地处理表单数据。使用表单选择器可以快速定位到某类表单元素。

13.2.5表单选择器表

表单选择器

jQuery操作元素13.3jQuery提供了许多操作网页元素的方法，这些方法比JavaScript中操作网页元素的方法更加方便灵活。jQuery可以对网页元素进行的操作包括操作元素的内容和值、操作DOM节点、操作元素属性、操作元素的CSS样式。13.3jQuery操作元素元素的内容是指定义元素的起始标签和结束标签中间的内容，它又可以分为文本内容和HTML内容。文本内容只包含元素的文本内容，不包含元素的子元素；HTML内容不仅包含元素的文本内容，还包含元素的子元素。例如，代码<div><p>内容</p></div>中div元素的文本内容是“内容”，HTML内容是“<p>内容</p>”。元素的值是元素的一种属性，大部分元素的值都对应value属性。

13.3.1

操作元素的内容和值jQuery提供了操作元素内容和值的方法，如表所示。表

操作元素内容和值的方法表中，selector表示被选元素；content表示被选元素的新文本内容（或HTML内容）；function(index,oldcontent)表示返回被选元素的新文本内容（或HTML内容）的函数；value表示被选元素新的value属性的值；function(index,oldvalue)表示返回要设置的value属性值的函数。13.3jQuery操作元素

13.3.2

操作DOM节点JavaScript可以操作DOM节点，如查找节点、创建节点、插入节点、删除节点、复制节点和替换节点等，只是实现方法比较复杂。jQuery为了简化开发工作，提升工作效率，也提供了操作DOM节点的方法。其中，查找节点可以通过jQuery提供的选择器轻松地实现。创建节点主要包括两步，第一步是创建新元素；第二步是将新元素插入文档（父元素）中。例如，使用以下代码在网页文档的boby元素中创建一个新的段落节点。

1．创建节点13.3jQuery操作元素

1．创建节点<script> $(document).ready(function(){ //方法一 var$p1=$("<p></p>"); $p1.html("方法一添加的内容"); $("body").append($p1); //方法二 var$p2=$("<p>方法二添加的内容</p>"); $("body").append($p2); //方法三 $("body").append("<p>方法三添加的内容</p>"); })</script>13.3jQuery操作元素超链接在创建节点时，无论添加的内容是否为使用html()方法指定的HTML内容，浏览器都会将它视为HTML内容进行解析执行。Gaoshoudianbo高手点拨13.3jQuery操作元素

2．插入节点在创建节点时，大家可以发现，使用append()方法能够将定义的节点内容插入指定的元素中。实际上，append()方法就是用于插入节点的方法，除了该方法，jQuery还提供了许多其他方法。在jQuery中，插入节点的方法又分为在元素内部插入节点和在元素外部插入节点两种。其中，在元素内部插入节点就是向一个元素中添加子元素的内容；在元素外部插入节点就是向元素之前或之后添加内容。

13.3jQuery操作元素

2．插入节点表

插入节点的方法表中，selector表示被选元素；content表示要插入的指定内容。13.3jQuery操作元素

3．删除、复制和替换节点在实际开发过程中，除了需要创建、插入节点外，还经常需要删除、复制和替换节点。表

删除、复制和替换节点的方法表中，selector表示被选元素（或要替换的元素）；includeEvents是布尔值，表示是否复制元素的所有事件处理，取值有true和false（默认）；content表示指定的HTML内容或元素（即替换被选元素的内容）13.3jQuery操作元素

13.3.3操作元素属性除了操作元素内容和值，以及DOM节点的方法外，jQuery还提供了操作元素属性的方法，如表所示。表

操作元素属性的方法13.3jQuery操作元素

13.3.3操作元素属性表

操作元素属性的方法表中，selector表示被选元素。attribute表示属性名称。value表示属性的值。function(index,oldvalue)表示返回属性值的函数。class表示class属性，可以设置多个值，不同值之间用空格隔开。switch是可选值，省略该值时，如果被选元素中存在（不存在）class属性就删除（添加）class属性；switch为true时，添加对应的class属性；switch为false时，则删除对应的class属性。13.3jQuery操作元素

13.3.4

操作元素的CSS样式jQuery还提供了操作元素CSS样式的方法，如表所示。表

操作元素CSS样式的方法表中，selector表示被选元素；name表示CSS属性的名称；value表示CSS属性的值；function(index,value)表示返回CSS属性新值的函数；{property:value}表示要设置为样式属性的“名称/值对”对象；length表示元素的高度；function(index,oldheight)表示返回被选元素新高度的函数；function(index,oldwidth)表示返回被选元素新宽度的函数。13.3jQuery操作元素

jQuery的事件处理13.4事件是完成页面与用户之间动态交互必不可少的因素。传统的JavaScript中内置了一些事件响应方式，而jQuery又增强、优化和扩展了基本的事件处理机制。

13.4.1页面加载响应事件$(document).ready()方法是事件模块中最重要的一个方法，它极大地提高了Web页面的响应速度，其语法格式如下：$(document).ready(function(){ //在此处写代码});其中，$(document)表示获取整个文档对象，ready()可理解为获取文档就绪时的内容。13.4jQuery的事件处理超链接$(document).ready()方法的语法格式可以简写为：或者进一步简写为：简写后的语法格式更加简短，但可读性不强，且容易和其他方法混淆，因此不提倡使用简写的方式。TUOZHANYUEDU拓展阅读$().ready(function(){//在此处写代码});$(function(){//在此处写代码});13.4jQuery的事件处理在jQuery中，可以使用$(document).ready()方法代替JavaScript中传统的window.onload()方法，不过两者之间存在细微的差别，主要表现在以下两方面。（1）在一个页面中可以无限制地使用$(document).ready()方法，各方法之间并不冲突，且它们按照代码顺序依次执行；而在一个页面中只能使用一个window.onload()方法。（2）$(document).ready()方法是在所有DOM元素已经完全就绪之后才会被调用，不包括关联的文件；而window.onload()方法是在一个文档完全下载到浏览器时（包括所有关联的文件）才会被响应。例如，页面上的图片没有加载完毕，但DOM元素已经完全准备就绪时，就会执行$(document).ready()方法。相同条件下，不会执行window.onload()方法，直到图片等所有关联文件都下载完毕时才会执行该方法。所以，$(document).ready()方法优于window.onload()方法。13.4jQuery的事件处理

在实际开发中，只有页面加载显然不能满足用户与网页间的动态交互的需求，程序在某些时候还需要完成某些事件，如鼠标单击事件、失去焦点事件等。

13.4.2jQuery中的事件表

用于事件处理的方法13.4jQuery的事件处理上表中，selector表示被选元素；function表示当事件发生时运行的函数，事件处理程序就写在该函数中。若省略该函数，不同的事件处理方法仅表示触发对应的事件。jQuery事件处理方法是jQuery中的核心函数，这些方法对应的事件和传统的JavaScript中的事件几乎相同，只是有些名称不同。13.4jQuery的事件处理

13.4.3事件绑定页面加载完毕后，程序可以通过为元素绑定事件完成相应的操作。在jQuery中，事件绑定通常分为3种情况，分别为为元素绑定事件、移除绑定和绑定一次性事件处理。在jQuery中，使用bind()方法为被选元素绑定一个或多个事件处理程序，并规定事件发生时运行的函数，其语法格式为：其中，selector表示被选元素；event是必选项，表示绑定到元素的一个或多个事件，事件必须是有效的，多个事件之间用空格分隔；data是可选项，表示传递到函数的额外数据；function是必选项，表示当事件发生时运行的函数。

1．为元素绑定事件$(selector).bind(event,data,function)13.4jQuery的事件处理

13.4.3事件绑定该方法的语法格式还可以使用以下格式：其中，{event:function,event:function,…}是必选项，表示事件映射，包含一个或多个绑定到元素的事件，以及当事件发生时运行的函数。

1．为元素绑定事件$(selector).bind({event:function,event:function,…})13.4jQuery的事件处理<head> <metacharset="utf-8"> <title>例13-1</title> <!--引用jquery文件--> <scripttype="text/javascript"src="jquery-3.6.0.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ //页面加载$("button").bind("click",function(){ //绑定单击事件 $("p").slideToggle(); //slideToggle()方法通过使用滑动效果（高度变化）来切换元素的可见状态 }); }); $(document).ready(function(){ $("button").bind({ mouseover:function(){$("h3").css("background-color","#b8b8b8");}, //绑定鼠标悬停事件【例13-2】

为元素绑定事件（以下提供部分代码）。13.4jQuery的事件处理mouseout:function(){$("h3").css("background-color","#FFFFFF");} //绑定鼠标移出事件 }); }); </script></head><body> <h3>事件绑定</h3> <p>我是P元素</p> <button>按钮</button></body>【例13-2】

为元素绑定事件（以下提供部分代码）。13.4jQuery的事件处理【例13-2】

初始页面效果和触发不同事件后的页面效果如图所示。为元素绑定事件13.4jQuery的事件处理在jQuery中，使用unbind()方法移除被选元素的事件处理程序，其语法格式为：其中，selector表示被选元素；event是可选项，表示删除元素的一个或多个事件，多个事件之间用空格分隔；function是可选项，表示从元素的指定事件取消绑定的函数名。如果两个参数都不设置，则会删除匹配元素上所有绑定的事件；如果只设置event参数，则会删除绑定到指定事件的所有函数。

2．移除绑定$(selector).unbind(event,function)【例13-2】

在例13-1中“$("button").bind("click",function(){$("p").slideToggle();});”代码后面添加以下代码，移除为按钮绑定的单击事件。$("button").unbind("click"); //移除为按钮绑定的单击事件13.4jQuery的事件处理在jQuery中，使用one()方法为被选元素绑定一个或多个事件处理程序，并规定当事件发生时运行的函数，其语法格式为：其中，各参数的含义和用法与bind()方法中的参数相同。one()方法和bind()方法功能类似，但使用one()方法时，每个元素只能运行一次事件处理，也可以理解为该方法为元素绑定了一次性事件处理。

3．绑定一次性事件处理$(selector).one(event,data,function)13.4jQuery的事件处理$(document).ready(function(){ //页面加载 $("button").one("click",function(){ //绑定一次性单击事件 $("p").slideToggle(); });});【例13-3】

为元素绑定事件（以下提供部分代码），初始页面效果和触发不同事件后的页面效果如图所示。绑定一次性单击事件13.4jQuery的事件处理

jQuery的动画效果13.513.5jQuery的动画效果元素的隐藏与显示是最基本的动画效果。jQuery提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素；另一种是切换元素的可见状态。

13.5.1元素的隐藏和显示使用jQuery可以很方便地制作出网页元素的动画效果，该动画效果包括元素的隐藏与显示、元素的淡入淡出和元素的滑动效果等。13.5jQuery的动画效果在jQuery中，使用hide()方法隐藏匹配的元素，其语法格式为：其中，speed是可选项，表示元素从可见到隐藏的时长（默认为0），其取值可以为不加英文引号的数字（如100，表示100毫秒），也可以为加英文引号的参数（如"slow"、"normal"、"fast"）；callback是可选项，表示执行完hide()方法之后需要执行的函数，除非设置了speed参数，否则不能设置该参数。

1．分别隐藏和显示匹配元素$(selector).hide(speed,callback)在jQuery中，使用show()方法显示匹配的元素，其语法格式为：其中，speed是可选项，表示元素从隐藏到可见的时长（默认为0）；callback是可选项，表示执行完show()方法之后需要执行的函数。这两个参数的用法与hide()方法中的参数相同。$(selector).show(speed,callback)

1．分别隐藏和显示匹配元素13.5jQuery的动画效果在jQuery中，使用toggle()方法切换元素的可见状态，即如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见，其语法格式为：其中，speed是可选项，表示隐藏/显示效果的时长（默认为0）；callback是可选项，表示执行完toggle()方法之后需要执行的函数。这两个参数的用法与hide()方法中的参数相同。$(selector).toggle(speed,callback)

2．切换元素的可见状态13.5jQuery的动画效果<head> <metacharset="utf-8"><title>例13-4</title> <scripttype="text/javascript"src="jquery-3.6.0.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(1000); //隐藏p元素 }); $(".btn2").click(function(){ //显示p元素，然后执行showColor函数 $("p").show(1000,showColor); });$(".btn3").click(function(){ $("p").toggle(1000); //切换p元素的显示状态 }); });【例13-4】

元素的隐藏和显示（以下提供部分代码）。13.5jQuery的动画效果 functionshowColor(){ //自定义showColor函数 //设置p元素的背景颜色 $("p").css("background-color","#b8b8b8"); } </script></head><body> <h3>元素的隐藏和显示</h3> <p>我是P元素</p> <buttonclass="btn1">隐藏</button> <buttonclass="btn2">显示</button> <buttonclass="btn3">切换</button></body>【例13-4】

元素的隐藏和显示（以下提供部分代码）。13.5jQuery的动画效果【例13-4】

页面效果如图所示。元素隐藏和显示13.5jQuery的动画效果隐藏和显示元素时会改变元素的高度和宽度，若开发过程中不需要改变元素的高度和宽度，只需要单独改变元素的透明度时，就可以通过元素的淡入淡出效果实现。13.5.2元素的淡入淡出表

实现元素淡入淡出动画效果的方法表中，speed表示效果的时长，它的取值可以为"slow"、"fast"或毫秒；callback表示淡入/淡出完成后所执行的函数名称；opacity表示将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。fadeTo()方法中，speed和opacity是必选项，callback是可选项；其他方法中，speed和callback都是可选项。13.5jQuery的动画效果jQuery提供了实现元素滑动效果的方法，如表所示。13.5.3元素的滑动效果表

实现元素滑动效果的方法表中，speed是可选项，表示效果的时长，它的取值可以为"slow"、"fast"或毫秒；callback是可选项，表示滑动完成后所执行的函数名称。13.5jQuery的动画效果在设计网页时，可以在页面中添加自动隐藏式菜单。这种菜单简洁易用，在不使用时可以自动隐藏，从而保持页面整洁。下面带领大家一起制作自动隐藏式菜单，页面效果如图所示。——制作自动隐藏式菜单实战演练WEB自动隐藏式菜单的页面效果扫一扫超链接步骤1

在HBuilderX中导入本书配套素材“素材与案例\第13章\实战演练”文件夹，然后打开“13.5.html”文档。——制作自动隐藏式菜单实战演练WEB超链接步骤2

添加页面内容。在<body>…</body>中添加以下代码设置隐藏菜单，页面效果如图所示。——制作自动隐藏式菜单实战演练WEB<divid="div1">隐藏菜单</div><divid="div2"> <ul> <li><ahref="#">图书介绍</a></li> <li><ahref="#">新书预告</a></li> <li><ahref="#">图书销售</a></li> <li><ahref="#">联系我们</a></li> </ul></div>添加页面内容后的效果超链接步骤3

设置页面的CSS样式。在<style>…</style>中添加以下代码设置隐藏菜单的样式，页面效果如图所示。——制作自动隐藏式菜单实战演练WEB*{margin:0; padding:0; font-size:30px; text-decoration:none; list-style:none; text-indent:1em;}#div1{width:180px; height:auto; background:#adadad;}#div2{width:180px; height:auto; background:#d6d6d6; display:none;}设置样式后的页面效果超链接步骤4

引入jQuery文件并编写jQuery代码。在</style>标签后面添加以下代码引入jQuery文件并编写jQuery代码，实现自动隐藏式菜单，即可得到如图所示页面效果。——制作自动隐藏式菜单实战演练WEB<!--引用jQuery文件--><scripttype="text/javascript"src="jquery-3.6.0.min.js"></script><scripttype="text/javascript"> $(document).read