- 博客(27)
- 收藏
- 关注
RSS订阅原创 JS事件模型
DOM事件事件：是浏览器赋予dom元素的默认行为，不管是否绑定天生就有操作DOM0级事件绑定 dom.onxxx = function(){…}给当前元素的私有属性赋值,只能赋值（绑定）一次（后面会覆盖前面）；不能绑定不属于自身的事件（eg:onContentLoaded）取消事件响应 dom.οnclick=null;DOM二级事件绑定 addEventListener(‘xxx’,function(){})事件池机制 （可以绑定多个）；可以处理所有标准事件，例如DOMConten
2021-04-10 15:17:02
194
原创 前端window,sreen,document,可视区，dom,鼠标位置等尺寸汇总
区分屏幕screen，视口viewport，浏览器window,文档document，body屏幕screen：显示器的特性不会变化，screen.width; screen.height; 即分辨率的大小浏览器窗口window: 内在尺寸 window.innerHeight; window.innerWidth;包含滚动条视口viewport： 浏览器窗口的可视区域，可以通过document.documentElement.clientWidth与document.documentElement
2021-04-08 09:30:39
508
原创 JS拾遗篇之parseInt
parseInt 基础语法parseInt(string[, radix]); //将 radix进制的string转换为10进制数返回。string：要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 toString )。字符串开头的空白符将会被忽略。radix（可选）：从 2 到 36，表示字符串解析时的基数。例如指定 16 表示被解析值是十六进制数。请注意，10不是默认值！返回值为NaN的情况：radix<2radix>36第一个非空格字符不能转换为数
2021-04-07 15:12:47
911
原创 网络安全之XSS & CSRF
一、XSS攻击原理向网站注入恶意脚本攻击类型反射型：在客户端向服务器发送请求时注入恶意代码存储型：向服务端提交恶意代码，并将其存储到数据库中文档型：在数据传递过程中截取网络数据包，修改DOM结构防范措施对用户的输入输出进行 过滤/编码在请求头中添加httpOnly，防止通过js获取Cookie二、CSRF攻击原理利用网站对用户的信任，黑客通过网站B 诱导用户去访问已经登录的网站A，进行一些违背用户意愿的请求。注意：在这个攻击过程中，攻击者借助受害
2021-03-20 16:22:13
189
1
原创 CSS预处理器
CSS预处理器为CSS增加了编程的特性，如使用变量，简单的逻辑程序，函数等，再编译成css文件，供项目使用。好处：简洁，适应性强，可读性强，易于代码维护。Sass:两套语法规则：1. 用缩进作为分割符来区分代码块，可以省略{ } 和 ； 2. 用 { } 作为分隔符 （又称Scss）Less：同时支持缩进和CSS常规样式书写规则。Stylus：主要用来给Node项目进行CSS预处理支持。Stylus同时支持缩进和CSS常规样式书写规则。特性变量sass声明变量 $变量名：变.
2020-11-01 15:58:10
922
原创 CSS拾遗篇之定位体系和包含块 & html，body 的探究
绝对定位元素相对于最近的有定位的（position值为非static）父级，如果不存在满足条件的父元素，则相对于哪个元素定位 ？若无非static祖先，是相对于初始包含块来定位的，而初始包含块并不是以html 或body 进行定位。案例：div绝对定位 bottom:0 ，body,html无定位的效果图如下： document指的是整个文档，是 html 的包含块 document.documentElement指的是 HTML 可以看出div是相对于初始包含块的，而不是 <h.
2020-10-31 13:37:46
401
原创 从浏览器地址栏输入框内输入url 到页面渲染的过程
当在浏览器地址栏输入框内输入url 时发生了什么？浏览器对网址进行URI 解析浏览器通过DNS域名服务器解析到服务IP（ping www.baidu.com）客户端(浏览器)通过TCP协议建立到服务器的TCP连接 (三次握手)客户端（浏览器）向web服务器端（HTTP服务器）发送HTTP协议包，请求服务器里的资源文档 （telnet 模拟）服务器向客户端发送HTTP协议应答包客户端和服务器断开（四次挥手）浏览器解析渲染URI解析地址解析和编码HSTS缓存检查域名解析过.
2020-10-11 13:52:33
325
原创 带你进入正则的世界 /(^_^)/
RegExp 知识大纲：一、正则的组成1.1 结构字符字面量：包括转义字符和非转义字符字符组：匹配一个字符，多选一 eg： [0-9] 简写：\d反义字符组：[^0-9] 匹配非数字字符 简写：\D量词：字符连续出现的次数。 {m,n}{1,} 可以简写为 + （至少一次）{0,1} 可以简写为 ?{0,} 可以简写为 *锚：表示位置 。 ^ 表示开头 $ 表示结尾 \b 单词边界 先行断言分组：捕获分组（）、 非捕获分组（?:）分支：abc | bcd 、 .
2020-09-30 23:12:28
1308
原创 JavaScript 模块化规范
一、ES5 编写模块模块的核心就是创建独立的作用域,可以通过函数创建作用域二、CommonJSCommonJS 规定每个文件就是一个模块，有独立的作用域。每个模块内部，都有一个 module 对象，代表当前模块。通过它来导出 API，它有以下属性： id 模块的识别符，通常是带有绝对路径的模块文件名； filename 模块的文件名，带有绝对路径； loaded 返回一个布尔值，表示模块是否已经完成加载； parent 返回一个对象，表示调用该模块的模块； child
2020-09-20 16:13:24
172
原创 ES6知识总结 — 下篇（思维导图版）
一、Symbol二、Proxy三、RegExpRegExp y修饰符y 表示粘连sticky 每个位置都不能遗漏 每次匹配必须是与上一次连续u修饰符处理多个字节的中文字符unicode u修饰符 unicode编码 大于 \uffff 才能正确识别ES5中 . 不能匹配四个字节的中文字符，需要加 u修饰符使用unicode码点值匹配 /\u{unicode码点值}/u四、template 模板字符串字符串换行 `` 换行的时候相当于写了一个\n字符串包含变量或表
2020-09-19 22:34:34
432
原创 快速上手echarts
echarts基本使用引入echarts.min.js获取dom元素初始化echarts实例：echarts.init(dom);配置图表样式 var option = {…};dom.setOption(option);图表的配置项和数据var option = { backgroundColor: '#2c343c' //设置全局背景 textStyle: { color: 'rgba(255, 255, 255, 0.3)' }//设置全局字体样式 title: { te
2020-09-13 20:26:21
133
原创 ES6知识总结 — 上篇（思维导图版）
一、块作用域二、解构赋值规则：只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。2.1 数组的解构赋值2.2 对象的解构赋值2.3 函数参数的解构赋值2.4 字符串的解构赋值字符串被转换成一个类似字符数组的对象还可以对字符串的length属性解构赋值2.5 圆括号问题注意：扩展运算符的解构赋值，不能复制继承自原型对象的属性。三、扩展运算符四、Object4.1 对象属性的简写
2020-09-06 16:04:40
801
原创 CSS布局之float + 负margin的使用
负margin设置元素margin-left / margin-top 属性为负值时，元素会按照设置的方向移动相应的距离。设置元素margin-right / margin-bottom属性为负值时，元素本身不动，后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。圣杯布局HTML结构：<div class="wrapper clearfix"> <div class="left"></div> <div class="cente
2020-08-18 20:47:56
520
原创 CSS拾遗篇之浮动元素の影响
前置知识图片（未浮动）默认会与上方最后一行文字基线对齐图片（未浮动）默认会与下方第一行文字基线对齐补充：正是由于基线对齐，所以图片下方会出现空隙！浮动规则浮动元素对其上方元素的影响浮动元素对行内文本的影响：图片或块级元素设置float:left;之后，向左浮动，直到外边缘碰到包含它的框或者另外一个浮动元素的边框为止。浮动之后变为块级元素，vertical-align属性失效vertical-align 用来指定行内元素（inline）或表格单元格（table-cell
2020-08-17 22:11:32
288
原创 关于HTTP协议的那些事儿
HTTP请求一种无状态协议，即不建立持久连接，服务器不保留连接的信息HTTP请求过程：建立TCP连接Web浏览器向Web服务器发送请求命令Web浏览器发送请求头信息Web服务器应答Web服务器发送应答头信息Web服务器向浏览器发送数据Web服务器关闭TCP连接一个HTTP请求一般由四部分组成：请求方法：GET,POST请求地址请求头：包含一些客户端环境信息，身份验证信息等请求体：提交的字符串，表单信息等一个HTTP响应一般由三部分组成一个数字和文字组成的状态码响
2020-07-12 11:01:07
148
原创 axios 请求数据
axios请求方法get请求：获取数据 2个参数 url,configaxios.get('/index.json',{params:{id:12}}).then((res)=>{console.log(res)})axios({method:'get',url:'/index.json',params:{id:12}}).then((res)=>{console.log(res)})post请求：发送数据 3个参数 url,data,configapplication/js
2020-07-11 09:32:31
635
原创 解决跨域的九种方法
同源策略请求：同源是浏览器的概念，指 协议，域名，端口号相同。 ajax（异步无刷新） / fetch前后端分离导致跨域（非同源策略请求）前端：web服务器，请求资源文件 , 资源服务器：图片，音视频后端：数据服务器，处理业务逻辑和数据接口一、jsonp原理：基于script 标签 src属性 ，发送请求时，把本地函数作为回调函数传递给服务器，服务端接收并返回处理完成的数据，浏览器接收到响应数据，执行该函数。前端：<script> // 全局函数func functi.
2020-07-10 08:45:55
276
原创 Ajax 请求数据
Ajax ( asynchronous javascript and xml(json) ) 是一种在无需加载整个网页的情况下能够更新部分网页的技术。Ajax 就是 JavaScript 基于 XMLHttpRequest 对象与服务端进行交互，向服务端发送一个请求，并且获取和处理服务器返回的内容。XHR对象和web服务器进行数据的异步交换一、创建XHR对象(Ajax对象)var request = new XMLHttpRequest();//IE5,IE6 不支持兼容性写法：var r.
2020-07-09 15:09:50
234
原创 Vue知识点梳理（思维导图版）
Vue是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）MVC 与MVVM的区别MVC 是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于 视图层分离。MVVM把前端的视图层分为了 三部分 ：Model, View , VM ViewModel一、Vue基本代码结构const vm = new Vue({ el:'#app',//所有的挂载元素会被 Vue 生成的 DOM 替换.
2020-06-21 23:19:31
1835
原创 HTML5+CSS3知识概览
H5 知识大纲，本文重点解释右半部分知识点。一、标签表单新增的type属性：验证类：email 要求包含 @ 和 服务器名称 eg:qq.comurl 要求包含httpnumber 要求只能输入数字日期和时间time : --:–date: 年/月/日 下拉列表显示日历控件datetime-local : 年/月/日 --:-- 下拉列表显示日历控件month: ----年–月week : ----年第–周大多数浏览器不支持datetime，只有safari支持表单.
2020-06-01 23:06:24
361
原创 MySQL数据库知识概览
数据库知识大纲一、数据库基础知识D：数据DB：数据库 一批数据构成的有序集合DBMS:数据库管理系统RDBMS：关系数据库管理系统二、数据库的安装windows命令行登录 ：mysql -u用户名 -p密码 或 mysql -u用户名 -p回车，不显示密码登出：exit或quit登录其他账号 ：mysql -u用户名 -p密码 -h机器 -P端口号右键，命令行界面 分号结束 回车执行。只有退出和登录的时候不用加分号show databases; .
2020-05-31 15:36:29
336
原创 jQuery知识点概览（思维导图版）
jQuery是一个 js 程序库 ，封装了js对象和函数。一、加载在其他js文件之前引入jq文件新版本：jQuery 是在window.onload执行完才执行的语法 ： $(selector).action();二、dom元素与jQuery对象之间的转换jQuery创建dom对象的三种方式：$('<div></div>') $('<...
2020-04-18 13:59:50
625
原创 JS引用数据类型概览（思维导图版）
共勉：也许，你是三分钟热度的浅尝辄止，更多时候，你所谓的天赋在真正的天才面前不值一提。一、Arrayjs数组可以包含不同类型的数据。数组大小可以动态调整，下标溢出时数组长度自动扩展。跳过赋值的时候 ，跳过的下标，值为undefined。创建数组最好避免以下形式 与 浏览器 和版本 有关 var values=[1,2,];//第三个为空,不能确定是生成两项还是三项 co...
2020-04-12 12:51:44
287
原创 DOM文档对象模型（思维导图版）
今天我们一起用思维导图帮大家梳理一下DOM文档对象模型的知识点，来看一看吧！一、节点类型1. document 文档类型documemtElement属性 始终指向页面中的<html>元素document.documentElement==document.childNodes[1]// chrome浏览器将doctype作为第一个子节点多个选择器叠加<...
2020-04-11 14:09:27
655
原创 三分钟搞定JS继承
一、原型链继承js中无法实现接口继承，依靠原型链来实现继承子对象的原型是父对象的实例 subType.prototype = instanceSuper;或 subType.prototype=new superType();父对象的实例上添加 constructor 属性 指向 subType subType.prototype.constructor = subType;不...
2020-04-03 20:00:55
186
原创 深入探究JS基本数据类型及其转换
基本数据类型undefined 只声明未定义 变量没有初始值时，或访问一个不存在的值（对象属性或数组项），将被赋予undefinednull 表示一个空值(空对象)number 整数、浮点数boolean： true/falsestring 字符串 十六进制的字符串表示形式 ‘\x41’ //A-65 十六进制 41 长度是1 空字符串’’ ,空格 ’ ’ , 空值null ...
2020-03-20 00:12:40
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人