jQuery阶段总结(二维表+思维导图)

 引言

        经过23天的学习,期间有期末考试,有放假等插曲。本来应该在学校里学习,但是特殊原因,让回家了。但是在家学习的过程,虽然在学,很让我感觉到不一样。但是效果始终还是差点的,本来17、18号左右就该验收的。但是硬是拖到了今天才验收,时间啊~全浪费了。好在也是顺利完结了jQuery阶段。

        下面是我学习过程中做的二维表和思维导图,希望对大家有帮助。

二维表

两种常用引用库的方法

CDN引用

本地引用

what

CDN(Content Delivery Network,内容分发网络)是一种通过分布在不同地理位置的多个服务器来加速内容交付的技术。CDN可以显著降低网页加载时间,提高用户体验。

将JavaScript库文件下载到本地,并在HTML文件中使用<script>标签引用。

where

引用外部库

why

  • 加载速度快:由于CDN服务器分布在全球各地,用户可以从离自己最近的服务器加载资源。
  • 节省带宽:使用CDN可以减少自家服务器的带宽消耗。
  • 高可用性:CDN提供了高可用性,即使某个服务器宕机,也能从其他服务器获取资源。
  • 完全控制:所有文件都在本地,完全不依赖外部资源。
  • 安全性高:不需要担心外部CDN的隐私问题。

how

要使用CDN引用JavaScript库文件,只需在HTML文件的<head><body>部分添加一个<script>标签,并将src属性设置为相应的CDN URL。例如,如果要引用jQuery库,可以使用以下代码:

假设我们将jQuery库文件下载到了项目的js目录中,然后;

缺点

  • 依赖外部资源:如果CDN服务不可用,引用的库文件也无法加载。
  • 隐私问题:使用CDN可能会暴露用户的访问记录。
  • 加载速度:相对于CDN,加载速度可能较慢,尤其是当服务器离用户较远时。
  • 带宽消耗:增加了自家服务器的带宽消耗。

三个js文件

.js

.min.js

.intellisense.js

what

源代码文件,包含了完整的 jQuery 函数库代码。

jquery.min.js是压缩版本,而jquery.js是未压缩版本。

jQuery intellisense.js 文件是用于提供智能感知功能的文件

where

一般用于开发环境,当开发者需要进行 jQuery 的二次开发、调试或者查看原始代码逻辑时会用到。不过在实际生产环境中较少直接使用,因为其文件较大,加载速度相对较慢。

常用于生产环境中的网页项目。在大多数情况下,开发者为了提高网页的性能和加载速度,会选择在生产环境中使用 .min.js 文件,因为它可以在不损失功能的前提下,减少文件传输的大小和时间。

主要在开发过程中使用,当开发者使用具有智能感知功能的编辑器编写涉及 jQuery 的代码时,需要引入 .intellisense.js 文件以便获得更好的开发体验。

why

它未经压缩和混淆处理,可读性较好,方便开发者进行调试和学习。如果开发者需要对 jQuery 的源代码进行修改或深入了解其实现原理,可以使用这个文件。

常用于生产环境中的网页项目。

在大多数情况下,开发者为了提高网页的性能和加载速度,会选择在生产环境中使用 .min.js 文件,因为它可以在不损失功能的前提下,减少文件传输的大小和时间。

主要用于提供智能感知功能。

How

cdn ,下载到本地

map 和 each 循环

$ . map

$.each

语法

$ . map ( 数组或对象,回调函数 );

$ . each ( 对象或数组 , 回调参数);

遍历对象

可以遍历任何类型的集合,如数组、对象等。对于数组,会依次处理每个元素;对于对象,会遍历其可枚举属性。

要应用于数组和类数组对象,将原数组中的每个元素按照指定规则映射到新数组中的元素。

回调函数参数

回调函数的参数为 index(索引)和 elem(元素值),如果是遍历对象,参数为 keyvalue

回调函数的参数为 elem(元素值)和 index(索引),顺序与 each 相反。

