当前位置： 首页 > news >正文

jQuery阶段总结（二维表＋思维导图）

news 2026/2/7 21:33:53

 引言

        经过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（元素值），如果是遍历对象，参数为 key 和 value。

回调函数的参数为 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 对象，它是一个独立的元素对象；对于通过 getElementsByClassName 或 getElementsByTagName 等方法获取的则是类数组对象，但这些类数组对象并不具备 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阶段，接下来是学习软件工程。可能暂时不会敲代码了，但是我认为绝对不能孤立地看待问题，学软工也要结合具体代码来联想学习。

相关文章：

jQuery阶段总结（二维表＋思维导图）

引言 经过23天的学习&#xff0c;期间有期末考试&#xff0c;有放假等插曲。本来应该在学校里学习&#xff0c;但是特殊原因&#xff0c;让回家了。但是在家学习的过程&#xff0c;虽然在学&#xff0c;很让我感觉到不一样。但是效果始终还是差点的&#xff0c;本来17、18号左右…...

编程日记 2025/1/25 7:24:49

【LLM】RedisSearch 向量相似性搜索在 SpringBoot 中的实现

整理不易&#xff0c;请不要吝啬你的赞和收藏。 1. 前言 写这篇文章挺不容易的&#xff0c;网络上对于 SpringBoot 实现 Redis 向量相似性搜索的文章总体来说篇幅较少&#xff0c;并且这些文章很多都写得很粗糙&#xff0c;或者不是我想要的实现方式&#xff0c;所以我不得不阅…...

编程日记 2025/1/25 7:19:45

如何为64位LabVIEW配置正确的驱动程序

在安装 64位 LabVIEW 后&#xff0c;确保驱动程序正确配置是关键。如果您首先安装了 32位 LabVIEW 和相关驱动&#xff0c;然后安装了 64位 LabVIEW&#xff0c;需要确保为 64位 LabVIEW 安装和配置适当的驱动程序&#xff0c;才能正常访问硬件设备。以下是详细步骤&#xff1a…...

编程日记 2025/1/25 7:18:43

Redis（5，jedis和spring）

在前面的学习中&#xff0c;只是学习了各种redis的操作&#xff0c;都是在redis命令行客户端操作的&#xff0c;手动执行的&#xff0c;更多的时候就是使用redis的api&#xff08;&#xff09;&#xff0c;进一步操作redis程序。 在java中实现的redis客户端有很多&#xff0c;…...

编程日记 2025/1/25 7:14:39

Git 小白入门教程

&#x1f3af; 这篇文章详细介绍了版本控制的重要性&#xff0c;特别是通过Git实现的分布式版本控制相对于SVN集中式控制的优势。文章首先解释了版本控制的基本概念&#xff0c;强调了在文档或项目多版本迭代中备份与恢复任意版本的能力。接着&#xff0c;重点阐述了Git的历史背…...

编程日记 2025/1/25 7:05:29

Python从0到100（八十五）：神经网络与迁移学习在猫狗分类中的应用

在人工智能的浩瀚宇宙中&#xff0c;深度学习犹如一颗璀璨的星辰&#xff0c;引领着机器学习和计算机视觉领域的前沿探索。而神经网络&#xff0c;作为深度学习的核心架构&#xff0c;更是以其强大的数据建模能力&#xff0c;成为解决复杂问题的重要工具。今天&#xff0c;我们…...

编程日记 2025/1/25 7:02:24

代码随想录刷题day14(2)|（链表篇）02.07. 链表相交（疑点）

目录 一、链表理论基础 二、链表相交求解思路 三、相关算法题目 四、疑点 一、链表理论基础 代码随想录 二、链表相交求解思路 链表相交时&#xff0c;是结点的位置&#xff0c;也就是指针相同&#xff0c;不是结点的数值相同&#xff1b; 思路&#xff1a;定义两个指针…...

编程日记 2025/1/25 6:57:19

C++ 复习总结记录九

C 复习总结记录九 主要内容 1、list 介绍及使用 2、list 剖析及模拟实现 3、list 与 vector 对比 一 list 介绍及使用 List 相关文档 1、List 在任意位置进行插入和删除的序列式容器 O(1) &#xff0c;且该容器可前后双向迭代 2、List 底层是带头双向循环链表&#xff…...

编程日记 2025/1/25 6:52:13

数据库性能优化(sql优化)_SQL执行计划02_yxy

