《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH06 jQuery入门_第1页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH06 jQuery入门_第2页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH06 jQuery入门_第3页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH06 jQuery入门_第4页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH06 jQuery入门_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

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

文档简介

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/javascript"src="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函数内容});6.2.2文档就绪函数【例6-1】jQuery文档就绪函数的使用6.2.2文档就绪函数【例6-1】jQuery文档就绪函数的使用<head><metacharset="utf-8"><title>jQuery文档准备就绪</title><scriptsrc="js/jquery-1.12.3.min.js"></script></head>6.2.2文档就绪函数【例6-1】jQuery文档就绪函数的使用<body><h3>jQuery文档准备就绪函数的应用</h3><hr><script>$(document).ready(function(){alert("jQuery文档准备就绪！");});</script></body>6.2.3jQuery名称冲突jQuery通常使用美元符号$作为简写方式，但在同时使用了多个JavaScript函数库的HTML文档中jQuery就有可能与其他同样使用$符号的函数（例如Prototype）冲突。因此jQuery使用noConflict()方法自定义其他名称来替换可能产生冲突的$符号表达方式。6.2.3jQuery名称冲突【例6-2】jQuery自定义名称代替$符号6.2.3jQuery名称冲突【例6-2】jQuery自定义名称代替$符号<head><metacharset="utf-8"><title>jQuery自定义名称代替$符号</title><scriptsrc="js/jquery-1.12.3.min.js"></script></head>6.2.3jQuery名称冲突【例6-2】jQuery自定义名称代替$符号<body><h3>jQuery自定义名称代替$符号</h3><hr><button>

测试jQuery别名</button><script>varjq=jQuery.noConflict();jq(document).ready(function(){jq("button").click(function(){alert("jQuery的别名生效了！");

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论