![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识总结
文章平均质量分 68
crary,记忆
这个作者很懒,什么都没留下…
展开
-
浅学document对象之获取页面元素
HTMLCollection 是一个类数组对象,表示由 DOM 方法返回的元素集合,例如。方法返回的就是 HTMLCollection 对象。方法可以根据类名获取所有具有相同类名的元素,返回一个 HTMLCollection。方法可以根据 CSS 选择器获取所有匹配的元素,返回一个 NodeList。方法可以根据元素的 ID 属性获取到对应的 DOM 元素。方法可以根据 CSS 选择器获取匹配的第一个元素。通过 CSS选择器 获取多个元素集合。通过 CSS选择器 获取单个元素。通过 类名 获取元素集合。原创 2024-07-18 09:15:00 · 1513 阅读 · 0 评论 -
前端 响应式设计之媒体查询
媒体查询(Media Queries)是用于在网页设计中根据用户设备的特征(如屏幕宽度、高度、设备类型等)来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式,以提供更好的用户体验。:指定CSS样式应用的设备或媒体类型。allprintscreenspeech:指定CSS样式根据设备或环境的不同特性而应用或不应用。媒体特性必须用小括号括起来,并且包含一个或多个表达式,例如设备的宽度或高度。widthheightresolution:使用的逻辑操作符包括andnot和。原创 2024-06-21 12:00:00 · 743 阅读 · 0 评论 -
前端 响应式设计的概念
响应式设计(Responsive Design)是一种网页设计和开发的方法论,旨在使网站能够适应各种不同的设备和屏幕尺寸,包括桌面电脑、平板电脑和手机等移动设备。其核心理念是一个网站能够根据访问者的设备特性自动调整布局、内容和功能,以提供最佳的用户体验。原创 2024-06-21 09:24:09 · 604 阅读 · 0 评论 -
HTML5的新属性
是 HTML5 中的一个布尔属性,用于指定页面加载后自动将焦点(即光标)放在指定的输入字段上,使用户可以立即开始在该字段中输入内容。属性是 HTML5 中用于表单验证的一个属性,它用于指定一个正则表达式,以验证输入字段中的值是否符合特定的模式。属性,可以更灵活地组织和布局表单元素,使其可以跨越不同的 HTML 结构,而仍然能够在逻辑上属于同一个表单。属性,因为只有一个元素可以拥有焦点,这可能会导致意外的用户体验,特别是在用户期望焦点在其他元素上时。属性,但在某些较旧的浏览器版本中可能不被完全支持。原创 2024-06-21 10:30:00 · 1120 阅读 · 0 评论 -
HTTP 415错误状态码
HTTP 415错误状态码是指"Unsupported Media Type"(不支持的媒体类型)。这通常发生在客户端向服务器发送请求时,请求中包含的媒体类型(例如Content-Type头部)不被服务器支持或识别的情况下。原创 2024-06-18 12:00:00 · 2873 阅读 · 0 评论 -
Angular13 如何创建一个模拟后端mockServe
在前端和后端的同时开发中,从事应用程序的 Angular 开发人员必须能够与虚假后端进行交互,以便通过模拟后端数据来创建 UI。其中我们就会使用和的npm 包来帮助我们完成这个过程。原创 2024-06-18 10:30:00 · 1010 阅读 · 0 评论 -
CSS动画 学习
transform属性应用于2D 或 3D转换。可以实现倾斜、移动、旋转、缩放这四类动画效果。原创 2024-06-14 09:00:00 · 1106 阅读 · 0 评论 -
CSS滤镜(Filter)学习
CSS滤镜(Filter)是一种强大的视觉效果工具,允许开发者在不借助额外图像处理软件的情况下,直接通过CSS对HTML元素(如图片、文本、背景等)应用各种图像处理效果,如模糊、颜色变化或者其它图形处理等,这些效果可以在浏览器中进行硬件加速。属性应用到HTML元素上的一系列图像处理函数。这些函数可以单独使用,也可以组合在一起,产生丰富多彩的视觉效果。下面这位大大的博文, 图文并茂,大家有兴趣真的可以看一下哦!,但它们在实现方式、效果和应用场景上有一些不同。原创 2024-06-14 12:00:00 · 976 阅读 · 0 评论 -
前端 获取API的响应时间 的方法总结
则用于在超时时切换到备用的 Observable。如果你想要处理 Observable 的超时情况并执行特定的操作,可以使用。如果你想要在超时时切换到备用的 Observable 进行替代操作,可以使用。用于处理 Observable 的超时情况,而。原创 2024-06-06 00:00:00 · 787 阅读 · 0 评论 -
HTTP 的三次握手
HTTP 的三次握手是指在建立 TCP 连接时,客户端和服务器之间进行的三步握手过程。这个过程确保了双方都能够互相通信,并且同步了彼此的序列号和确认号。原创 2024-06-03 20:00:00 · 921 阅读 · 0 评论 -
HTML textArea元素的使用你知道多少?
下面的三种方法在Enter键提交表单时都要额外处理一下,因为Enter键会换行,这样会带来一定的高度样式的不正确性,所以这时我们可以用。模拟textarea文本域实现高度自适应;scrollHeight手动设置。Enter键换行的默认行为。textArea自适应高度。第二种方法:通过用JS中的。来设置文本域自适应高度;textArea的高度;原创 2024-05-15 09:30:00 · 1113 阅读 · 0 评论 -
EventSource之重连特性 学习
需要注意的是,retry 字段是可选的,如果不设置 retry 字段,浏览器会使用默认的重新连接时间间隔。因此当在 onerror 事件处理程序中编写重连逻辑时,可能会导致浏览器和服务器之间的 EventSource 连接频繁断开和重连,从而在网络面板中出现大量的 SSE 连接。下面的示例中,我们将 eventSource 对象的 retry 字段设置为 3000,表示在连接中断后,浏览器会每隔 5 秒尝试重新连接服务器一次。当连接中断后,浏览器会根据 retry 字段的值来确定重新连接的时间间隔。原创 2024-05-08 09:00:00 · 2739 阅读 · 0 评论 -
比较 文本数据 和 二进制数据
文本数据和二进制数据是前端数据处理两种常见的数据类型。这两种数据类型在表示和处理方式上存在一定的异同。原创 2024-05-10 12:30:00 · 509 阅读 · 0 评论 -
AbortController Web API 学习
调用 controller.abort()方法会关闭与服务器的连接,但不会触发 EventSource 对象onclose()事件处理程序。相反,调用 controller.abort() 方法会立即关闭连接,而不会触发任何事件处理程序。在上面的示例中,我们首先创建了一个AbortController实例,并从中获取一个signal对象,然后将该signal对象传递给fetch请求的配置中。当需要取消请求时,调用 controller.abort()方法即可中止请求,并触发一个 AbortError错误。原创 2024-05-10 11:00:00 · 369 阅读 · 0 评论 -
CSS的哪些样式可以继承?哪些不可以?
在 CSS 中,有一些样式是可以被子元素继承的,也有一些样式是不会被子元素继承的,同时要注意继承性质,覆盖继承、继承链等在继承过程发挥的作用。原创 2024-05-04 14:00:00 · 468 阅读 · 0 评论 -
JS中的数据绑定方式,以及Angular中如何实现数据绑定
在 JavaScript 中,单向数据绑定和双向数据绑定是两种常见的数据绑定方式。在 Angular 中,单向数据绑定和双向数据绑定的实现方式有插值表达式、属性绑定等原创 2024-05-04 10:00:00 · 269 阅读 · 0 评论 -
HTTP预请求(Preflight Request)
服务器接收到预请求后,会检查这些头部信息,并根据请求头部中的信息来决定是否允许实际请求。HTTP预请求(Preflight Request)是CORS(跨域资源共享)机制中的一种请求,用于在实际的跨域请求之前进行一次预检请求,以确定是否可以安全地发送实际请求。当服务器接收到预请求后,应该返回一个带有合适的CORS头部信息的响应,以表示服务器是否支持跨域请求,并确定是否允许实际请求。预请求的目的是确保跨域请求的安全性,防止潜在的安全风险。这种机制可以有效地防止跨域请求可能带来的安全风险。原创 2024-05-03 12:00:00 · 1096 阅读 · 0 评论 -
Angular Subject和BehaviorSubject之间的区别
缓存最新值就是保存了最新值的意思,也就是说BehaviorSubject 从它订阅开始就一定会收到值,要不就是初始值,要不就是最新一次的next()方法的传递的值。换句话说,BehaviorSubject从订阅开始就会向订阅者发送值,确保订阅者能够获取到初始值或者最新值。但是Subject对象是收到从它订阅开始之后next()传递的最新值,订阅时不会收到任何值!会缓存最新的值,并在有新的订阅者订阅时立即发送这个最新值给订阅者。因为它缓存的是最新的值,并不是缓存所有值!原创 2024-04-24 09:00:00 · 1593 阅读 · 0 评论 -
HTTP常见状态码 汇总
部分信息解析汇总:1** 信息类 例如:2** 响应成功:表示动作被成功接收、理解、接受 例如:3** 重定向:为了完成指定的动作,必须接受进一步处理 例如:4** 客户端错误类:请求包含错误语法或者不能正确执行 例如:5** 服务端端错误类:服务器不能正确执行一个正确的请求 例如:原创 2024-03-03 19:35:59 · 446 阅读 · 0 评论 -
Angular 如何让ngModel 不受父表单控件影响,变成独立模式
在项目中使用 ngModel 时,有时候我们需要将 ngModel 设置为独立模式,以避免父表单控件对其进行干扰。例如,当我们在一个表单中使用自定义组件,并且这个组件内部也有自己的 ngModel 时,为了避免冲突,我们可以将这个 ngModel 设置为。在自定义组件中使用 ngModel 时,为了避免父表单控件对其进行干扰,可以将 ngModel 设置为 standalone 模式。可以帮助我们更好地管理 ngModel 的行为,避免不必要的干扰和冲突,以及提供更灵活的配置选项。原创 2024-03-04 15:45:00 · 837 阅读 · 0 评论 -
CSS 什么是伪类?什么是伪元素?
是用来向元素的特定部分添加特殊样式的关键词,例如::before用于在元素内容前插入内容,::after用于在元素内容后插入内容等。伪元素创建了一个虚拟的元素,允许开发者在元素内的特定位置插入样式和内容。是用来向特定选择器添加特殊效果的关键词,例如:hover用于鼠标悬停时改变元素样式,:active用于元素被点击时改变样式等。伪类是用来选择元素的特定状态或行为,而伪元素是用来选择元素的特定部分。伪类以单冒号(:)开头,伪元素以双冒号(::)开头。原创 2024-03-04 11:00:00 · 339 阅读 · 0 评论 -
前端 类数组对象 学习
则是指的一个对象,它具有类似数组的特性,比如有一个 length 属性表示数组的长度,可以通过索引访问其中的元素。数组对象通常是通过类数组对象或类似数组的对象转换而来,但它并不是真正的数组。到这里,我们已经搞清楚类数组对象的概念,那它可以转换成数组吗?下面是类数组对象转换成数组的5种方法。:指的是一个数组,其中的每个元素都是一个对象。这些对象可以包含多个属性,形成一个包含多个对象的数组结构。实际上,它们都是用来存储一组有序数据的数据结构,只是在不同的语境下有不同的称呼。原创 2024-03-09 13:00:00 · 577 阅读 · 0 评论 -
Angular 将一个字符串进行逐字显示的方法汇总
公司项目是angular,所以实际中使用,我是要考虑到应用Angular框架中,下面是我想到的一些方法汇总,欢迎大家检阅!1.在组件的HTML模板中使用*ngFor指令和setTimeout函数实现逐字显示效果; 2.使用RxJS的interval操作符和map/pluck/scan/bufferCount操作符;3.使用rjxs的timer操作符和map/pluck/scan/bufferCount操作符.原创 2024-03-06 18:00:00 · 1011 阅读 · 0 评论 -
JS 将一个字符串进行逐字显示的方法汇总
毋庸置疑,现在chatGTP是非常火热的,在这个时候公司项目中提到了AI智能对话UI显示界面模仿chatGTP的UI一样,显示答案不能一蹴而就,而要逐字逐字显示。至此,我先学习一个JS版本的。原创 2024-03-05 12:15:00 · 760 阅读 · 0 评论 -
Angular中手动触发更新检测机制的优缺点及注意事项
在学习angular页面更新的时候,也就是在我之前的博客中都会提到使用angular中手动触发更新检测(通过调用。方法)来解决,但是其实在实际的项目开发中,是不太推荐这种方法解决的,下面我将介绍这个办法的优缺点和需要注意的事项。原创 2024-03-07 11:00:00 · 830 阅读 · 0 评论 -
Angular变化检测 2.0版本学习
在学习如何在Angular中实现文字逐字显示的过程中,我发现要保证用户的体验感的关键点在于:如何确保实时更新.html页面的内容显示,保证及时在UI界面反应出后端返回的数据。那如何解决这个问题呢?下面是上面博客的进阶版学习---->这篇博客主要是。,话不多说,直接上代码。原创 2024-03-07 09:00:00 · 1012 阅读 · 0 评论 -
Angular升级后运行编译变慢?如何解决?
公司的Angular项目升级后,使用体验感十分不好,运行、编译的时间明显增长,工作效率是十分低下,但奈何公司的大佬们都有自己的事情要忙,结识的大佬也不够多,只能靠自己找度娘了。但是,哎,你还别说,真让我找到了!注意按照上面截图改了之后初始运行整个项目的时间几乎没有太大改变,但是编译时间是有明显改善的!),大家有条件可以自行查看,不过个人觉得上面大大的文章已经十分详细了,完全足够!总结解决办法:添加development构建配置,也就是我们需要手动将。,并将serve中target的。原创 2024-02-21 22:16:15 · 965 阅读 · 0 评论 -
Angular项目中为什么不能在开发者工具中进行Debug?
启用Source Maps后,Angular将会生成与编译后的JavaScript文件对应的Source Maps文件,这样在浏览器的开发者工具中就可以将编译后的JavaScript代码映射回原始的TypeScript代码,方便调试和定位问题。Source Maps是一种文件,它将编译后的JavaScript代码映射回原始的TypeScript代码,以便在开发者工具中显示原始代码而不是编译后的代码。在Angular项目中,我们通常可以通过浏览器的开发者工具(如Chrome开发者工具)进行调试。原创 2024-02-22 09:00:00 · 436 阅读 · 0 评论 -
创建对象时 new操作符做了什么
操作符可以实例化一个对象,并且确保构造函数中的属性和方法正确地被应用到新创建的对象上。在 JavaScript 中,使用。下面我们通过代码来详细说明。原创 2024-02-20 23:25:08 · 483 阅读 · 0 评论 -
块级上下文格式(Block Formatting Context,BFC)
块级上下文格式(BFC)是 CSS 中的一个概念,用来描述块级盒子在页面布局中的行为。一个块级上下文格式(BFC)是一个独立的渲染区域,其中的元素布局受到这个上下文中的其他元素的影响,而不受外部元素的影响。原创 2024-02-21 11:30:00 · 401 阅读 · 0 评论 -
JS如何提取URL中的参数并以jason格式返回结果
【代码】JS如何提取URL中的参数并以jason格式返回结果。原创 2024-02-20 11:00:00 · 946 阅读 · 0 评论 -
ES6中的Map数据结构的键可以是哪些数据类型
Map的键可以是任何数据类型,包括对象、函数、原始类型等。原创 2024-02-24 10:00:00 · 855 阅读 · 0 评论 -
Map 和 Set 学习
在 JavaScript 中,Map和Set是 ES6 引入的两种新的数据结构,用于存储和管理数据。原创 2024-02-24 19:15:00 · 2127 阅读 · 0 评论 -
JS 深克隆和浅克隆 浅析
深克隆(Deep Clone)和浅克隆(Shallow Clone)是在复制对象或数组时常用的两种概念。它们主要区别在于复制的深。原创 2024-02-18 19:42:47 · 705 阅读 · 0 评论 -
JS箭头函数学习
箭头函数是 ES6 中引入的一种新的函数声明语法,它提供了更简洁的语法形式,并且具有一些特点和注意事项。原创 2024-02-23 11:15:00 · 887 阅读 · 0 评论 -
JS中用来截取部分内容的方法有哪些?
在 JavaScript 中,我们可以使用多种方法来截取字符串或数组的部分内容。方法来截取数组的部分内容,与字符串的。对于数组,我们可以使用。原创 2024-02-22 12:00:00 · 587 阅读 · 0 评论 -
JS 数组中的splice方法汇总
方法是 JavaScript 数组对象的一个方法,用于对数组进行增、删、改操作。原创 2024-02-21 09:00:00 · 777 阅读 · 0 评论 -
Angular中如何实现防抖和节流
在Angular中实现防抖和节流的方法有多种,这篇博客主要是详细介绍两种常用的方法:使用RxJS操作符和使用Angular自带的工具。原创 2024-02-19 20:30:00 · 954 阅读 · 0 评论 -
防抖和节流 简介
防抖和节流都是用来控制函数执行频率的技术,可以用来提高性能和优化用户体验。原创 2024-02-18 19:00:00 · 477 阅读 · 0 评论 -
Html5——拖放和释放API
定义在拖动元素上触发的事件,以便在不同阶段处理拖动操作。常用的事件有dragstart(拖动开始)、drag(拖动过程中)、dragend(拖动结束)。HTML5拖放释放API(Drag and Drop API)是一组用于在网页上实现拖放功能的API。它允许用户将网页上的元素拖动到其他位置,并在释放时执行特定的操作。定义允许拖动元素放置的区域。通过监听dragover事件和drop事件来处理放置操作。使用draggable属性将元素标记为可拖动。原创 2024-01-23 09:00:00 · 540 阅读 · 0 评论