前端
关注
分享
扫一扫
Tarafireworks
这个作者很懒，什么都没留下…
展开
-
js对数组进行排序
JavaScript Array sort() 方法按升序对数组中的数字进行排序：var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return a-b});按降序对数组中的数字进行排序:var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return b-a});...转载 2021-10-18 22:38:42 · 247 阅读 · 0 评论 -
js中块级作用域和函数作用域的区别
js中块级作用域和函数作用域的区别什么是局部作用域（块级作用域）js块级作用域和let，const，var区别留疑：闭包，for循环，立即执行函数，let块级作用域var arr = [];for(var i = 0; i < 5; i++){ arr[i] = function(i){ console.log(i); }(i);};arr[2];console.log("-------");// 闭包var arr = [];for(var i =转载 2021-10-17 17:17:10 · 544 阅读 · 0 评论 -
reflow(回流)和repaint(重绘)
重排(reflow)和重绘(repaint)简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint（原文链接）reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。refl原创 2021-09-22 12:07:09 · 269 阅读 · 0 评论 -
判断一个字符串中出现次数最多的字符，统计这个次数
var str = "stiabsstringapbs"; var obj = {}; for (var i = 0; i < str.length; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } }原创 2021-09-22 11:00:17 · 186 阅读 · 0 评论 -
运算符优先级
运算符优先级console.log('Value is ' + (val != '0') ? 'define' : 'undefine');答案define 加号优先级高于 三目运算。低于括号。 所以括号中无论真假 加上前边的字符串都为 TRUE 三目运算为TRUE是 输出 define如果val只是声明了，而没有定义任何值的话，选define。因为+运算符优先级大于?:运算符，所以代码执行顺序是(‘Value is ’ + (val != ‘0’)) ? ‘define’ : ‘undefine’原创 2021-09-22 09:56:44 · 293 阅读 · 0 评论 -
vue-router
this.route路由的参数对象this.route 路由的参数对象this.route路由的参数对象this.router路由的导航对象传参：props:true哈希地址 / 路径参数 this.route.params哈希地址？查询参数this.route.params哈希地址 ？查询参数 this.route.params哈希地址？查询参数this.route.queryfullPath 完整路径path 路径部分声明式导航编程式导航 :调用APIlocation.herf原创 2021-09-22 09:38:50 · 89 阅读 · 0 评论 -
伪类与伪元素
参考这个转载 2021-09-15 01:26:00 · 63 阅读 · 0 评论 -
html更
HTML基础之label标签main 标签规定文档的主要内容； dir 定义目录列表； dd 为定义列表中项目的描述； pre 可定义预格式化的文本。 补充：定义列表 dl 标签定义了定义列表（definition list），其内又包含了 dt（定义列表中的项目）和dd（描述列表中的项目）。h5的新增特性：1、拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放2、自定义属性 d原创 2021-09-15 00:51:09 · 195 阅读 · 0 评论 -
http协议的状态码
1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码。100（继续）请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101（切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。2xx（成功）表示成功处理了请求的状态码。200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此状态码，则表示 Googlebot 已成功检索到该文件。201（已创建）请求成功并且服务器创建了转载 2021-09-14 17:21:03 · 502 阅读 · 0 评论 -
js中的foreach用法
看这个转载 2021-09-14 10:02:44 · 262 阅读 · 0 评论 -
2021-09-13
调用canvas对象的哪个方法来获取绘图环境（）1.html5中没有getContent()和getCanvas方法2.调用canvas对象的getContext()方法来获取绘图环境<optgroup> 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。<select> <optgroup label="Swedish Cars"> <option value="volvo">Vol原创 2021-09-14 00:16:25 · 819 阅读 · 0 评论 -
window.open()
window.open()window.open();//在当前窗口打开一个新窗口, 只要是window对象的属性,在使用的时候就可以省略window有四个参数,第一个参数:url地址第二个参数: name 类似于a标签target属性第三个参数:features 新窗口信息(大小位置等)第四个参数:布尔类型 是否作为历史记录<script>document.getElementById('btn').onclick=function(){原创 2021-09-14 00:16:17 · 434 阅读 · 0 评论 -
JavaScript RegExp对象
JavaScript RegExp 对象有3个方法：test()、exec()、compile()test()：检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回true，否则返回false；exec()：检索字符串中与正则表达式匹配的值，返回一个数组，存放匹配的结果；如果未找到，返回null；compile():可以在脚本执行过程中编译正则表达式，也可以改变已有表达式。注：match是支持正则表达式的String对象的方法...原创 2021-09-14 00:16:10 · 91 阅读 · 0 评论 -
document.write
document.writedocument.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲染新的页面。–（重写页面问题！！页面已经加载完，用它就清空以前的document）因为 document.writ原创 2021-09-14 00:16:03 · 139 阅读 · 0 评论 -
generator（生成器）
参考调用generator对象有两个方法，一是不断地调用generator对象的next()方法：next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调转载 2021-09-14 00:15:51 · 222 阅读 · 0 评论 -
Ajax&Flash
1.Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。2.Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度3.Ajax的劣势：1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。4.Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 4.性能问题Ajax的优势可搜索性普通的文本网页会更有利原创 2021-09-13 22:43:14 · 164 阅读 · 0 评论 -
把鼠标移到按钮并点击时，会产生一串什么样的事件？
hover -> focus -> active悬停 -> 聚焦 -> 响应触发顺序为link–>visited—>hover—>active即记为love and hate然后单独记住focus在hover和active之间即可CSS伪类用于向某些选择器添加特殊的效果。:active 向被激活的元素添加样式。:focus 向拥有键盘输入焦点的元素添加样式。:hover 当鼠标悬浮在元素上方时，向元素添加样式。:link 向未被访问的链接添加样式。原创 2021-09-13 22:35:37 · 2964 阅读 · 0 评论 -
html默认有margin值、padding值的标签
h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值dl标签：有默认marginol,ul标签：有默认margintable标签没有默认的margin,padding值；th,td标签没有默认的margin值，有默认的padding值。p标签有默认margin(top,bottom)值,没有默认padding值。select标签在Chrome,Safari,Maxthon中有默认的margin：2px；在Opera,Firefox,IE6.0,7.0,8.0原创 2021-09-13 22:29:32 · 2959 阅读 · 0 评论 -
html中的样式表CSS
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <转载 2021-09-13 22:21:57 · 485 阅读 · 0 评论 -
定位positon
flxed：只基于窗口定位。 fixed固定悬浮在视口内定位positon不能继承到子元素absoulte的定义是基于非static的父元素的relative和absolute都可以基于（相对于）relative、absolute、fixed定位，而且层级也是默认叠加的，不仅仅只局限于我们所熟知的“子绝父相”。...原创 2021-09-13 22:15:14 · 141 阅读 · 0 评论 -
css可继承属性
css可继承属性：所有元素可继承：visibility和cursor。内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。终端块状元素可继承：text-indent和text-align。列表元素可继承：list-s转载 2021-09-13 21:58:51 · 107 阅读 · 0 评论 -
CSS优先级
优先级由高到低可分为：在属性后面使用!important会覆盖页面内任何位置定义的元素样式。作为style属性写在元素内的样式id选择器类选择器 = 伪类选择器=属性选择器 （后面的样式会覆盖前面的样式）标签选择器通配符选择器浏览器自定义的样式 权重的等级1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为 10003、ID 选择器，如：#content，权重值为 1004、类，伪类和属性选择器，如： content、:hov原创 2021-09-13 21:53:19 · 81 阅读 · 0 评论 -
es6模块化
npm init -ypackage.json“type”:“module”console.dir(Promise)npm install then-fs原创 2021-09-13 18:03:38 · 71 阅读 · 0 评论 -
原生js实现表格按列排序tengxun笔试总结
点击表头，按该列的元素进行排序<body> <table class="container"> <thead> <th>ID</th> <th>QQ</th> <th>score</th> </thead> <tbody> <tr><td>1</td><td&转载 2021-09-12 22:14:11 · 223 阅读 · 0 评论 -
W3C 代码标准规范
抛弃声明：以后我们将抛弃font标签，新的页面中不应该再出现如<font color=”red”></font>，已经存在的老的页面也应该在修改时尽量替代，替代方法：<span class=”red_tex”></span>。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义转载 2021-09-09 10:22:13 · 220 阅读 · 0 评论 -
＜img＞ 标签
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />img 元素向网页中嵌入一幅图像。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性：src 属性 和 alt 属性。必需的属性属性值描述alttext规定图像的替代文本。srcURL规定显示图像的 URL。转载 2021-09-09 09:56:44 · 175 阅读 · 0 评论 -
vue组件通信
vue中8种通信方案1.通过 props 传递2.通过 $emit 触发自定义事件3.使用 ref4.EventBus5.$parent 或$root6.attrs 与 listeners7.Provide 与 Inject8.Vuexprops传递数据适用场景：父组件传递数据给子组件子组件设置props属性，定义接收父组件传递过来的参数父组件在使用子组件标签中通过字面量来传递值$emit 触发自定义事件适用场景：子组件传递数据给父组件子组件通过$emit触发自转载 2021-09-08 22:44:33 · 114 阅读 · 0 评论 -
刷题总结9.6
在一个表单中，如果想要给输入框添加一个输入验证，可以用下面的哪个事件实现？change可以用作输入验证的事件，change(fn)只是一种实现方式，还有其他实现方式：原生js的onchange属性，html属性onchange，addEventListener(onchange,fn)都是实现方式，jquery中除了$(selector).change(fn)外还有bind(change,fn)Settimeout&&for循环for(let i=0;i<2;i++){原创 2021-09-08 18:49:07 · 385 阅读 · 0 评论 -
JS实现继承
原型链继承原型链继承的原理很简单，直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承 // 父类 function Parent() { this.name = 'Demi' } // 父类的原型方法 Parent.prototype.getName = function () { return this.name } // 子类原创 2021-09-08 14:29:35 · 89 阅读 · 0 评论 -
vue数据绑定
参考转载 2021-09-08 14:09:43 · 68 阅读 · 0 评论 -
用 css 画一个三角形，圆，椭圆
原创 2021-09-08 11:59:09 · 216 阅读 · 0 评论 -
box-sizing
参考1参考2转载 2021-09-08 11:40:46 · 57 阅读 · 0 评论 -
event loop
参考这个转载 2021-09-07 15:52:50 · 85 阅读 · 0 评论 -
JavaScript本地存储的几种方式？区别和应用场景？cookie，localstorage，sessionStorage
1.相同点是都是保存在浏览器端、且同源的2.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下3.存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和l转载 2021-09-07 15:40:28 · 491 阅读 · 0 评论 -
web安全
直接看转载 2021-09-07 15:00:02 · 84 阅读 · 0 评论 -
页面渲染过程，回流重绘
参考1参考2参考3原创 2021-09-07 11:55:12 · 115 阅读 · 0 评论 -
BFC（块级格式化上下文）
<style type="text/css"> .a, .b, .c { box-sizing: border-box; border: 1px solid; } .wrap { width: 250px; } .a { width: 100px; height: 100px; float: left; } .b { width: 100px; height: 50px; float: left;原创 2021-09-07 00:35:08 · 320 阅读 · 0 评论 -
align与text-align
align ：规定 div 元素中的内容的水平对齐方式。text-align：规定“元素中”的文本的水平对齐方式。两个属性使用的地方不一样，但是作用一样！align直接写在是div的属性<div align="center"> This is some text! </div> text-align则是Css的属性<div style="text-align:center"> ...原创 2021-09-07 00:34:39 · 333 阅读 · 0 评论 -
浮动元素重叠
浮动元素重叠1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上3、若不浮动的是块级元素，那么浮动的元素将显示在其上方4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象浮动元素会尽可能地向顶端对齐、向左或向右对齐如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素原创 2021-09-07 00:12:32 · 2154 阅读 · 0 评论 -
行内元素与块状元素
一、display:blockdisplay:block就是将元素显示为块级元素，一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。二、display:inlinedisplay:inline就是将元素显示为内联元素，内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”三、display:inline-原创 2021-09-07 00:08:14 · 137 阅读 · 0 评论