数据库性能优化_SQL执行计划详解02 常用操作符解读1.1 表扫描类型操作符1.1.1 CSCN 聚集索引扫描1.1.2 CSEK 聚集索引数据定位1.1.3 SSEK 二级索引数据定位1.1.4 SSCN 直接使用二级索引进行扫描1.2 其他常见操作符1.2.1 BLKUP 二次扫描1.2.2 SLCT 选择1.2.3 PRJT 投影1.2.4 NSE…...

编程日记 2025/1/25 6:47:09

Vivado生成X1或X4位宽mcs文件并固化到flash

1.生成mcs文件 01.在vivado里的菜单栏选择"tools"工具栏 02.在"tools"里选择"生成内存配置文件" 03.配置参数 按照FPGA板上的flash型号进行选型&#xff0c;相关配置步骤可参考下图。 注意&#xff1a;Flash数据传输位宽如果需要选择X4位宽&am…...

编程日记 2025/1/25 6:46:08

在K8S中使用Values文件定制不同环境下的应用配置详解

在Kubernetes&#xff08;简称K8s&#xff09;环境中&#xff0c;应用程序的配置管理是一项关键任务。为了确保应用程序在不同环境&#xff08;如开发、测试、预发布和生产&#xff09;中都能稳定运行&#xff0c;我们需要为每个环境定制相应的配置。Values文件是在使用Helm管理…...

编程日记 2025/1/25 6:42:04

边缘网关具备哪些功能？

边缘网关&#xff0c;又称边缘计算网关&#xff0c;部署在网络边缘&#xff0c;它位于物联网设备与云计算平台之间&#xff0c;充当着数据流动的“守门员”和“处理器”。通过其强大的数据处理能力和多样化的通信协议支持&#xff0c;边缘网关能够实时分析、过滤和存储来自终端…...

编程日记 2025/1/25 6:40:02

ThinkPHP 8 操作JSON数据

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…...

编程日记 2025/1/25 6:39:01

环境变量配置与问题解决

目录 方法 配置了还是运行不了想要的东西 解决方案 为什么 解决方案 方法 方法一&#xff1a;此电脑右击-属性-相关链接-高级系统设置-环境变量&#xff08;N&#xff09;-系统变量里面找到Path-三个确定】 方法二&#xff1a;winr cmd 黑框输入sysdm.cpl&#xff0c;后面…...

编程日记 2025/1/25 6:36:59

pytorch2.5实例教程

以下是再次为你提供的一个详细的PyTorch使用教程&#xff1a; 一、安装PyTorch 环境准备 确保系统已安装合适版本的Python&#xff08;推荐3.10及以上&#xff09;。 安装方式 CPU版本 对于Linux和macOS&#xff1a; 使用命令 pip install torch torchvision torchaudio。 对…...

编程日记 2025/1/25 6:35:58

【开源免费】基于SpringBoot+Vue.JS智慧图书管理系统（JAVA毕业设计）

本文项目编号 T 152 &#xff0c;文末自助获取源码 \color{red}{T152&#xff0c;文末自助获取源码} T152&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2025/1/25 6:34:57

基于自然语言处理的垃圾短信识别系统

基于自然语言处理的垃圾短信识别系统 &#x1f31f; 嗨&#xff0c;我是LucianaiB&#xff01; &#x1f30d; 总有人间一两风&#xff0c;填我十万八千梦。 &#x1f680; 路漫漫其修远兮&#xff0c;吾将上下而求索。 目录 设计题目设计目的设计任务描述设计要求输入和输出…...

编程日记 2025/1/25 6:32:53

Node.js HTTP模块详解：创建服务器、响应请求与客户端请求

Node.js HTTP模块详解&#xff1a;创建服务器、响应请求与客户端请求 Node.js 的 http 模块是 Node.js 核心模块之一&#xff0c;它允许你创建 HTTP 服务器和客户端。以下是一些关键知识点和代码示例&#xff1a; 1. 创建 HTTP 服务器 使用 http.createServer() 方法可以创建…...

编程日记 2025/1/25 6:31:51

Day 17 卡玛笔记

这是基于代码随想录的每日打卡 654. 最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组…...

编程日记 2025/1/25 6:30:49

深圳大学-智能网络与计算-实验一：RFID原理与读写操作

实验目的与要求 掌握超高频RFID标签的寻卡操作。掌握超高频RFID标签的读写操作。掌握超高频RFID标签多张卡读取时的防冲突机制。 方法&#xff0c;步骤 软硬件的连接与设置超高频RFID寻卡操作超高频RFID防冲突机制超高频RFID读写卡操作 实验过程及内容 一&#xff0e;软硬…...

编程日记 2025/1/25 6:29:46

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22