2020年7月10日
DOM Range Api
摘要： Range Api 1 （必要的 api） var range = new Range(); range.setStart(element, 9); range.setEnd(element, 4); var range = document.getSelection().getRangeAt(0) 阅读全文
posted @ 2020-07-10 11:33 jaiodfjiaodf 阅读(331) 评论(0) 推荐(0) 编辑
DOM 操作 2
摘要： 题目 从一道面试题说起，给定下面的 html，如何把该 html 中 DOM 的 Children 逆序。 <div id="a"> <span>1</span> <p>2</p> <a>3</a> <div>4</div> </div> 解答一 该方法比较原始笨重，但是可以实现功能。思路大概就是获 阅读全文
posted @ 2020-07-10 09:43 jaiodfjiaodf 阅读(126) 评论(0) 推荐(0) 编辑
2020年7月9日
DOM Event
摘要： 具体有很多的细节，网址在https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener react 的合成时间之前我也写过，翻翻博客就能看到。 Syntax // 仔细看，这个东西有三个参数 target.a 阅读全文
posted @ 2020-07-09 16:44 jaiodfjiaodf 阅读(142) 评论(0) 推荐(0) 编辑
JavaScript Closure 的第一次使用
摘要： 今天在帮沈老司机调一个代码。 一开始的代码是通过写一个定时器然后通过 document.getElementById('')来获取 div 的高度，然后设置了一个计时器来动态更新高度的。 开始大概是这个样子的 setInterval(() => { let x = document.getEleme 阅读全文
posted @ 2020-07-09 16:05 jaiodfjiaodf 阅读(144) 评论(0) 推荐(0) 编辑
DOM 操作
摘要： 要知道一点，所有的 DOM 元素，都只能有一个父元素，它不能被两次插入到DOM 树中 如果我们把一个 DOM 节点插入到 document 的 a 位置，然后又把 DOM 节点插入到 document 的 b 位置，那么，它会默认把 a 位置的 DOM 节点 remove，再插入到 b 位置。 我们 阅读全文
posted @ 2020-07-09 15:22 jaiodfjiaodf 阅读(151) 评论(0) 推荐(0) 编辑
DOM 总览 （Browser Api）
摘要： ![](https://img2020.cnblogs.com/blog/1735070/202007/1735070-20200709125102145-801700493.png) 阅读全文
posted @ 2020-07-09 12:51 jaiodfjiaodf 阅读(158) 评论(0) 推荐(0) 编辑
DOM Node 概览
摘要： ![](https://img2020.cnblogs.com/blog/1735070/202007/1735070-20200709120435958-1367460797.png) 阅读全文
posted @ 2020-07-09 12:05 jaiodfjiaodf 阅读(92) 评论(0) 推荐(0) 编辑
React useEffect
摘要： 今早来又莫名其妙的遇到了 bug，排查了一下是 useEffect 导致的。今天就再来详细的学习一下 react useEffect。 为什么要？ 我们知道，react 的函数组件里面没有生命周期的，也没有 state，没有 state 可以用 useState 来替代，那么生命周期呢？ useEf 阅读全文
posted @ 2020-07-09 10:36 jaiodfjiaodf 阅读(2576) 评论(0) 推荐(0) 编辑
2020年7月8日
HTML 语义化
摘要： 今天跟了一下 winter 老师的课程，学了下语义化。 在我们的日常工作开发中，用的最多的就是 div 还有 span，可能其他用的稍微多一点的也就还有 p 标签，ul标签， li 标签。其实在日常工作开发中，用vue、react 框架的时候，基本上 div 标签 和 span 标签就能够满足我们的 阅读全文
posted @ 2020-07-08 21:24 jaiodfjiaodf 阅读(126) 评论(0) 推荐(0) 编辑
HTML 元信息类标签
摘要： 1. 是什么？ 所谓元信息，是指描述自身的信息。元信息类标签，就是 HTML 用于描述文档自身的一类标签。通常出现在 head 标签中，一般来说都不会被页面显示出来。（与此相对应的是，其他的标签，比如语义类标签，描述的是业务）。 元信息多数情况下是给浏览器、搜索引擎来阅读的，而不是给我们人类阅读的（ 阅读全文
posted @ 2020-07-08 13:10 jaiodfjiaodf 阅读(782) 评论(0) 推荐(0) 编辑
2020年7月7日
HTML entity （记忆）
摘要： HTML entity （记忆） 要记住的三个 HTML entity 用于平时来写HTML、JavaScript 都会用得到 1. quot 双引号 &quot; 2. amp 连接符号 &amp; 3. lt 小于 &lt; 4. gt 大于 &gt; 阅读全文
posted @ 2020-07-07 16:44 jaiodfjiaodf 阅读(308) 评论(0) 推荐(0) 编辑
HTML &nbsp
摘要： HTML &nbsp 今天进入 HTML 的学习了。 今天学到的一点就是，以后不能再用 &nbsp 来替换空格了。 以前在刚开始学的时候，不知道是从哪里弄来的骚操作，反正网上是这么流传的。 空格 &nbsp，然而实际上，&nbsp，顾名思义，叫做 none break space，这是不会 brea 阅读全文
posted @ 2020-07-07 16:18 jaiodfjiaodf 阅读(356) 评论(0) 推荐(0) 编辑
CSS position
摘要： 1. position property static relative fixed absolute sticky 2. static static 是 position 属性的默认值。如果省略 position，默认就是 static。 static 的元素处于网页正常流里面正常的位置。 这个时 阅读全文
posted @ 2020-07-07 15:49 jaiodfjiaodf 阅读(177) 评论(0) 推荐(0) 编辑
CSS property
摘要： // 获取 body 的所有 style属性 getComputedStyle(document.body) CSS 动效 动画 animation animationDelay animationDirection animationDuration animationFillMode anima 阅读全文
posted @ 2020-07-07 10:15 jaiodfjiaodf 阅读(500) 评论(0) 推荐(0) 编辑
2020年7月6日
CSS animation
摘要： Animation @keyframes 定义 关键帧 @keyframes mykf { 0% {top: 0; transition: top ease} 50% {top: 30px; transition: top ease-in} 75% {top: 10px; transition: t 阅读全文
posted @ 2020-07-06 20:33 jaiodfjiaodf 阅读(164) 评论(0) 推荐(0) 编辑
React 嵌套渲染对象，内部对象会是 undefined 报错的解决办法。
摘要： 出错的原因 render()一加载就会渲染，渲染的数据是初始state里的值 ，当setState会再次渲染 之前用 dva，由于 promise 能够对异步 request 请求非常方便的调用并对流程进行控制。 然而用原生 redux 的时候，经常会出现 undefined 错误。 之前的写法是使 阅读全文
posted @ 2020-07-06 16:18 jaiodfjiaodf 阅读(1405) 评论(0) 推荐(0) 编辑
flex 属性
摘要： 遍历了一下 flex 的各个属性,还没完全记住啊，省得下次用的时候这里查那里查了。 flex 的实现也在前面的 toy-browser 里面了。 flex-direction: row | row-reverse | column | column-reverse flex-wrap: nowrap 阅读全文
posted @ 2020-07-06 13:01 jaiodfjiaodf 阅读(138) 评论(0) 推荐(0) 编辑
2020年7月3日
margin 折叠
摘要： 只会发生在 bfc 里，不会发生在 ifc里。 这就意味着，边距折叠只会发生在竖直方向（不严谨，但是可以这么理解）。 我们来观察这段代码： <body style="background-color: lightgreen;"> <div style="width:100px;height:100p 阅读全文
posted @ 2020-07-03 16:19 jaiodfjiaodf 阅读(163) 评论(0) 推荐(0) 编辑
CSS经典布局——双飞翼布局
摘要： 当然，圣杯在正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。我们一般都给个 container 的min-width，然后还有一点就是圣杯要清除浮动。 好的，我们来看看双飞翼 阅读全文
posted @ 2020-07-03 09:28 jaiodfjiaodf 阅读(580) 评论(0) 推荐(0) 编辑
2020年7月2日
CSS经典布局——圣杯布局
摘要： 花了点力气，找到了圣杯布局的来源： https://alistapart.com/article/holygrail/ 1.代码 废话不多说，先上全部的代码 <div id="header"></div> <div id="container"> <div id="center" class="co 阅读全文
posted @ 2020-07-02 16:26 jaiodfjiaodf 阅读(289) 评论(0) 推荐(0) 编辑