CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

给DOM元素绑定事件

给DOM元素绑定事件 1、利用 addEventListener 绑定【推荐】（DOM2）优点：『可以给同一个元素添加1个/多个事件』 button.addEventListener('click', handleClick); 现代浏览器已经很少使用以下两种 DOM0 的绑定事件的写法了 2、利用 HTML 属性 - onclick （DOM0）注意...

Posted by CodingWithAlice on July 1, 2021

前端路由的两种模式

前端路由的两种模式参考文章：hash模式和 history模式一、hash 模式 - 通过URL中的哈希值实现页面的路由切换，不需要服务端参与 // http://example.com/#/page1 -> #/page1 就是 hash值 - #后面的字符核心方法：『location.hash』特点：改变视图，但不会向后端发出请求，服务器不会接收到哈希值...

Posted by CodingWithAlice on July 1, 2021

事件流 + 事件模型

事件流 + 事件模型一、事件流事件冒泡：从下往上的传播方式 - 事件最开始由最具体的元素然后逐渐向上传播到DOM中最高层的父节点 window -> document -> html -> body -> … 事件捕获：与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件二、事件模型通过监听函数对事件作出...

Posted by CodingWithAlice on July 1, 2021

69. x 的平方根

69. x 的平方根题目：计算并返回 x 的平方根，其中 x 是非负整数。由于返回类型是整数，结果只保留整数的部分，小数部分将被舍去。解答：方法一：遍历平方根 <= x/2，取 x 的一半(取向上靠近的整数) 时间复杂度：O(n)，空间复杂度：xx var mySqrt = function(x) { let mid = Math.cei...

Posted by CodingWithAlice on June 29, 2021

跨页面通信

跨页面通信两个页面之间的通信会涉及到同源策略的限制，所以按照是否满足同源策略的限制分成两大部分来看。『同源页面通信』： 1、广播式通信 - 监听同一频道 BroadcastChannel 『核心方法：频道.postMessage(‘a’) + 频道.onmessage = (e)=>{}』 2、localStorage - 只响...

Posted by CodingWithAlice on June 29, 2021

子盒子在父盒子中水平垂直居中有几种方法？

子盒子在父盒子中水平垂直居中有几种方法？ <head> <style> .father { width: 800px; height: 650px; } .child { width: 300px; height: ...

Posted by CodingWithAlice on June 29, 2021

CSS性能优化

CSS性能优化一、写法优化简化选择器：id选择器不用嵌套；减少 * 通配符、[hidden=‘true’] 属性选择器；利用继承机制，少写新类名【CSS 选择器是从右向左进行匹配的，避免匹配的开销】尽量避免重排：重新计算元素位置和几何结构减少使用昂贵属性 - 需要浏览器进行操作或计算的属性：box-shadow、border-radius、透明度、:nth-chil...

Posted by CodingWithAlice on June 28, 2021

flex布局

flex布局 - 常见布局参考实例篇第二部分：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 1-2/6、百分比布局、左侧固定宽度右侧自适应布局都可以利用 flex 实现 .section1 { flex: 0 1 50%; } .section2 { flex: 0 1 100px; } 3/6、圣...

Posted by CodingWithAlice on June 27, 2021

css3有哪些新特性

css3有哪些新特性详细可以参考：https://segmentfault.com/a/1190000010780991 以下记录一些容易混淆/遗漏的特性： 1、过渡：transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0) /*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/ transition：wid...

Posted by CodingWithAlice on June 27, 2021

CSS 选择器 - 权重/匹配方式

CSS 选择器 - 权重/匹配方式一、权重 id #id > class .left、伪类 :hover、属性 a[href]/a[class=“qiu”] > 标签类 div、伪元素 ::after > 通配符 * 注意： !important > 行内样式 > 内联/外联样式当两个样式都使用 !important...

Posted by CodingWithAlice on June 27, 2021