第06章教案_jQuery入门.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第6章jQuery入门

一、教学目标：

了解jQuery的下载与使用；

掌握jQuery的基础语法结构；

掌握jQuery文档就绪函数的用法；

掌握jQuery名称冲突的解决方案。

二、教学重点和难点：

重点：jQuery的基础语法结构；

难点：jQuery名称冲突的解决方案。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章主要介绍jQuery基础知识入门，包括jQuery的下载和使用、jQuery基础语法结构、jQuery文档就绪函数以及jQuery名称冲突的解决方案。

五、教学基本内容：

6.1jQuery下载和使用

6.1.1jQuery的下载

jQuery是一种开源函数库，读者可以直接访问官网页面（/download/）进行下载。目前常用的jQuery分为1.x、2.x和3.x版本，本书将选择官方推荐的1.12.x系列版本作为示例，因为该版本的浏览器兼容性相对较好。

以1.12.3版本为例，下载完整版点击“DownloadtheuncompresseddevelopmentjQuery1.12.3”，下载压缩版点击“DownloadthecompressedproductionjQuery1.12.3”。完整版的文件后缀名为.js，常用于开发和调试；压缩版的文件后缀名为.min.js，里面保留了所有的jQuery函数并提升了产品性能，适用于正式发布。

注：由于官方不定期会更新可供下载的页面jQuery版本，可能实际访问的时候已经无法在官网的下载页面下载1.x版的jQuery文件了，虽然官方也另外提供了一个历年jQuery版本下载地址/DanielRuf/snyk-js-jquery-565129，但是由于服务器在海外有时打开非常慢。读者也可以直接使用本书配套提供的源码包，从第6章开始后续每章节例题源代码包中的js目录下均包含了jquery-1.12.3.js（未压缩包，可查看源代码，适合开发学习过程）和jquery-1.12.3.min.js（混淆压缩包，更加精简加载效率高，适合正式环境）供读者使用。

6.1.2jQuery的使用

和其他JavaScript文件的使用方式一样，可以通过script标签在HTML文档的首部标签head和/head中添加jQuery的引用声明。语法如下：

scriptsrc=jQuery文件URL/script

上述代码中的jQuery文件URL需要替换为实际的jQuery文件引用地址。

需要注意的是，HTML4.01版script元素首标签需要写成scripttype=text/javascriptsrc=jQuery文件URL；而在HTML5中可以省略其中的type=text/javascript，直接写成scriptsrc=jQuery文件URL即可。

以jquery1.12.3.js为例，将该文件放置在和网页同一个文件夹下，则使用声明写法如下：

scriptsrc=jquery1.12.3.js/script

上述代码声明完成后就可以在页面上添加jQuery相关语句了。

注：引用的jQuery文件名是可以下载后由开发者重新自定义的，例如上述代码中的文件名如若改成了jquery.js，那么引用时也需要同步更新为scriptsrc=jquery.js/script即可。

6.2jQuery语法

jQuery的语法是专门为HTML元素的选取编制的，可以对元素执行操作。

6.2.1基础语法结构

jQuery的基础语法结构如下：

$(selector).action()

其中美元符号$表示jQuery语句，选择符selector用于查询HTML元素，action()需要替换为对元素某种具体操作的方法名。例如：

$(p).hide();

在HTML中p表示段落标签，hide()为jQuery中的新方法用于隐藏元素。因此上述代码表示隐藏所有段落。

6.2.2文档就绪函数

为了避免文档在加载完成前就运行了jQuery代码导致潜在的错误，所有的jQuery函数都需要写在一个文档就绪（documentready）函数中。例如当前HTML页面还没有加载完，因此某HTML元素标签可能还无法查询获取。

文档就绪函数的写法如下：

$(document).ready(function(){

jQuery函数内容

});

6.2.3jQuery名称冲突

jQuery通常使用美元符号$作为简介方式，在同时使用了多个JavaScript函数库的HTML文档中jQuery就有可能与其他同样使用$符号的函数（例如Prototype）冲突。因此jQuer