引言
经过23天的学习,期间有期末考试,有放假等插曲。本来应该在学校里学习,但是特殊原因,让回家了。但是在家学习的过程,虽然在学,很让我感觉到不一样。但是效果始终还是差点的,本来17、18号左右就该验收的。但是硬是拖到了今天才验收,时间啊~全浪费了。好在也是顺利完结了jQuery阶段。
下面是我学习过程中做的二维表和思维导图,希望对大家有帮助。
二维表
两种常用引用库的方法
CDN引用 | 本地引用 | |
what | CDN(Content Delivery Network,内容分发网络)是一种通过分布在不同地理位置的多个服务器来加速内容交付的技术。CDN可以显著降低网页加载时间,提高用户体验。 | 将JavaScript库文件下载到本地,并在HTML文件中使用 |
where | 引用外部库 | |
why |
|
|
how | 要使用CDN引用JavaScript库文件,只需在HTML文件的 | 假设我们将jQuery库文件下载到了项目的 |
缺点 |
|
|
三个js文件
.js | .min.js | .intellisense.js | |
what | 源代码文件,包含了完整的 jQuery 函数库代码。 | jquery.min.js是压缩版本,而jquery.js是未压缩版本。 | jQuery intellisense.js 文件是用于提供智能感知功能的文件 |
where | 一般用于开发环境,当开发者需要进行 jQuery 的二次开发、调试或者查看原始代码逻辑时会用到。不过在实际生产环境中较少直接使用,因为其文件较大,加载速度相对较慢。 | 常用于生产环境中的网页项目。在大多数情况下,开发者为了提高网页的性能和加载速度,会选择在生产环境中使用 | 主要在开发过程中使用,当开发者使用具有智能感知功能的编辑器编写涉及 jQuery 的代码时,需要引入 |
why | 它未经压缩和混淆处理,可读性较好,方便开发者进行调试和学习。如果开发者需要对 jQuery 的源代码进行修改或深入了解其实现原理,可以使用这个文件。 | 常用于生产环境中的网页项目。 在大多数情况下,开发者为了提高网页的性能和加载速度,会选择在生产环境中使用 | 主要用于提供智能感知功能。 |
How | cdn ,下载到本地 |
map 和 each 循环
$ . map | $.each | |
语法 | $ . map ( 数组或对象,回调函数 ); | $ . each ( 对象或数组 , 回调参数); |
遍历对象 | 可以遍历任何类型的集合,如数组、对象等。对于数组,会依次处理每个元素;对于对象,会遍历其可枚举属性。 | 要应用于数组和类数组对象,将原数组中的每个元素按照指定规则映射到新数组中的元素。 |
回调函数参数 | 回调函数的参数为 | 回调函数的参数为 |
返回值 | 始终返回被遍历的对象本身,即原数组或原 jQuery 对象。 | 返回一个新的数组,该数组由每次回调函数的返回值组成。 |
jQuery对象和DOM对象
jQuery对象 | DOM对象 | |
what | 是通过 jQuery 包装 DOM 对象后产生的对象 | 是原生的 JavaScript 对象 |
where | 简洁、方便的开发方式和更好的浏览器兼容性,可以选择使用 jQuery 对象; | 对性能要求较高且只需要简单的 DOM 操作,可以直接使用原生的 DOM 对象。 |
why | jQuery 提供了更简洁、更方便的语法和操作方式,可以大大提高开发效率。 | 直接操作 DOM 对象通常具有较高的性能,因为省去了 jQuery 包装和解包的过程,但对于复杂的操作和跨浏览器兼容性处理,需要开发者自己编写更多的代码。 |
how | 例如,使用 | 如 |
对象类型和数据结构 | 是一个类数组对象,具有数组的一些特性,但并非真正的数组。它本质上是一个包含 DOM 元素的集合,并且提供了一些额外的方法和属性来方便操作 | 对于单个元素获取的 DOM 对象,它是一个独立的元素对象;对于通过 |
性能表现 | 由于其内部实现和功能丰富性,相对来说可能会比直接操作 DOM 对象稍慢一些,尤其是在大量元素操作或频繁操作时,性能差异可能会更明显。 | 直接操作 DOM 对象通常具有较高的性能,因为省去了 jQuery 包装和解包的过程,但对于复杂的操作和跨浏览器兼容性处理,需要开发者自己编写更多的代码 |
浏览器兼容性 | 好:Query 库本身对各种浏览器的兼容性进行了处理,使得在不同浏览器中的操作行为更加一致,减少了开发者处理浏览器兼容性问题的工作量。 | 不好:不同浏览器对 DOM 对象的实现可能会有一些差异,尤其是在一些较老的浏览器中,可能需要开发者进行额外的兼容性处理。 |
转换 | 从 DOM 对象到 jQuery 对象:可以使用 例如, | 从 jQuery 对象到 DOM 对象:可以通过索引访问的方式获取对应的 DOM 对象,如 |
hover 和 toggle
hover | toggle | |
what | 将一个或两个处理程序绑定到匹配的元素,以便在鼠标指针进入和离开元素时执行。 |
|
where | 将两个处理程序绑定到匹配的元素,以便在鼠标指针进入和离开元素时执行。 | 执行动画效果 元素的显示与隐藏切换 自定义函数之间的切换 |
why | 要添加特殊样式以列出悬停在其上的项目 | 灵活 |
how | ||
变迁 | 3.3后弃用啦~ 此 API 已弃用。请改用:
| 效果变多啦~ 但视频课的效果在1.8后被弃用~在1.9被删除 QwQ~ |
思维导图
1
2
3
4
总结
度过jQuery阶段,接下来是学习软件工程。可能暂时不会敲代码了,但是我认为绝对不能孤立地看待问题,学软工也要结合具体代码来联想学习。