Web 前端开发技术 教案 项目十 jQuery 基础

Web前端开发技术教案设计项目课题jQuery基础授课时间授课对象大学生学习目标1.了解jQuery的特点。2.掌握jQuery的使用方式和语法规则。3.掌握jQuery的选择器、过滤器。学习重点掌握jQuery的使用方式和语法规则。学习难点掌握jQuery的选择器、过滤器。教学方法讲授法、课堂演示法教学用具多媒体课件教学流程教学环节教学内容教学过程任务一jQuery语法基础一、jQuery函数库文件jQuery是免费的、开源的JavaScript函数库,可以到jQuery官网中下载。jQuery函数库里有两种版本的文件,即扩展名为.js的完整版文件和扩展名为.min.js的压缩版文件。完整版文件称为开发者文件,包含所有函数库和空格符、换行符、注释等内容,文件较大,常用于开发和调试;压缩版文件称为部署文件,是保留了所有jQuery函数库的精简版本,文件较小,在部署时使用可以降低网络流量,减少Web服务器负载。jQuery函数库的版本分为1.x、2.x和3.x系列。1.x系列兼容低版本的浏览器,而2.x、3.x系列放弃支持低版本的浏览器。3.x系列的最新版本是jquery-3.7.1。本书示例代码中使用的是jquery-3.5.1.min.js文件。在设计项目时,要根据项目需求使用合适的jQuery函数库版本。二、jQuery使用方式在网页设计中使用jQuery函数库文件和引用其他JavaScript文件一样,只需要在网页代码的<script>……</script>标记中添加jQuery函数库文件的引用声明即可,其基本语法格式如下。<scriptsrc=“路径/jQuery文件.js”></script>jQuery函数库文件路径有相对路径和绝对路径两种。1.相对路径相对路径是指jQuery函数库文件和网页文件在同一服务器上,需要在网页文件所在的服务器上存储jQuery函数库文件。2.绝对路径在一些网络服务器上有jQuery函数库的网络分发文件,可以直接免费引用。采用绝对路径时,给出具有jQuery网络分发文件的服务器的完整路径URL即可。但要注意的是,这种引用还是有一定风险的,如果网络服务器不再提供该引用文件,则有可能导致网页功能失效。引用jQuery官网服务器上的jquery-3.5.1.min.js文件时,引用声明如下。<scriptsrc="https:///jquery-3.5.1.min.js"></script>引用Microsoft官网服务器上的jquery-3.5.1.min.js文件时,引用声明如下。<scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>三、jQuery语法规则jQuery语法是指通过选取HTML元素,并对选取的元素执行某些操作,其基本语法格式如下。$("元素对象").方法();1.jQuery符号“$”jQuery语句以“$”开始,“$”符号是一个常用的简写,它实际上是jQuery对象的别称。因此,当看到以“$”开始的语句时,通常意味着正在使用jQuery。在同时使用多个JavaScript函数库的HTML文档中,jQuery可能会和其他使用“$”的函数冲突,因此可以使用jQuery的noConflict()方法自定义jQuery的别称符号,noConflict()方法的基本语法格式如下。新的别称符号=jQuery.noConflict();2.元素对象元素对象是jQuery语句中操作的对象,可以使用选择器或过滤器的方式选择文档中的HTML元素对象。3.方法方法是对所选对象进行的操作。有些方法不需要设置参数,而有些方法需要设置参数。4.document对象的ready()方法为了避免HTML文档在元素加载完成前就执行jQuery语句,从而导致潜在的错误出现,因此所有的jQuery语句都需要写在document对象的ready()方法中,ready()方法的基本语法格式如下。$(document).ready(function(){jQuery语句;……});任务二jQuery选择元素对象一、jQuery基本选择器1.全局选择器全局选择器用于选择文档中的所有元素,其基本语法格式如下。$("*").方法();2.标记选择器标记选择器用于选择指定标记名称的所有元素,其基本语法格式如下。$("标记名称").方法();3.id选择器id选择器用于选择指定id名称的单个元素,其基本语法格式如下。$("#id名称").方法();4.类选择器类选择器用于选择具有同一个类名称的所有元素,其基本语法格式如下。$(".类名称").方法();例如,下面的语句表示将类名称为a的所有元素隐藏起来。$(".a").hide();二、jQuery复合选择器jQuery复合选择器就是将多个选择器组合在一起,选择器之间以逗号分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。1.多重选择器多重选择器用逗号分隔多个选择器,用于同时选择多个元素对象。多个选择器可以是基础选择器中的任意一种或几种,如果元素对象匹配其中任意一种选择器,则表示元素对象被选中,其基本语法格式如下。$("选择器1,选择器2……").方法();2.属性选择器属性选择器用于选择具有某种属性或属性值特征的所有元素对象。常用的属性选择器及说明如表10-1所示。在选择器前加上基本选择器,可以更准确地匹配选择。3.表单选择器表单选择器用于匹配表单中的表单元素对象。在表单选择器中,有两种选择方式:一种是根据表单元素的类型进行选择,另一种是根据表单元素的状态进行选择。常用的表单选择器及说明如表10-2所示。4.层次选择器层次选择器根据元素在网页中的位置关系进行选择。常用的层次选择器及说明如表10-3所示。三、jQuery过滤器过滤器是在元素选择时设置的筛选条件,可以单独使用,也可以和选择器配合使用。1.基础过滤器常用的基础过滤器及说明如表10-4所示。2.子元素过滤器常用的子元素过滤器及说明如表10-5所示。在过滤器nth-child(n的表达式)中,n的表达式是数字与字母n的组合。n的取值从0开始,计算出表达式的值作为序号。3.内容过滤器内容过滤器可以根据元素包含的子元素或内容进行过滤。常用的内容过滤器及说明如表10-6所示。4.可见性过滤器可见性过滤器根据元素当前的状态是否可见进行过滤。常用的可见性过滤器及说明如表10-7所示。元素在网页上处于隐藏状态,包括以下5种情况。(1)元素的高度和宽度明确设置为0。(2)元素的CSS中属性display的值为none。(3)表单元素type的属性值为hidden。(4)如果元素的父元素处于隐藏状态,那么子元素也处于隐藏状态。(5)下拉列表中的option选项无论是否选中都处于隐藏状态。元素在网页上不显示,但以下4种情况认为是处于可见状态的。(1)元素的透明度opacity属性为0,此时元素仍占据原来的位置。(2)元素的visibility属性为hidden,此时元素仍占据原来的位置。(3)在元素处于逐渐隐藏的动画效果中,在动画结束之前认为都是可见的。(4)在元素处于逐渐显现的动画效果中,从动画开始认为都是可见的。作业布置一、问答题(1)网页中如何添加jQuery文件引用声明?(2)jQuery语句中包含哪几个要素?分别是什么含义?(3)为了避免文档在元素加载完成前就执行jQuery语句而导致潜在的错误出现,必须使用什么办法？(4)jQuery选择器和过滤器的作用是什么?(5)jQuery