- 博客(17)
- 收藏
- 关注
RSS订阅原创 js 渲染和加载
JSON是一种传输数据的格式,本质上就是对象，对象就是本地用的，json是用来传输的 JSON.parse() 将string转为json JSON.stringify() 将json转为stringDOM渲染domTree + cssTree = renderTree 浏览器依据renderTree进行绘制页面dom节点的增删/dom节点的宽高变化 ...
2019-09-26 09:57:39
489
原创 js 事件2
鼠标事件onmousedown 鼠标按下，可检测左右键的操作 onmouseup 鼠标抬起，可检测左右键的操作onclick 点击，由按下抬起这两个操作组成，只能检测左键的操作oncontextmenu 右键菜单onmousemove 鼠标移动 移动端 touchmoveonmouseenter 鼠标移入，老版本onmouseover 移动端 t...
2019-09-25 15:14:35
96
原创 css 基础捡漏（四） float 包裹浮动子元素
浮动元素产生了浮动流 块元素看不到浮动流的元素，即块元素会和浮动元素重叠（这也是父元素包裹不了浮动子元素的原因）BFC元素、inline属性元素，及文本能看到浮动元素，可以正常排列 父元素包括浮动子元素 利用伪元素什么是伪元素？一个标签自产生时就带有了两个伪元素 ::before ::after 比如新建了一个span，这两个伪元素所在位置如下<spa...
2019-09-24 15:08:30
343
1
原创 css 基础捡漏（三） margin塌陷 margin合并 BFC 及相关解决办法
看下面的例子，你会发现father距上方100px,而child并没有离父元素上方100px.这就是margin塌陷而father和mather间距也不是150px,而是100px,这就是margin合并<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2019-09-23 16:16:43
278
2
原创 css 基础捡漏（二）
常见inline block inline-block 元素 inline: a span em strongblock: p div h1-h5 ul ol forminline-block: img input注意： 凡是带有inline的元素，都有文字特性，因此img并排时中间会有间隙,原因是img两个标签之间有空格，去除这些空格则间隙消失 层定位 absolu...
2019-09-23 15:37:33
150
原创 css 基础捡漏（一）
link加载方式 加载的文件为异步加载（asyn) , 浏览器会开启另一个线程去同时下载css文件，一边下载html 选择器优先级及权重 优先级由高到低 权重 ！important infinity 行间样式 1000 id选择器 100 class选择器/属性选择器/伪类选择器 10 标签选择器/伪元素选择器 1 通配...
2019-09-23 14:57:03
153
原创 html 基础捡漏
访问百度，实际上是本机下载的一个副本百度，因此可以随意修改其代码，删除元素，通过元素--右键--检查可以直接定位元素 a //在手机上这么写可以拨打电话<a href="tel:18261533231">打电话</a>//发邮件<a href="mailto:12324@qq.com">发邮件</a> 协议限定符jav...
2019-09-22 16:17:22
266
原创 js 对象{}与null的区别及[]
{}与null的区别{ }是一个不完全空对象，原型链上有Object，null是完全空对象，原型链也没有，因此执行null.length因此null instanceof Object === false。[][]原型链上还比{}多一个Array，链的最低端还是ObjectTips在转化布尔值时，对于对象而言，只有null转为false, 其他的都为true,因此，...
2019-09-21 19:37:36
3598
原创 js 事件1
绑定事件绑定到对象上，句柄式 div.onclick = function() {}; 利用方法添加，封装兼容性函数如下：<!-- 绑定事件 -->function addEvent(elem, type, handle) { if(elem.addEventListener) { elem.addEventListener(type, handle, false);...
2019-09-09 14:27:26
114
原创 js bom操作
概念bom browser object model 提供与浏览器相关操作接口封装的兼容性函数<!-- 获取浏览器视口宽高 -->function getViewportOffset() { if(window.innerWidth) { return { width: window.innerWidth, height: window.inne...
2019-09-09 11:23:57
200
原创 js dom操作及原理
概念dom document object model 文档对象模型定义了表示和修改文档的方法，也就是一些操作html和xml方法的集合（操作不了css样式表，但可以通过操作HTML属性间接更改样式） document document是指啥，我们随意打开一个html文件，在控制台打印document，发现其代表整个文本。为啥叫文档对象，因为document是一个对象，...
2019-09-08 00:08:10
727
原创 js 工具方法 数组去重 类型判断
数组去重<!-- 数组去重 -->// 方法1 利用对象属性名不重复的特性function arrayUnique(arr) { var l = arr.length; var obj = {}; var retArr = []; for(var i = 0; i < l; i++) { if(!obj[arr[i]]) { obj[arr[i]] =...
2019-09-03 15:43:03
174
原创 js 基础
字符串任何类型的变量与字符串相加，均为字符串连接 字符串比较的是ascii码值&& 和 ||var a = 0 && 2, //0 第一个数为假，则返回第一个数 b = 1 && 2, //1 第一个数为真，则返回第二个数 c = 0 || 2, //2 第一个数为假，则返回第二个数 d = 1 || 0; //1 第一个数为真，...
2019-09-02 22:34:09
108
原创 js 入门
浏览器组成shell部分：即浏览器TAB页、书签等等外表的部分； 内核部分：渲染引擎 js引起 其他模块js执行队列js单线程执行 轮转时间片：将各个任务分割成多个时间片，排队执行。比如执行task1 1ms，然后执行task1 1ms，再执行task1 1ms，因此视觉效果上可以看到一个页面两个元素在同时运动。js三大部分ECMAScript DOM BOMjs...
2019-09-02 21:29:09
106
原创 vue.js 一个超简单的例子让你搞懂nextTick的使用场景
先看一个以下的例子：<!DOCTYPE><html><head><title>vue-exe</title><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...
2019-09-02 13:59:54
583
原创 js 拷贝
概念对于基础值来说，拷贝就是值的拷贝，但对于引用值来说，可分为赋值：拷贝引用值的地址 浅拷贝：拷贝一层值 深拷贝：拷贝所有层。基本原理赋值var obj = { a: 1, b: [1,2]}var copy = obj;obj.a = 2;obj.b[0] = 2;console.log(copy); // {a: 2, b: [2,2]}直接拷贝的是...
2019-09-01 22:55:57
157
原创 js try catch 与 es5严格模式
try catch基本用法try { //一旦发生错误，中止代码段，跳转到catch内的代码段执行}catch(e) { //捕捉错误，错误信息在e对象中，e.name错误名，e.message错误信息}e的6种错误序号 e.name 对应信息 1 EvalError eval()的使用与定义不一致 2 RangeError...
2019-09-01 19:58:27
257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人