前端小知识点总结

伪类和伪元素总结

1. 伪类是存在在dom树中的，只是对css选择器的一个额外的补充。

2. 伪元素是不存在在dom树中的，虚拟创建的dom元素节点，无法用js访问到。

3. 伪类可以有多个，伪元素只能有一个。

4. 伪类可以放在选择器前面或者后面，而伪元素只能放在选择器后面。

5. 伪元素必须要和content连在一起使用

css选择器总结

1. id选择器 #

2. 类选择器 .

3. 标签选择器 p

4. 空格 表示某个标签下的所有标签

5. >选择器，>div第一层的所有div

6. +选择器，+div紧紧挨着的兄弟div标签

   <div></div>//选择到下面的div
   <div></div>
   ​
   <div></div>//选择不了下面的div
   <br/>
   <div></div>

7. ~选择器，同级的兄弟节点

8. *选择器，所有的元素，一般配合使用

9. 属性选择器，div[href^="https"]``div[href$=".com"]``div[href*="baidu"]

   和正则相关

10. 伪类和伪元素选择器

praseInt总结

选择题：["0x1", "0x2", "0x3"].map(parseInt)输出结果

map传入函数得到三个返回参数value,item,arr

因为pareseInt(字符串，基数)

所以语句相当于是["0x1", "0x2", "0x3"].map((value,index)=>praseInt(value,index))

praseInt("0x1",0))``praseInt("0x2",1))``praseInt("0x3",2))

1. 默认基数是0，自动识别字符串的进制为16进制，转换成10进制的int为数字1

2. 没有1进制的说法，所以NaN。

3. "0x3"看成2进制，只能识别出0，转换成10进制为0

所以最后输出为[1,NaN,0]

sass和less总结

1. 两个都是css预编译器，可以给css增加一些动态特性，比如变量，继承，函数等等。

2. sass是在ruby环境下运行的，使用sass会占用服务器端的资源；less是基于js运行的，使用的时候需要导入js标签，使用less的时候会占用客户端资源。不过如果使用前端webpack等打包工具会使其转化为css，几乎没啥影响了。

3. 变量定义：sass是$var,less是@var。

4. 条件语句：sass支持，less不支持。

js符号计算

1 + - + + + - + 1的值为2，自己测试一下就知道了

箭头函数

1. 箭头函数没有自己的this，里面的this继承上一层作用域的this

2. 箭头函数无法使用call(),apply(),bind()函数的调用

3. 箭头函数无法获取arguments对象

网络安全src="_blank"

当使用a标签跳转到新窗口的时候，可以修改新窗口的window.opener.location值使得页面跳转到别的页面。而当在a标签加上rel="noopener"可以防止opener被滥用，而因为浏览器兼容问题，还需要加上noreferrer