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

news2025/1/26 14:14:20

 引言

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

无公网IP 外网访问媒体服务器 Emby

Emby 是一款多媒体服务器软件&#xff0c;用户可以在 Emby 创建自己的个人多媒体娱乐中心&#xff0c;并且可以跨多个设备访问自己的媒体库。它允许用户管理传输自己的媒体内容&#xff0c;比如电影、电视节目、音乐和照片等。 本文将详细的介绍如何利用 Docker 在本地部署 Emb…

PAT甲级-1022 Digital Libiary

题目 题目大意 一个图书有图书id&#xff0c;书名&#xff0c;作者&#xff0c;关键字&#xff0c;出版商&#xff0c;出版时间6个信息。现要查询图书的ID&#xff0c;1对应通过书名查询&#xff0c;2对应作者&#xff0c;3对应关键字&#xff08;不需要完全一致&#xff0c;包…

OpenCV:在图像中添加高斯噪声、胡椒噪声

目录 在图像中添加高斯噪声 高斯噪声的特性 添加高斯噪声的实现 给图像添加胡椒噪声 实现胡椒噪声的步骤 相关阅读 OpenCV&#xff1a;图像处理中的低通滤波-CSDN博客 OpenCV&#xff1a;高通滤波之索贝尔、沙尔和拉普拉斯-CSDN博客 OpenCV&#xff1a;图像滤波、卷积与…

二叉树的存储(下)c++

链式存储 我们可以创建两个数组L[N]、r[N]&#xff0c;分别存储i 号结点的左右孩子的编号&#xff0c;这样就可以通过数组下标实现链式访问。 本质上还是孩子表示法&#xff0c;存储的是左右孩子的信息 #include <iostream>using namespace std;const int N 1e6 10; …

回归预测 | MATLAB基于TCN-BiGRU时间卷积神经网络结合双向门控循环单元多输入单输出回归预测

效果一览 基本介绍 回归预测 | MATLAB基于TCN-BiGRU时间卷积神经网络结合双向门控循环单元多输入单输出回归预测 一、引言 1.1、研究背景及意义 在当今数据驱动的时代&#xff0c;时间序列预测已成为金融、气象、工业控制等多个领域的关键技术。随着人工智能和机器学习技术的…

如何获取小程序的code在uniapp开发中

如何获取小程序的code在uniapp开发中&#xff0c;也就是本地环境&#xff0c;微信开发者工具中获取code&#xff0c;这里的操作是页面一进入就获取code登录&#xff0c;没有登录页面的交互&#xff0c;所以写在了APP.vue中&#xff0c;也就是小程序一打开就获取用户的code APP.…

BGP边界网关协议(Border Gateway Protocol)路由聚合详解

一、路由聚合 1、意义 在大规模的网络中&#xff0c;BGP路由表十分庞大&#xff0c;给设备造成了很大的负担&#xff0c;同时使发生路由振荡的几率也大大增加&#xff0c;影响网络的稳定性。 路由聚合是将多条路由合并的机制&#xff0c;它通过只向对等体发送聚合后的路由而…

《用DOTS解决实际需求》集锦

去年作者发布了一篇《DOTS-ECS系列课程》&#xff0c;深受同学们的好评&#xff01;前期课程是基于0.51版本录制的&#xff0c;DOTS升级至1.0版本后&#xff0c;同学们纷纷希望能使用DOTS 1.0版本录制实战课程。 今年作者带着DOTS 1.0版本的实战课程回来啦&#xff01;&#x…

pycharm 运行远程环境问题 Error:Failed to prepare environment.

问题排查 拿到更详细的报错信息&#xff1a; Help > Diagnostic Tools > Debug Log Settings section: 添加下面的配置 com.intellij.execution.configurations.GeneralCommandLine 重显报错&#xff0c;我这里是再次运行代码打开 Help | Collect Logs and Diagnosti…

11、性能测试及监控Nginx动静分离配置

1、Jconsole使用 1、win cmd窗口输入jconsole打开工具 选择需要监控的应用程序&#xff0c;点击连接即可进行监控 2、jvisualvm监控工具 1、cmd控制台输入jvisualvm打开工具 运行&#xff1a;正在运行的 休眠&#xff1a;sleep 等待&#xff1a;wait 驻留&#xff1a;线…