返回值

始终返回被遍历的对象本身,即原数组或原 jQuery 对象。

返回一个新的数组,该数组由每次回调函数的返回值组成。

jQuery对象和DOM对象

jQuery对象

DOM对象

what

是通过 jQuery 包装 DOM 对象后产生的对象

是原生的 JavaScript 对象

where

简洁、方便的开发方式和更好的浏览器兼容性,可以选择使用 jQuery 对象;

对性能要求较高且只需要简单的 DOM 操作,可以直接使用原生的 DOM 对象。

why

jQuery 提供了更简洁、更方便的语法和操作方式,可以大大提高开发效率。

直接操作 DOM 对象通常具有较高的性能,因为省去了 jQuery 包装和解包的过程,但对于复杂的操作和跨浏览器兼容性处理,需要开发者自己编写更多的代码。

how

例如,使用 $("div") 选择页面中所有的 <div> 元素,得到一个包含这些元素的 jQuery 对象;或者通过 $(document) 获取文档对象等。

document.getElementById("id") 获取具有指定 ID 的元素、document.getElementsByClassName("class") 获取具有指定类名的元素集合、document.getElementsByTagName("tag") 获取具有指定标签名的元素集合等。

对象类型和数据结构

是一个类数组对象,具有数组的一些特性,但并非真正的数组。它本质上是一个包含 DOM 元素的集合,并且提供了一些额外的方法和属性来方便操作

对于单个元素获取的 DOM 对象,它是一个独立的元素对象;对于通过 getElementsByClassNamegetElementsByTagName 等方法获取的则是类数组对象,但这些类数组对象并不具备 jQuery 对象那样丰富的方法和属性。

性能表现

由于其内部实现和功能丰富性,相对来说可能会比直接操作 DOM 对象稍慢一些,尤其是在大量元素操作或频繁操作时,性能差异可能会更明显。

直接操作 DOM 对象通常具有较高的性能,因为省去了 jQuery 包装和解包的过程,但对于复杂的操作和跨浏览器兼容性处理,需要开发者自己编写更多的代码

浏览器兼容性

好:Query 库本身对各种浏览器的兼容性进行了处理,使得在不同浏览器中的操作行为更加一致,减少了开发者处理浏览器兼容性问题的工作量。

不好:不同浏览器对 DOM 对象的实现可能会有一些差异,尤其是在一些较老的浏览器中,可能需要开发者进行额外的兼容性处理。

转换

从 DOM 对象到 jQuery 对象:可以使用 $ 函数将 DOM 对象转换为 jQuery 对象,以便使用 jQuery 的方法和属性。

例如,var domObj = document.getElementById("myDiv"); var $jqObj = $(domObj);

从 jQuery 对象到 DOM 对象:可以通过索引访问的方式获取对应的 DOM 对象,如 var domObj = $jqObj[0];

hover 和 toggle

hover

toggle

what

将一个或两个处理程序绑定到匹配的元素,以便在鼠标指针进入和离开元素时执行。

toggle 方法是 jQuery 中一种强大而灵活的方法,它不仅可以用于控制元素的显示与隐藏,还能执行动画效果、切换事件处理函数以及自定义函数之间的切换。在实际开发中,开发者应根据具体需求选择合适的用法和参数配置,以实现最佳的交互效果和用户体验。

where

将两个处理程序绑定到匹配的元素,以便在鼠标指针进入和离开元素时执行。

执行动画效果

元素的显示与隐藏切换

自定义函数之间的切换

why

要添加特殊样式以列出悬停在其上的项目

灵活

how

变迁

3.3后弃用啦~

此 API 已弃用。请改用:

.on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut )

效果变多啦~

但视频课的效果在1.8后被弃用~在1.9被删除 QwQ~

思维导图

1

2

3

4

总结

        度过jQuery阶段,接下来是学习软件工程。可能暂时不会敲代码了,但是我认为绝对不能孤立地看待问题,学软工也要结合具体代码来联想学习。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/959024.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LabVIEW太阳能照明监控系统

