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.标记