流行的开源高性能数据同步工具 - Apache SeaTunnel 整体架构运行原理

概述 背景 数据集成在现代企业的数据治理和决策支持中扮演着至关重要的角色。随着数据源的多样化和数据量的迅速增长&#xff0c;企业需要具备强大的数据集成能力来高效地处理和分析数据。SeaTunnel通过其高度可扩展和灵活的架构&#xff0c;帮助企业快速实现多源数据的采集、…

【Address Overfitting】解决过拟合的三种方法

目录 1. 收集更多数据实践方法&#xff1a;适用场景&#xff1a;优缺点&#xff1a; 2. 特征选择方法介绍&#xff1a;实践示例&#xff1a;适用场景&#xff1a;优缺点&#xff1a; 3. 正则化&#xff08;Regularization&#xff09;正则化类型&#xff1a;实践示例&#xff1…

机器人SLAM建图与自主导航

前言 这篇文章我开始和大家一起探讨机器人SLAM建图与自主导航 &#xff0c;在前面的内容中&#xff0c;我们介绍了差速轮式机器人的概念及应用&#xff0c;谈到了使用Gazebo平台搭建仿真环境的教程&#xff0c;主要是利用gmapping slam算法&#xff0c;生成一张二维的仿真环境…

士的宁(strychnine)的生物合成-文献精读104

Biosynthesis of strychnine 士的宁&#xff08;strychnine&#xff09; 又名 番木鳖碱 的生物合成 摘要 士的宁&#xff08;番木鳖碱&#xff09;是一种天然产物&#xff0c;通过分离、结构阐明和合成努力&#xff0c;塑造了有机化学领域。目前&#xff0c;士的宁因其强大的…

Moretl FileSync增量文件采集工具

永久免费: <下载> <使用说明> 我们希望Moretl FileSync是一款通用性很好的文件日志采集工具,解决工厂环境下,通过共享目录采集文件,SMB协议存在的安全性,兼容性的问题. 同时,我们发现工厂设备日志一般为增量,为方便MES,QMS等后端系统直接使用数据,我们推出了增量采…

设计模式的艺术-中介者模式

行为型模式的名称、定义、学习难度和使用频率如下表所示&#xff1a; 1.如何理解中介者模式 如果在一个系统中对象之间存在多对多的相互关系&#xff0c;可以将对象之间的一些交互行为从各个对象中分离出来&#xff0c;并集中封装在一个中介者对象中&#xff0c;由该中介者进行…

win32汇编环境,函数的编写与调用、传值或返回值等

;运行效果 ;win32汇编环境,函数的编写与调用、传值或返回值等 ;函数在被调用的时候&#xff0c;如果此函数实体在前面&#xff0c;可以不用声明。如果实体在后面&#xff0c;则需要先声明。类似于下面的DlgProc函数&#xff0c;因为它的实体在后面&#xff0c;所以需要在调用之…

填坑 kali 虚拟机磁盘耗尽

今天准备SSH暴力破解&#xff0c;打开kali 虚拟机的时候&#xff0c;发现一直卡在一个地方不动&#xff0c;一开始的时候&#xff0c;我并不知道是磁盘满了&#xff0c;只是跟着网上的解决方案去实施操作&#xff0c;也是通过recovery mode&#xff0c;然后一通操作拿到shell&a…

智能手机“混战”2025:谁将倒下而谁又将突围?

【潮汐商业评论原创】 “去年做手机比较艰难&#xff0c;几乎每个品牌都在调价、压货&#xff0c;像华为这种以前都不给我们分货的厂商&#xff0c;也开始成为我的主要库存。不过今年开头比较好&#xff0c;20号国补一开始&#xff0c;店里的人流和手机销量就明显涨了不少&…

MongoDB文档查询

一、实验目的 1. 理解MongoDB文档数据库的基本概念和特性。 2. 掌握在MongoDB中创建集合和插入文档数据的方法。 3. 学习使用MongoDB进行文档查询操作&#xff0c;包括查询、过滤和排序等。 二、实验环境准备 1. JAVA环境准备&#xff1a;确保Java Development Kit (J…