![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML+CSS+JavaScript
文章平均质量分 65
三剑客
eynoZzzzc
没有梦想跟咸鱼又有什么区别捏
展开
-
HTML5 WebSocket
WebSocket用于在单个TCP链接上进行全双工通讯协议,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。创建WebSocket对象:var Socket = new WebSocket(url, [protocol] );url:指定连接的 URLprotocol 是可选的,指定了可接受的子协议。属性:属性描述Socket.send()使用连接发送数据Socket.close()关闭连接Socket.readyS原创 2022-03-02 00:22:15 · 2410 阅读 · 0 评论 -
HTML5 web storage
H5的web storage可在本地存储用户的浏览数据,数据以键值对存在,web网页的数据只允许该网页访问。localStorage用于长期保存网站的数据,没有时间限制。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="r原创 2022-03-01 22:04:15 · 328 阅读 · 0 评论 -
BFC(块格式上下文)
视觉格式化模型(visualformattingmodel)是用来处理文档并将它显示在视觉媒体上的机制,定义了盒(Box)的生成,盒主要包括了块盒、行内盒、匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到规范中)。这意味着一个BFC包含创建该上下文元素的所有子元素,但不包括新创建的BFC的子元素的内部元素。它是一个封闭的黑盒子,里面元素的布局不会影响外部,反之亦然。,而根元素会创建一个BFC,创建一个新的BFC时就相当于在这个元素内部创建一个新的。的布局过程发生的区域,也是。...原创 2022-07-15 15:59:32 · 155 阅读 · 0 评论 -
CSS选择器
通用选择器*{}标签选择器标签(p,body...){}ID选择器#ID{}注:如果一个元素有id或者应该有id,不要强行添加id从而使用ID选择器。类选择器.class{}注:拒绝滥用!!伪类选择器匹配其父元素中的第一个子元素:firstchild{}匹配其父元素的最后一个子元素:lastchild{}动态伪类input:focus{}鼠标点击a:hover{}选择访问过的链接a:visited{}属性选择器[属性]{}[属性=属性值]{}原创 2022-03-03 00:16:39 · 1092 阅读 · 0 评论 -
CSS定位
CSS的position指定了元素的定位类型staticHTML的默认定位,即没有定位方式,满足文档流。position:staticfixed元素位置相对浏览器窗口处在固定位置,即使浏览器滚动位置也不会发生改变;fixed使得元素位置与文档流无关,不占空间;可以和其他元素重叠。position:fixedtop:80px;right:70px;relative相对定位会按照元素的原始位置对该元素进行移动;而且原本所占的位置保留。position:relative;abs原创 2022-03-07 00:52:57 · 34 阅读 · 0 评论 -
CSS盒子模型
盒子模型HTML元素可以看作盒子,用于CSS设计与布局,包括边距(margin)、边框(border)、填充(padding)、内容(content)。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距边框Border属性:border-style 定义边框样式:/**/border-style:none /*默认无边框*/ dotted /*定义一个点线边框*/ dashed /原创 2022-03-05 21:53:54 · 121 阅读 · 0 评论 -
CSS垂直居中
的属性值,是指元素进行2D变换,元素以当前位置(0,0)按照。添加盒子内项目在纵轴上的对齐方式为。给父元素设置弹性盒子;属性定义项目在主轴上的对齐方式为居中。使用绝对定位脱离文档流;绝对定位+marginauto。绝对定位+transform。元素相对父元素绝对定位;轴的方向移动多少,按照。flex设定纵轴为主轴。父元素设置。...原创 2022-07-18 15:48:56 · 45 阅读 · 0 评论 -
Javascript垃圾回收机制
当变量进入上下文,比如在函数内部声明一个变量时,这个变量会被加上存在于上下文中的标记。而在上下文中的变量,逻辑上讲,永远不应该释放它们的内存,因为只要上下文中的代码在运行,就有可能用到它们。当变量离开上下文时,也会被加上离开上下文的标记。但并不是所有时候都会这么明显,垃圾回收程序必须跟踪记录哪个变量还会使用,以及哪个变量不会再使用,以便回收内存。定期的,垃圾回收期将从这个全局对象开始,找所有从这个全局对象开始引用的对象,再找这些对象引用的对象…,所以整个函数以及内部的变量都应该被回收,但根据引用计数方法,.原创 2022-08-03 19:30:02 · 88 阅读 · 0 评论 -
函数柯里化
柯里化是一种函数的转换,它是指将一个函数从可调用的f(a, b, c)转换为可调用的f(a)(b)(c)。把接受多个参数的函数转换成接受一个单一参数的函数。// curry(f) 执行柯里化转换 return function(a) {};};} // 用法 function sum(a , b) {// 3柯里化更高级的实现,例如lodash库的_.curry// 使用来自 lodash 库的 _.curry alert(curriedSum(1 , 2));...原创 2022-08-03 15:39:07 · 132 阅读 · 0 评论 -
vscode+CRA+TypeScript+eslint+prettier+stylelint+husky+lint-staged完整版配置
最近在做一个react项目,需要统一和规范代码风格,并且实现git管理,规范提交。所以基于CRA脚手架搭建项目整体框架,并自定义配置相关需求。原创 2022-07-25 10:38:58 · 670 阅读 · 0 评论 -
继承方式知多少
这意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条。每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。ES6继承是使用关键字先创建父类的实例对象this,最后在子类class中修改this。,从而实现子类可以访问到父类构造函数以及原型上的属性或者方法。同时结合原型链继承、构造函数继承,是使用最多的继承方式。通过修改父类构造函数this实现的继承。在组合继承的基础上,解决了。...原创 2022-07-18 16:26:45 · 72 阅读 · 0 评论 -
数据结构(JS版)
选择排序选定第一个索引位置,然后和后面元素依次比较如果后面的队员, 小于第一个索引位置的队员, 则交换位置经过一轮的比较后, 可以确定第一个位置是最小的,一共进行轮(数组长度)然后使用同样的方法把剩下的元素逐个比较即可可以看出选择排序,第一轮会选出最小值,第二轮会选出第二小的值,直到最后插入排序从第一个元素开始,该元素可以认为已经被排序取出下一个元素 ,在已经排序的元素序列中从后向前扫描如果已排序的元素大于新元素 ,将已排序的元素移到下一位置重复上一个步骤,直到找到已排序的元素小原创 2022-07-14 16:14:34 · 285 阅读 · 0 评论 -
异步编程async/await
使用 关键字可以让函数具有异步特征,但总体上其代码仍然是同步求值的。异步函数如果使用 关键字返回了值(如果没有 则会返回 ),这个值会被 包装成一个对象。注:异步函数始终返回对象!!await 函数返回一个 对象,可以使用 方法添加回调函数。当函数执行的时候,一旦遇到 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。关键字会暂停执行异步函数之后的代码,使其让出 运行时的执行线程,先执行异步。单独使用的时候,放在函数前面表示这个函数是一个异步函数,如果 函数有返回结果,必须要用方法来承接(也原创 2022-06-17 16:40:44 · 1980 阅读 · 0 评论 -
JavaScript操作符(|、||、&、&&)
位操作符( | 和 & )var number = 2;var logic = number < 5 | number > 0; console.log(number < 5); // 结果返回 trueconsole.log(logic); // 结果返回 1结果并没有返回 布尔值,而是数值。var logic = true | true;console.log(logic); //结果返回 1可以看到结果还是返回一个数值,也就是说JavaScr原创 2022-05-05 09:29:44 · 446 阅读 · 0 评论 -
let与var 、变量提升
浅层理解:let 声明的变量的作用域是块级的;let 不能重复声明已存在的变量;let 有暂时死区,不会被提升。但是下面的例子:var liList = document.querySelectorAll('li') // 共5个lifor( var i=0; i<liList.length; i++){ liList[i].onclick = function(){ console.log(i) }}//依次打印5个5,for循环的小括号是一个作用域,而花括号又原创 2022-04-19 11:16:03 · 398 阅读 · 0 评论 -
JavaScript闭包
回顾:作用域和词法作用域:作用域就是查找变量(去哪儿找,怎么找)的一套规则。词法作用域在你写代码的时候就确定了。通过变量定义的位置就能知道变量的作用域。变量作用域分为:全局变量和局部变量。JavaScript可以在函数内部直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 999而在函数外部自然无法读取函数内的局部变量。 function f1(){ var n=999; } alert(原创 2022-04-18 16:33:21 · 439 阅读 · 0 评论 -
Property与attribute区别
在JavaScript中使用点运算符操作的DOM对象属性为property,在HTML标签上设置的属性叫做attribute;<div id="test" class="button" custom-attr="1"></div>以上id和class、custom-attr都叫做<div>标签的attribute;document.getElementById('test').foo = 1; // set property: foo to a number:.原创 2022-04-05 16:37:44 · 1568 阅读 · 0 评论 -
JavaScript赋值、浅拷贝和深拷贝
三者都是针对于引用类型!!引用类型包括:对象Object、数组Array,数据类型有:String、Number等。赋值当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的同一个存储空间的内容,因此,两个对象是联动的,一起改变的。浅拷贝重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,但拷贝前后对象的引用类型因共享同一块内存,会相互影响。深拷贝从堆内存中开辟一个新的内存地址存放新对原创 2022-04-02 16:59:45 · 315 阅读 · 0 评论 -
ES6语法简单总结
文章目录let和const解构赋值Map和SetReflect和Proxy字符串子串识别字符串重复字符串补全模板字符串标签模板数值Number数值表示最大/最小安全整数方法对象Object扩展运算符方法数组Array数组创建方法let和const解构赋值Map和SetReflect和Proxy字符串子串识别indexOf方法返回某个指定字符串值在字符串中首次出现的位置,如果没有找到则返回-1。语法:string.indexOf(查找值,start)start为可选参数,表示检索的原创 2022-04-01 22:27:34 · 778 阅读 · 0 评论 -
JavaScript DOM浅析
文章目录DOM简介查找HTML元素DOM HTML1、修改输出流2、修改HTML内容3、修改HTML属性DOM CSS1、修改HTML样式2、触发事件DOM事件1、事件属性2、onload和onunload事件3、onchange事件4、onmouseover 和 onmouseout 事件DOM事件监听1、addEventListener() 方法2、一个元素中添加多个句柄3、向window对象添加句柄4、事件冒泡和捕获5、removeEventListener() 方法DOM元素CollectionDO原创 2022-03-28 21:14:24 · 992 阅读 · 0 评论 -
JavaScript类
文章目录@[TOC](文章目录)一、类(class)1.创建类2.创建类对象3.类表达式4.类的方法二、类继承1.用法2.类提升三、静态方法一、类(class)1.创建类类是用于创建对象的模板。使用 class 关键字来创建一个类,类体在一对大括号{} 中,我们可以在大括号 {}中定义类成员的位置,如方法或构造函数。每个类中包含了一个特殊的方法 constructor(),它是类的构造函数(方法),这种方法用于创建和初始化一个由 class 创建的对象。然后可以添加任意数量的方法。class C原创 2022-03-25 22:05:06 · 1491 阅读 · 0 评论 -
JavaScript异步编程与Promise
JavaScript异步编程异步异步(async)是与同步相对的概念。传统的单线程编程中,程序的运行是同步的。同步并不意味着所有的步骤同时运行,而是指步骤在一个控制流中顺序执行。而异步相反,不保证同步,一个异步过程的执行不再与原有的序列有顺序关系。简单来说,你的代码顺序是什么样,同步就按顺序来;而异步不按顺序来,从主线程发送一个子线程完成任务效率更高。如下图所示:主线程是单一线程,不能同时接受多方面的请求,所以当一个事件没有结束时,无法同时处理其他请求。因此我们常常用子线程来完成一些可能消耗时间长原创 2022-03-23 22:24:01 · 1322 阅读 · 0 评论