在公共照明领域&#xff0c;传统的电力照明系统存在高能耗和维护不便等问题。利用LabVIEW开发太阳能照明监控系统&#xff0c;通过智能控制和实时监测&#xff0c;提高能源利用效率&#xff0c;降低维护成本&#xff0c;实现照明系统的可持续发展。 ​ 项目背景 随着能源危机…

Golang Gin系列-8:单元测试与调试技术

在本章中&#xff0c;我们将探讨如何为Gin应用程序编写单元测试&#xff0c;使用有效的调试技术&#xff0c;以及优化性能。这包括设置测试环境、为处理程序和中间件编写测试、使用日志记录、使用调试工具以及分析应用程序以提高性能。 为Gin应用程序编写单元测试 设置测试环境…

Spring Boot 邂逅Netty:构建高性能网络应用的奇妙之旅

一、引言 在当今数字化时代&#xff0c;构建高效、可靠的网络应用是开发者面临的重要挑战。Spring Boot 作为一款强大的 Java 开发框架&#xff0c;以其快速开发、简洁配置和丰富的生态支持&#xff0c;深受广大开发者喜爱。而 Netty 作为高性能、异步的网络通信框架&#xff…

科普篇 | “机架、塔式、刀片”三类服务器对比

一、引言 在互联网的世界里&#xff0c;服务器就像是默默运转的超级大脑&#xff0c;支撑着我们日常使用的各种网络服务。今天&#xff0c;咱们来聊聊服务器家族中的三位 “明星成员”&#xff1a;机架式服务器、塔式服务器和刀片式服务器。如果把互联网比作一座庞大的城市&…

中民集团张敏海为国际和平发展和国际经贸合作增添更多活力

中民集团生物科技有限公司总经理、中国战略与管理研究会志愿军研究会会长助理张敏海&#xff0c;受韩国GSL集团和潘基文基金会的邀请&#xff0c;在韩国济州岛&#xff0c;与前联合国秘书长、海南博鳌论坛理事长潘基文先生&#xff0c;澳洲大使、潘基文助理、GSL集团总顾问金奉…

2025年国产化推进.NET跨平台应用框架推荐

2025年国产化推进.NET跨平台应用框架推荐 1. .NET MAUI NET MAUI是一个开源、免费&#xff08;MIT License&#xff09;的跨平台框架&#xff08;支持Android、iOS、macOS 和 Windows多平台运行&#xff09;&#xff0c;是 Xamarin.Forms 的进化版&#xff0c;从移动场景扩展到…

数据库SQLite和SCADA DIAView应用教程

课程简介 此系列课程大纲主要包含七个课时。主要使用到的开发工具有&#xff1a;SQLite studio 和 SCADA DIAView。详细的可成内容大概如下&#xff1a; 1、SQLite 可视化管理工具SQLite Studio &#xff1a;打开数据库和查询数据&#xff1b;查看视频 2、创建6个变量&#x…

Redis vs. 其他数据库:深度解析,如何选择最适合的数据库?

一、如何为项目选择合适的数据库&#xff1f; 选择合适的数据库是一个复杂的过程&#xff0c;需要综合考虑多个因素。下面几个维度来详细阐述&#xff1a; 1.数据模型 关系型数据库&#xff08;RDBMS&#xff09;&#xff1a;适用于高度结构化、关联性强的数据&#xff0c;如电…

c#使用log4Net配置日志文件

1.# 写一个通用类 LogHelper using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using log4net;namespace WindowsFormsApplication22 {public class LogHelper{static ILog mylog LogManager.GetLogge…

2_高并发内存池_各层级的框架设计及ThreadCache(线程缓存)申请内存设计

一、高并发内存池框架设计 高并发池框架设计&#xff0c;特别是针对内存池的设计&#xff0c;需要充分考虑多线程环境下&#xff1a; 性能问题锁竞争问题内存碎片问题 高并发内存池的整体框架设计旨在提高内存的申请和释放效率&#xff0c;减少锁竞争和内存碎片。 高并发内存…

