《JavaScript与jQuery网页前端开发与设计-第2版》 第06章教案-jQuery入门_第1页
《JavaScript与jQuery网页前端开发与设计-第2版》 第06章教案-jQuery入门_第2页
《JavaScript与jQuery网页前端开发与设计-第2版》 第06章教案-jQuery入门_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《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/javascript"src="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）冲突。因此jQuery使用noConflict()方法自定义其他名称来替换可能产生冲突的$符号表达方式。【例6-1】jQuery自定义名称代替$符号使用noConflict()方法创建自定义名称jq代替$符号。【代码说明】本示例使用别名jq代替$符号，并在文档就绪函数中为按钮button绑定了一个click点击事件。如果点击按钮后alert语句仍然能被执行，说明jQuery的自定义别名有效。由图可见，当前jQuery的别名可以正常使用。6.3本章小结本章主要是jQuery的基础知识入门，首先介绍了jQuery文件如何下载和使用，其次介绍了jQuery的常用语法，包括基础语法结构、文档就绪函数以及jQuery别名的使用。六、课后习题1.如何在文档中引用jQuery？答：以jquery-1.12.3.min.js为例，代码如下。<scriptsrc="js/jquery-1.12.3.min.js"></script>2.请使用文档就绪函数弹出alert提示框，并显示"HellojQuer

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论