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

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