【深入理解FFMPEG】命令行阅读笔记

这里写自定义目录标题 第三章 FFmpeg工具使用基础3.1 ffmpeg常用命令3.1.13.1.3 转码流程 3.2 ffprobe 常用命令3.2.1 ffprobe常用参数3.2.2 ffprobe 使用示例 3.3 ffplay常用命令3.3.1 ffplay常用参数3.3.2 ffplay高级参数3.3.4 ffplay快捷键 第4章 封装与解封装4.1 视频文件转…

5. 马科维茨资产组合模型+政策意图AI金融智能体(Qwen-Max)增强方案(理论+Python实战)

目录 0. 承前1. AI金融智能体1.1 What is AI金融智能体1.2 Why is AI金融智能体1.3 How to AI金融智能体 2. 数据要素&计算流程2.1 参数集设置2.2 数据获取&预处理2.3 收益率计算2.4 因子构建与预期收益率计算2.5 协方差矩阵计算2.6 投资组合优化2.7 持仓筛选2.8 AI金融…

2013年蓝桥杯第四届CC++大学B组真题及代码

目录 1A&#xff1a;高斯日记&#xff08;日期计算&#xff09; 2B&#xff1a;马虎的算式&#xff08;暴力模拟&#xff09; 3C&#xff1a;第39级台阶&#xff08;dfs或dp&#xff09; 4D&#xff1a;黄金连分数&#xff08;递推大数运算&#xff09; 5E&#xff1a;前缀…

day1-->day7| 机器学习(吴恩达)学习笔记

一、监督学习(Supervised learning) 给予每一个Input–>对应一个output 1.1&#xff1a;样例&#xff1a; 也就是针对每一个输入样例input&#xff0c;我们都给他制定一个function&#xff0c;使得它有确定的Output映射输出。 1.2&#xff1a;两大监督学习经典样例&…

git Bash通过SSH key 登录github的详细步骤

1 问题 通过在windows 终端中的通过git登录github 不再是通过密码登录了&#xff0c;需要本地生成一个密钥&#xff0c;配置到gihub中才能使用 2 步骤 &#xff08;1&#xff09;首先配置用户名和邮箱 git config --global user.name "用户名"git config --global…

15.7k!DISM++一款快捷的系统优化工具

软件介绍 链接 软件介绍 dism是一款由初雨团队开发的win系统优化工具&#xff0c;可当作是微软系统命令行工具dism的GUI版本。可用作系统垃圾清除、启动项管理、程序卸载、驱动管理、系统优化等 该工具个人感觉最重要的就是系统优化选项&#xff0c;它将一些实用、无用或者没…

微信小程序启动小程序APP Page Component创建顺序

之前之后的打印 都是在&#xff08;&#xff09;之外

【论文+源码】Diffusion-LM 改进了可控文本生成

这篇论文探讨了如何在不重新训练的情况下控制语言模型&#xff08;LM&#xff09;的行为&#xff0c;这是自然语言生成中的一个重大开放问题。尽管近期一些研究在控制简单句子属性&#xff08;如情感&#xff09;方面取得了成功&#xff0c;但在复杂的细粒度控制&#xff08;如…

vim如何显示行号

:set nu 显示行号 :set nonu 不显示行号 &#xff08;vim如何使设置显示行号永久生效&#xff1a;vim如何使相关设置永久生效-CSDN博客&#xff09;

谈谈RTMP|RTSP播放器视频view垂直|水平反转和旋转设计

技术背景 我们在做RTMP|RTSP播放器的时候&#xff0c;有这样的技术诉求&#xff0c;有的摄像头出来的数据是有角度偏差的&#xff0c;比如“装倒了”&#xff0c;或者&#xff0c;图像存在上下或者左右反转&#xff0c;这时候&#xff0c;就需要播放器能做响应的处理&#xff…