CH06 jQuery入门教学课件.ppt

Thankyou！“”“”JavaScript与jQuery

网页前端开发与设计-第2版学校名称：XXXX主讲教师：XXXX第6章jQuery入门本章学习目标 了解jQuery的下载与使用； 掌握jQuery的基础语法结构； 掌握jQuery文档就绪函数的用法； 掌握jQuery名称冲突的解决方案。目录6.1jQuery下载和使用6.2jQuery语法6.1jQuery下载和使用6.1.1jQuery的下载6.1.2jQuery的使用6.1.1jQuery的下载jQuery是一种开源函数库，读者可以直接访问官网页面（/download/）进行下载。目前常用的jQuery分为1.x、2.x和3.x版本，本书将选择官方推荐的1.12.x系列版本作为示例，因为该版本的浏览器兼容性相对较好。6.1.1jQuery的下载图所示为jQuery的官方下载页面。6.1.1jQuery的下载以1.12.3版本为例，下载完整版点击“DownloadtheuncompresseddevelopmentjQuery1.12.3”，下载压缩版点击“DownloadthecompressedproductionjQuery1.12.3”。完整版的文件后缀名为.js，常用于开发和调试；压缩版的文件后缀名为.min.js，里面保留了所有的jQuery函数并提升了产品性能，适用于正式发布。6.1.1jQuery的下载注：由于官方不定期会更新可供下载的页面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文件引用地址。6.1.2jQuery的使用需要注意的是，HTML4.01版script元素首标签需要写成scripttype=text/javascriptsrc=jQuery文件URL；而在HTML5中可以省略其中的type=text/javascript，直接写成scriptsrc=jQuery文件URL即可。6.1.2jQuery的使用以jquery1.12.3.js为例，将该文件放置在和网页同一个文件夹下，则使用声明写法如下：上述代码声明完成后就可以在页面上添加jQuery相关语句了。scriptsrc=jquery1.12.3.js/script注：引用的jQuery文件名是可以下载后由开发者重新自定义的，例如上述代码中的文件名如若改成了jquery.js，那么引用时也需要同步更新为scriptsrc=jquery.js/script即可。6.2jQuery语法jQuery的语法是专门为HTML元素的选取编制的，可以对元素执行操作。6.2jQuery语法6.2.1基础语法结构6.2.2文档就绪函数6.2.3jQuery名称冲突6.2.1基础语法结构jQuery的基础语法结构如下：其中美元符号$表示jQuery语句，选择符selector用于查询HTML元素，action()需要替换为对元素某种具体操作的方法名。$(selector).action()6.2.1基础语法结构例如：在HTML中p表示段落标签，hide()为jQuery中的新方法用于隐藏元素。因此上述代码表示隐藏所有段落。$(p).hide();6.2.2文档就绪函数为了避免文档在加载完成前就运行了jQuery代码导致潜在的错误，所有的jQuery函数都需要写在一个文档就绪（documentready）函数中。例如当前HTML页面还没有加载完，因此某HTML元素标签可能还无法查询获取。6.2.2文档就绪函数文档就绪函数的写法如下：$(document).ready(function(){jQuery函数内容});