- 博客(29)
- 收藏
- 关注
RSS订阅原创 前端面试题之对this的理解
this 是一个在运行时才进行绑定的引用，在不同的情况下它可能会被绑定不同的对象。默认绑定 (指向window的情况) (函数调用模式 fn() )默认情况下，this 会被绑定到全局对象上，比如在浏览器环境中就为window对象，在node.js环境下为global对象。message = "Hello";function test () { console.log(this.message);}test() // "Hello"隐式绑定 (谁调用, this指向...
2021-09-29 20:38:35
238
原创 前端面试题HTTP状态码
部分引用官方文档成功（2XX）状态码 原因短语 说明 200 OK 表示从客户端发来的请求在服务器端被正确处理 201 Created 请求已经被实现，⽽且有⼀个新的资源已经依据请求的需要⽽建⽴ 通常是在POST请求，或是某些PUT请求之后创建了内容, 进行的返回的响应 202 Accepted 请求服务器已接受，但是尚未处理，不保证完成请求 适合异步任务或者说需要处理时间比较长的请求，避免HTTP连接一直占用 204 No co
2021-09-28 22:52:40
259
原创 前端面试题get方法和post方法的区别
默认的http请求的内容, 在网络中传输, 明文的形式传递的 (https 对内容加密) GET方法 POST方法 数据传输⽅式 通过URL传输数据 (地址栏拼接参数) 通过请求体传输 数据安全 数据暴露在URL中，可通过浏览历史记录、缓存等很容易查到数据信息 数据因为在请求主体内， 所以有⼀定的安全性保证 数据类型 只允许 ASCII 字符 ⽆限制 GET⽆害 刷新、后退等浏览器操作是⽆害的 可能会引起重复提交表单 功能特
2021-09-27 23:16:01
202
原创 前端面试题重绘(repaint)和重排(回流reflow)
重排重排是指部分或整个渲染树需要重新分析，并且节点的尺⼨需要重新计算。表现为 重新⽣成布局，重新排列元素。重绘重绘是由于节点的⼏何属性发⽣改变，或由于样式发⽣改变（例如：改变元素背景⾊）。表现为某些元素的外观被改变。或者重排后, 进行重新绘制!两者的关系重绘不⼀定会出现重排，重排必定会触发重绘。每个页面至少需要一次回流+重绘。(初始化渲染)重排和重绘的代价都很⾼昂，频繁重排重绘, 会破坏⽤户体验、让界面显示变迟缓。我们需要尽可能避免频繁触发重排和重绘, 尤其是重排
2021-09-26 23:01:12
381
原创 前端面试题之变量提升
变量提升（hoisting），是负责解析执行代码的 JavaScript 引擎的工作方式产生的一个特性。JS引擎在运行一份代码的时候，会按照下面的步骤进行工作： 首先，对代码进行预解析，并获取声明的所有变量 然后，将这些变量的声明语句统一放到代码的最前面 最后，开始一行一行运行代码 console.log(a)var a = 1function b() { console.log(a)}b() // 1变量的这一转换过程，就被称为变...
2021-09-25 20:43:39
280
原创 前端面试题对于HTML 语义化的理解？
语义化的好处 (利于SEO, 可阅读性更好)语义化前：在语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如： 使用 span、div、p、a 等做文字, 做按钮 使用 div 做一切 从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好： 对人不友好：阅读代码的人不能一眼看出代码的功能 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理 语义化后： HTML5 规范提倡语义化标签，即使⽤恰当语义的.
2021-09-24 21:28:57
148
原创 前端面试题对于媒体查询的理解
响应式适配 根据不同的屏幕尺寸, 显示不同的效果 (设置盒子的样式)媒体查询是自 CSS3 开始加入的一个功能。它可以进行响应式适配展示。媒体查询由两部分组成： 一个可选的媒体类型（如 screen、print 等） 零个或多个媒体功能限定表达式（如 max-width: 500px、orientation: landscape 等） 这两部分最终都会被解析为 true 或 false 值，然后整个媒体查询值为 true，则和该媒体查询关联的样式就生效，否则就不生效。代码部分
2021-09-23 21:01:15
696
原创 前端面试题Vue 项目如何进行 SEO 优化
本文部分内容参考官方文档Vue SPA单页面应用对SEO不太友好，当然也有相应的解决方案，下面列出几种SEO方案 SSR服务器渲染 服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构 关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。 优势: 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 缺点: 服务器nodejs环境的要求, 且对原代码的改造成本高! nuxt
2021-09-22 20:45:52
458
原创 如何理解Vue的响应式系统
部分内容参考官方文档MVVMM: model数据模型, V:view视图模型, VM: viewModel视图数据模型双向: 视图变化了, 数据自动更新 => 监听原生的事件即可, 输入框变了, 监听输入框input事件 数据变化了, 视图要自动更新 => vue2 和 vue3 基本原理vue2.0 数据劫持: Object.defineProperty (es5)vue3.0 数据劫持: Proxy (es6)分析 :Vue的 MVVM 原理...
2021-09-21 19:41:37
161
原创 前端面试题Vue双向绑定原理
基本认知在 Vue 2.x 中，利⽤的是 Object.defineProperty 去劫持对象的访问器（Getter、Setter），当对象属性值发⽣变化时可获取变化，然后根据变化来作后续响应；(一个一个的劫持)在 Vue 3.0 中，则是通过 Proxy 代理对象进⾏类似的操作。劫持的是整个对象, 只要对象中的属性变化了, 都能劫持到Object.defineProperty和Proxy的优缺点？Proxy 可以直接监听整个对象，⽽⾮是对象的某个属性 可以直接监听数组
2021-09-20 19:00:07
358
原创 前端面试题（ TCP 三次握手和四次挥手的理解）
TCP是一个端到端的 可靠 面相连接的协议，HTTP基于传输层TCP协议不用担心数据传输的各种问题（当发生错误时，可以重传）根据这个IP，找到对应的服务器，发起TCP的三次握手 (tcp 三次握手四次挥手 )关闭TCP连接四次挥手的理解 (客气挽留)关闭连接(四次挥手)不能直接一次性断开连接(双方知晓), 万一还有什么数据没有传完, 造成数据的丢失!完整的一次 http 请求流程才算结束 致读者：由于服务器正在搭建中， ajax暂时停止更新， 等服务器搭建完...
2021-09-19 20:06:33
449
原创 jQuery入门第十三章（ES6新增数组方法）（完结）
.find( ) 查找数据 .findIndex( ) 查找数据的下标 查找数据const 返回的数据 = 数组.find(item => 条件); // 回调函数查找数据的下标const 返回的数据下标 = 数组.findIndex(item => 条件);致读者jQuery的复习到这里就结束啦，后续也会继续给大家分享更多的知识 记得养成天天学习的好习惯哦上一章：jQuery入门第十二章（页面传参）https://bl......
2021-09-17 21:11:11
142
原创 jQuery入门第十二章（页面传参）
地址栏 url 也可以存储数据。页面路径?名称=值detail.html?xxx=ooodetail.html 页面路径? 分隔符号xxx=ooo 数据的键值对获取地址栏字符串location.href修改地址栏 - 页面可以跳转// 网站路径location.href = 'ts.qitaijk.cn';// 本地相对路径location.href = 'detail.html';上一章：jQue......
2021-09-16 20:51:30
557
原创 jQuery入门第十一章（前端利用音频弹奏欢乐颂）
效果图基本样式 <style> * { margin: 0; padding: 0; list-style: none; } nav { width: 700px; height: 50px; background-color: #333; margin: .
2021-09-15 20:59:58
192
原创 jQuery入门第十章（视频音频）
视频标签<video src="视频路径" />音频标签<audio src="音频路径" />视频音频标签属性controls 添加控制条WebAPI 操作视频播放暂停JQ 没有对 视频，音频这类 DOM 对象的方法进行封装，所以使用 JQ 查找到的视频音频对象需要转回 DOM，才能进行操作。Web API DOM对象.play() 播放 DOM对象.pause() 暂停 DO..
2021-09-14 21:07:38
387
原创 jQuery入门第九章（CSS 定位）
常见的定位属性取值position: absolute; // 绝对定位position: fixed; // 固定定位position: relative; // 相对定位position: static; // 不定位小结 absolute，fixed，relative 都是定位，left , right, top , bottom, z-index 可以控制定位盒子位置和层级。 position: static; 设置盒子不定位，相当于变......
2021-09-13 21:15:18
319
原创 jQuery入门第八章（链式编程原理）
链式编程 JQ 的方法调用完毕后，大部分情况都是返回一个 JQ 对象。 由于返回值还是 JQ对象，所以还可以继续通过 点语法调用 JQ 对象的方法。 如果调用方法后，返回值不是 JQ 对象，就无法链式调用 JQ 的方法了。 $(this).addClass(); // 返回值是 JQ 对象，所以可以链式编程 $(window).scrollTop(); // 返回值是 数字，所以不能调用 JQ 的方法了 注意：一般获取值这种用法，返回值由.....
2021-09-12 20:50:13
583
原创 jQuery入门第七章（事件）
事件解绑解绑事件$(选择器).off('事件类型');如果要针对性解绑某个事件处理函数，需要把事件处理函数起个名字，再名字解绑。$(选择器).off('事件类型', 事件处理函数名称);事件对象基本概念每个事件在触发的时候，都有事件对象，记录了事件触发时候的一些信息。如何获取事件对象在事件处理函数写个形参名称，常用的名字 event , ev , e 。 鼠标事件对象中，可以获取鼠标坐标值 ， clientX， clientX ，pageX, pageY..
2021-09-11 21:20:12
578
原创 jQuery入门第六章（滚动事件相关）
滚动事件$(选择器).scroll(function(){ });如果是要获取浏览器的滚动距离，选择器就写 window 对象即可。 获取滚动距离// 垂直顶部方向滚动出去了多少$(选择器).scrollTop();// 水平左边方向滚动出去了多少$(选择器).scrollLeft();返回顶部代码$('html,body').stop().animate({ scrollTop: 0 });上一章：jQuery入门第五章（JQ事件类型补充 ）.....
2021-09-10 20:45:00
506
原创 jQuery入门第五章（JQ事件类型补充 ）
鼠标移入移出事件 mouseenter( ) 鼠标移入 mouseleave( ) 鼠标移出 对比 mouseover 和 mouseout 而言，mouseenter，mouseleave 在盒子内部移动的时候不会反复触发移入移出事件。总结：推荐使用 mouseenter，mouseleave。hover 事件hover( ) - 是 JQ 参考 CSS 的 hover 封装的一个方法，WebAPI 没有 hover 事件ready 事件ready 事件也是 JQ
2021-09-09 21:23:12
130
原创 jQuery入门第四章（JQ 事件绑定 ）
写法1把事件处理函数封装成方法调用$('选择器').click(function(){ });写法2 用 on( ) 方法绑定事件$('选择器').on('click', function(){ });事件委托 - 只能用 on 方式绑定事件委托常用于列表的事件绑定，减少事件绑定次数，提高程序效率。 需要利用了事件冒泡的特征实现的。 把 on 方法事件绑定委托给 某个祖先级元素(列表的分区)。 在 on 方法的第二个参数传入目标元素的选择器(....
2021-09-08 21:12:29
128
原创 jQuery入门第三章（JQ 节点操作）
节点概念标签是节点，注释是节点，文本是节点，属性也都是节点。一般我们操作节点时候，主要是操作标签这类节点，标签节点我们一般称之为元素。查找节点$('选择器')父子兄关系查找新建节点.html('<h1>')$('<h1>')$(`<h1> </h1>`) // 推荐写法移动节点$('选择器').append( 节点 ) 后追加节点$('选择器').prepend( 节点 ......
2021-09-07 21:15:31
272
1
原创 jQuery入门第二章（显示隐藏动画）
基本概念隐藏其实就是 display:none;显示可以有很多种：display:block flex inline-block，block 最常见。基础显示隐藏以上方法传入时间后才有动画动画效果，不传入时间没有动画效果。淡入淡出显示隐藏就是透明度的变化。没有传入时间也有动画效果，默认值是 400 毫秒滑动显示隐藏高度的变化自定义动画核心方法.animate( 样式对象, 时间, 回调函数 )被称为动态的 .css( )参考代码...
2021-09-06 21:17:20
900
2
原创 jQuery入门第一章（jQuery初体验）
JQ 基本概念jQuery 其实就是别的团队封装好的一个 JS 文件。常见错误没有引入 jQuery 文件，引入失败，请检查 jquery.js 文件的路径。 JQ 对象 和 DOM 对象互相转换不同类型的对象拥有不同的属性和方法 JQ 对象调用 JQ 对象的方法和属性。 DOM 对象调用 DOM 对象的方法和属性。 JQ 对象和 DOM 对象可以互相转换。 JQ 对象和 DOM 对象关系图 JQ 对象可以提取出 DOM 对象 DOM 对象也
2021-09-05 19:50:29
507
1
原创 JavaScript 进阶第十一章（正则表达式）（完结）
了解正则表达式的作用 掌握正则表达式的使用 创建正则表达式 正则表达式组成 边界符 字符类 正则测试 正则表达式概述1.什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹..
2021-09-04 20:27:51
369
原创 JavaScript 进阶第十章（递归）
概念一种函数,自己调用自己,就是递归语法特点 嵌套的层级是未知 或者 是很多层的 递归中比出现 if 结构 需求根据数据,生成类似页面结构 数据[ { "name": "广东", "children": [ { "name": "广州", "children": [ { "name": "白云" }, {...
2021-09-03 21:16:50
156
原创 打工人必备摸鱼神器Hurry home（下班回家）保姆式使用教程
效果图下载地址githubhttps://github.com/sbjim/go-home克隆下来之后是这样打开谷歌浏览器找到更多工具里面的扩展程序点击加载已解压的扩展程序将克隆的文件 go-home上传上去然后可以点击扩展程序可以设置自己想要设置的快捷键就完成啦最后如果还是不可以可以看一下自己是否开启了开发者模式哦...
2021-09-03 17:30:22
5785
原创 JavaScript 进阶第九章（原型链继承）
面向对象的特性 封装 和 继承 子类strudent 继承了父类 Person的属性 // 父类 function Person(name, height) { this.name = name; this.height = height; } Person.prototype.say = function () { console.log(this.name); console.log(this.height);
2021-09-02 21:39:16
429
2
原创 JavaScript 进阶第八章（闭包）
概念在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），只要出现引用了外部变量的函数,那么这个现象就叫做闭包作用 让数据变得更加的安全 优化代码 函数内返回了另外一个函数 代码演示不使用闭包<body> <button>自增</button> <h1></h1> <script> .
2021-09-01 21:29:24
434
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人