冷门小知识 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 有自己真值 假值
关于真值假值问题,上面这个帖子 提到过。。。
结果是 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 三目运算