聊聊前端的冷门小知识 - 李游Leo公开课（2020-4-8 和 2020-4-10）笔记

冷门小知识 01

div 的伪类后面用一个：和用两个：：效果相同。

            <style type="text/css">div{width: 100px;height: 100px;background-color: black;position: relative;/* word-wrap: break-word;word-break: break-all; */}/* div::after{ */div:after{content: '';width: 100px;height: 100px;background-color: red;position:absolute;left: 100%;/* float: left; */}/* 可覆盖前面 */div::after{content: 'testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest';word-wrap: break-word;word-break: break-all;}/* after的hover 需要先写hover 在写after */div:hover::after{background-color: chartreuse;}div::first-line{color: darkgoldenrod;}div::first-letter{color: white;background: violet;}</style>

冷门小知识 02

一个div 三种色块

            <style type="text/css">div{width: 100px;height: 100px;background-color: black;position:absolute;left: 0px;top:0px;right: 0px;bottom: 0px;margin: auto;border-top:100px solid blue ;border-bottom:100px solid brown ;}   div::before{content: 'before';width: 100px;height: 100px;background-color: red;position:absolute;left:-100%;border-top:100px solid pink ;border-bottom:100px solid palevioletred ;}div::after{content: 'after';width: 100px;height: 100px;background-color: yellow;position:absolute;left: 100%;border-top:100px solid green ;border-bottom:100px solid goldenrod ;}</style>

不知道为什么运行完成了这个鬼样子~~~ after 和 before 的 border 为什么会跑到下面去了

另一种方法是使用 box shadow 来解决~~~

            <style type="text/css">div{width: 100px;height: 100px;background-color: black;position:absolute;left: 0px;top:0px;right: 0px;bottom: 0px;margin: auto;box-shadow: 100px 0 0 0px goldenrod,200px 0 0 0px greenyellow,300px 0 0 0px firebrick ;}   </style>

冷门小知识 03

::selection{

color: fuchsia;

}

这个比较鬼马 ~~~

input::placeholder{

color:violet;

}

冷门小知识 04

视频播放的时候，可以设置全屏背景色

冷门小知识 05

css 可以用变量麽

css var 小度小度~~

冷门小知识 06

雪碧图

精灵图

https://www.toptal.com/developers/css/sprite-generator

冷门小知识 07

1.js 里面只有控制台打印输出 1

所以如果没有defer="defer" 的场合，输出顺序是 1 2

但如果有defer="defer" 的场合，输出顺序是 2 1

defer="defer"东西会改变 js的加载顺序，应该是全部都加载完成之后，才会去加载，带有defer="defer"关键字的js引用。

答案是 321

2 是因为只要有定时器就会有延时

没有定时器的时候还是会先执行 2的

1 是最后才会加载的

另外 defer 只能用于外部引用js 不能用于类似 2 的那种。

冷门小知识 08

绑定点击事件的方式

事件委派事件委托~~

获取元素，添加属性~

冷门小知识 09

c是20,或运算的特性

另一个，js 有自己真值假值

【书 JS语言精粹】第2章语法

关于真值假值问题，上面这个帖子提到过。。。

结果是 20

回调函数的调用。。。

调用a的时候后，给a函数传进去了一个函数参数，这个时候，执行a 参数fn 为穿进去的那个参数函数，于是参数

fn = function(){alert(1);}

那么 fn && fn();

fn 就不是 undefined 是个真值，所以是true

所以 && 运算便会执行 && 后面的语句

即 fn();

于是可以弹出来 1 。以上！

而另外调用a的时候，如果没有传参，那么也不会报错，因为&&运算的前面是 false的时候，不执行&&之后的语句，所以就不会报错。

冷门小知识 10

js中的[]中括号可以完全代替.

div.onclick

等价于

div['onclick']

'onclick' 可以字符串化，于是可以被当当做参数传入~

这个被绑定的事件你就可以换了呀~~

有点类似 java 里面反射机制，可以根据字符串化的类名，而实例化出来具体的对象之类的。

代替 . 的写法，箭头函数~~

冷门小知识 11

显示图片的N种方式

img

background-image

border-image

不好不采用

input 图片域

这种可以表单上传~~

伪类：：after 来实现

content 除了可以放文字，还可以放图片

c 其实是 css 的意思

这这这空格很重要。。。

但是不能放本地图片，可以放网上图片。。

运行出来以后

能在控制台输出来一个图片

我噻~~~ 好神奇！！！

冷门小知识 12

log 看不到 div1的属性，但是 dir 可以看到。。。

冷门小知识 13

移动端兼容的一些小知识

10 vw 是 10/1000 百分比

我猜啊是最大最小啥的那种东西。。

啊猜错了

这个东西是被用在在手机上测试横屏竖屏

window.innerHeight

冷门小知识 14

列表元素去点点功能

这样也能去点点这个比较神奇
冷门小知识 15

老师的网站

这个东西需要用服务器，如果不用服务器，。。。

这个东西呢，比如暂时没有后台真是数据返回来，就可以在本服务器先暂时做一些临时文件，demmy数据，dummy json文件那种，先进行着前端页面的布局与调试什么的。

仅供参考吧~~

冷门小知识 16

冷门小知识 17

innerHTML 是可以改变元素的内容

而 outerHTML 是可以连元素的本身都可以改变

这个感觉像是在浏览器的那个 element 元素那里选中啊，改变啊的感觉~

元素.outerHTML = ''

这个比较重要啊，这个就相当于这个元素把自己给 remove 了。

这两个是等价于的。。。

remove 貌似兼容性差~~

一般会找到父类级别，然后删除自己的子节点。。。

冷门小知识 18

浏览器的地址栏居然可以直接写js代码

这这这就能运行。。。

冷门小知识 19

放 HTML 也行惊讶~~~

这个也超级鬼马 ~~~

data:text/html,<html contenteditable>

冷门小知识 20

3wschool 那效果来了~

<!DOCTYPE html>
<html><head><title>01 PAGE</title><meta name="viewport" content="width=device-width,initial-scale=1">   <script type="text/javascript"></script></head><body><style type="text/css" style="display:block" contenteditable="true">div{width: 100px;height: 100px;background-color: black;/* transform: 7s; */} </style> <div></div></body>
</html>

冷门小知识 21

入力框焦点获得有阴影效果

<!DOCTYPE html>
<html><head><title>01 PAGE</title><meta name="viewport" content="width=device-width,initial-scale=1">   <style type="text/css">/* div{width: 100px;height: 100px;background-color: black;}  */input{transition: .7s;}input:focus{box-shadow: 0 0 10px gray;}</style> <script type="text/javascript"></script></head><body><input type="" name=""><div></div></body>
</html>

好像 div 如果可编辑的状态以后，可以设置facus的css。

冷门小知识 22

网页鼠标消失效果
冷门小知识 23

如何让 a 链接失效

这是啥阻止冒泡那个么

重点事件去除不过拖拽事件据说也不管用了
冷门小知识 24

日语式竖排式排版

冷门小知识 25

a b swap 骚操作~ 不用第三方变量

搞一个匿名数组，元素0 是 2 ，元素1 是

因为 b 已经被用完了，所以把a放给b

再从数组里面取出来第0个元素，扔回给a ，完成交换。

冷门小知识 26

-- 箭头我猜是 n-- n减一的自运算箭头是大于号大于0的意思

x=x=》箭头函数

k《=5？：3 三目运算

冷门小知识 27

多重边框效果

并不可以，border 不能搁逗号 ~
冷门小知识 28

假装我也在送花花~~~