offer快到碗里来呀~ - 个人主页动态

2020-04-07 12:52

已编辑

两者都用于设置动画 同样的地方：1、指定了监听的css属性的变化2、指定了变化时间 不同：1、触发方式：transition需要通过hover或js事件来配合触发。animation不用显示触发，不需要触发时间就触发，定义动画则开始自动播放。animation用@keyframes规定动画2、transition是过渡，是样式值的变化的过程，只有开始和结束。animation其实也叫关键帧，通过和keyframe结合可以设置中间帧的一个状态3、animation可以设置很多属性，比如循环次数，动画结束的状态，transition只能触发一次。4、性能方面：animation会改变很多属性，页面...

0 点赞评论收藏

2020-04-06 18:43

华南理工大学前端工程师

html之SVG和canvas的区别

canvas和svg都允许在浏览器上创建图形，但是根本上是不同的。 SVG SVG是一种使用XML描述的2D图形 SVG基于XML，这意味着SVG Dom的每个元素都是可用的，可以为某个元素附加js事件处理器 SVG中，每个被绘制过的图形均视为对象，如果SVG对象的属性发生变化，那么浏览器可以自行重现图形 画出的图形是矢量图，所以不能引入普通的图形，但是矢量图放大不会失真，所以适合做地图 绘制图形一般使用标签来实现 Canvas canvas是html5提供的新元素，而svg存在的时间长。 canvas通过js绘制2d图形 canvas是逐像素进行渲染的 在Canvas中，一旦图形被绘制...

0 点赞评论收藏

2020-04-06 15:46

华南理工大学前端工程师

js之html dom

来自菜鸟教程 1、dom节点方法 2、节点属性innerHTMLnodeNamenodeValuenodeType dom事件：onclickondblclickonmouseentereonmouseleaveonmousemoveonmouseoveronmouseoutonmouseup onkeydownonkeypressonkeyup onbluronchangeonfocusonfocusinonfocusoutoninoutonresetonsearchonselectonsubmit 拖拽事件ondragondragendondragenterondragleaveond...

0 点赞评论收藏

2020-04-06 13:38

华南理工大学前端工程师

js之获取dom元素的方法

转自：js 获取dom元素的八种方法 普通的6种 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 获取html的方法（document.documentElement） 获取body的方法（document.body） 特别的2种 通过css选择器获取一个元素（querySelector）获取id为demo的元素document.querySelector('#demo');注意：querySelector方法仅仅返回匹配...

0 点赞评论收藏

2020-04-06 12:54

华南理工大学前端工程师

css之display:none、visibility:hidden和opacity:0之间的区别

转自：区别 一、空间占据 display:none隐藏后不占据额外空间，所以会产生回流和重绘visibility：hidden和opacity：0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起重绘。 二、子元素继承 display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。 visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来 opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示 三、事件绑定 display:none 的元素都已经不...

0 点赞评论收藏

2020-04-06 12:47

华南理工大学前端工程师

js之重绘和重排的区别

参考链接:重绘（redraw或repaint）,重排（reflow）lianjie 重绘（redraw/repaint）重排（reflow） 1、浏览器的运行机制 1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；3、布局渲染树（reflow/lay...

0 点赞评论收藏

2020-04-07 13:17

已编辑

华南理工大学前端工程师

js之事件委托

或叫--事件代理参考链接或直接叫转自： js中的事件委托或是事件代理详解 1、定义 事件委托：事件委托利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事。‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。 事件委托就是利用事件冒泡原理，将子元素要绑定的事件委托给父元素，让父元素负责事件监听，指定父元素为事件处理程序，那么父元素就可以管理某一类型的所有事件。 网上的经典例子：取快递 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收...

0 点赞评论收藏

2020-04-07 13:19

已编辑

华南理工大学前端工程师

js之事件冒泡和事件捕获

参考链接：https://segmentfault.com/a/1190000006667581当在点击一个按钮时，实际上点击了按钮区域、body区域和html区域。 js的dom事件流 三个阶段1、捕获2、处于目标阶段3、冒泡 事件冒泡 认为事件触发的最深层元素首先接收事件，然后是它的父元素，一次向上。最后到达body、html、document. 即事件冒泡就是事件触发时，会从目标DOM元素向上传播，直到文档根节点，一般情况下，会是如下形式传播：targetDOM → parentNode → ... → body → document → window 如果想使用冒泡机制，就在ad...

0 点赞评论收藏

2020-04-06 13:07

已编辑

华南理工大学前端工程师

js之事件绑定

参考链接：1、https://baijiahao.baidu.com/s?id=1599714345736557392&wfr=spider&for=pc2、https://segmentfault.com/a/1190000006667581 1、事件绑定的几种方式 行内绑定 动态绑定 事件监听 行内绑定 即html标签绑定：属性赋值 ，这个在该元素的properties属性中可以查到， 也可以在事件监听中看到语法：<标签 属性列表 事件=”事件的处理程序” />如：缺点：html代码 和js代码严重耦合 <body> <button...

0 点赞评论收藏

2020-04-05 16:33

华南理工大学前端工程师

div+css布局

参考链接：https://www.cnblogs.com/dfghjkl/p/9848074.html1.定义div用来存放需要显示的数据（文字，图表），css就是用来指定怎么显示，从而做到数据和显示相互的效果。 无意义的html元素div和span html只是赋予内容的手段，大部分html标签都有意义，但是div和span没有意义，他们的存在纯粹是应用样式，所以当样式表失效时，他们就没有任何的作用

0 点赞评论收藏

2020-04-05 15:20

华南理工大学前端工程师

css之margin&padding设置为百分比和负值时

转自：https://www.cnblogs.com/zhangzhiyong1998/p/10924891.html1.margin/padding取值为百分比： margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的。2.margin取值为负值： 比如 margin-top / right / bottom / left : -100px; 为负值的情况讨论如下：①：1、当元素不存在width属性，负margin会增加元素的宽度2、margin-top为负值不会添加高度，只会产生向上位移3、margin-bottom为负值不会产生位移，只会减少自...

0 点赞评论收藏

2020-04-04 23:42

华南理工大学前端工程师

css之清除浮动

参考链接：https://blog.csdn.net/h_qingyi/article/details/81269667 目的： 为了解决父元素因为子级元素浮动引起的内部高度为0的问题。请看：当我不给父元素高度，只给子元素高度时，子元素会把父元素撑开。 <body> <div class="parent"> <div class="child1"> </div> <div class="child2"> ...

0 点赞评论收藏

2020-04-04 22:18

华南理工大学前端工程师

2020-04-04

在牛客打卡8天，今天学习：刷题 2 道/代码提交 6 次

0 点赞评论收藏

2020-04-04 21:01

华南理工大学前端工程师

算法之牛客网上做的腾讯笔试题（1）

1、给定一个字符串s，你可以从中删除一些字符，使得剩下的串是一个回文串。如何删除才能使得回文串最长呢？输出需要删除的字符个数。 输入例子:abcdagoogle输出例子:22 解题思路：先将字符串翻转，再求两个字符创的最大公共子序列，然后就可以知道应该删除那些字符。 区别：最大公共子序列和最大公共子串不同子串要求在原字符中是连续的，子序列则只需保持相对顺序一致，不需要连续 答案： 大佬啊 #include<iostream> #include<string> #include<algorithm> using namespace std; const ...

0 点赞评论收藏

2020-04-03 23:20

华南理工大学前端工程师

2020-04-03

在牛客打卡7天，今天学习：刷题 40 道/代码提交 7 次

0 点赞评论收藏

关注他的用户也关注了：