[前端面试套餐css+js+vue+es6]第二天

css：css选择器有哪些？优先级？哪些属性可以继承？

选择器

显示css常用的有：

• id选择器#
• 类选择器.
• 标签选择器div
• 后代选择器 #box div
  选择id为box元素内部所有的div元素
• 子选择器.father>children
  选择父元素为.father的所有.children元素
• 相邻同胞选择器.one+.two
  选择紧接在.one之后的所有.two元素
• 群组选择器div,p
  选择div，p的所有元素

---

不常用的：

• 伪类选择器

选择器	含义
:link	选择未被访问的链接
:visited	选取已被访问的链接
:active	选择活动链接
:hover	鼠标指针浮动在上面的元素
:focus	选择具有焦点的
:first-child	父元素的首个子元素

• 伪元素选择器

选择器	含义
:first-letter	用于选取指定选择器的首字母
:first-line	选取指定选择器的首行
:before	选择器在被选元素的内容前面插入内容
:after	选择器在备选元素的内容后面插入内容

• 属性选择器

选择器	含义
[attribute]	选择带有attribute属性的元素
[attribute =value]	选择所有使用attribute=value的元素
[attribute~=value]	选择attribute属性包含value的元素
[attribute |=value]	选择attribute属性以value开头的元素

---

css3中新增的选择器如下

• 层次选择器 (p~ul)：选择前面有p元素的每个ul元素
• 伪类选择器

选择器	含义
:first-of-type	父元素的首个元素
:last-of-type	父元素的最后一个元素
:only-of-type	父元素的特定类型的唯一子元素
:only-child	父元素中唯一子元素
:nth-child(n)	选择父元素中的第N个子元素
:nth-last-of-type(n)	选择父元素中第N个子元素，从后往前
:last-child	父元素的最后一个元素
:root	设置html文档(给一些常用的颜色)
:empty	指定空的元素
:enabled	选择未被禁用的元素
:disabled	选择被禁用的元素
:checked	选择选中的元素
:not(selector)	选择非<selector>元素的所有元素

• 属性选择器
  [attribute*=value]：选择attribute属性值包含value的所有元素
  [attribute^=value]：选择attribute属性开头为value的所有元素
  [attribute$=value]：选择attribute属性结尾为value
  和正则的规则差不多了

优先级

内联>ID选择器>类选择器>标签选择器
如果外部样式需要覆盖内联样式，就需要使用!important

继承属性

继承指的是给父元素设置一些属性，后代元素会自动拥有这些属性

• 字体系列属性

属性	含义
font	组合字体
font-family	规定元素的字体系列
font-weight	设置字体的粗细
font-size	设置字体的尺寸
font-style	定义字体的风格
font-variant	偏大或偏小的字体

• 文本系列属性

属性	含义
text-indent	文本缩进
text-align	文本水平
line-height	行高
word-spacing	增加或减少单词间的空白
letter-spacing	增加或减少自字符间的空白
text-transform	控制文本大小写
direction	规定文本的书写方向
color	文本颜色

• 元素可见性 visibility
• 表格布局属性

属性	含义
caption-side	定位表格标题位置
border-collapse	合并表格边框
border-spacing	设置相邻单元格的边框间距离
empty-cells	单元格的边框的出现与消失
table-layout	表格的宽度由什么决定

• 列表属性

属性	含义
list-style-type	文字前面的小点点样式
list-style-position	小点点位置
list-style	以上的属性可通过这属性集合

• 引用 quotes：设置嵌套引用的引号类型
• 光标属性 cursor：箭头可以编程需要的形状

无继承的属性

• display
• 文本属性：vertical-align，text-decoration
• 盒子模型的属性：宽度，高度，内外边距，边框等
• 背景属性
• 定位属性
• 生成内容属性
• 轮廓样式属性
• 页面样式属性

js：Javascript字符串的常用方法有哪些？

操作方法

增

• ‘+’
• concat

删

• slice()
• substr()
• substring()
  slice和substring的效果好像是一样的！

改

这里的改也不是改变原字符串，而是创建字符串的一个副本，再进行操作

• trim()，trimLeft()，trimRight()
  删除前后或前后所有空格符，再返回新的字符串
• repeat()
  接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果
• padStart()，padEnd()
  复制字符串，如果小于指定长度，则再响应一遍填充字符，直至满足长度条件
• toLowerCase(),toUpperCase()
  转换大小写

查

• charAt() 个人觉得没必要，直接用小标访问就可以了啊
• indexOf 比较常见，在数组也通用
• startWith() 判断是否存在
• includes() 判断是否存在

可以感觉indexOf可以梭哈

转换方法

• split() 通常和数组的join搭配一起使用

模板匹配方法

• match()

let text = "cat, bat, sat, fat";
let pattern = /.at/;
let matches = text.match(pattern);
console.log(matches[0]); // "cat"

• search()
  接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，找到则返回匹配索引，否则返回 -1
• replace()
  接受两个参数，第一个参数为匹配的内容，第二个参数为替换的元素

let text = "cat, bat, sat, fat";
let result = text.replace("at", "ond");
console.log(result); // "cond, bat, sat, fat"

es6：数组新增了哪些扩展？

• 扩展运算符 ...
• 构造函数新增：
  • Array.from()将类似数组的对象和可遍历对象(包括set，map)转为真正的数组
  • Array.of()将一组值，转换为数组
• 实例对象新增方法：
  • copyWithin() 将指定位置的成员复制到其他位置，然后返回当前数组
  • find()，findIndex() 找出符合要求的成员和下标
  • fill() 使用给定值，填充一个数组
  • keys() 对键名的遍历
  • values()对键值的遍历
  • entries()对键值对的遍历
  • includes() 是否包含某值
  • flat()数组扁平化
  • flatMap()对每个成员执行map后再进行扁平化

vue：数据请求在created和mounted的区别

• created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成
• mounted是在页面dom节点渲染完毕之后就立刻执行的
• 触发时机上，created比mounted更早
• 放在mounted请求有可能导致页面山东，但如果在页面加载前完成则不会出现次情况
• 建议：放在created生命周期中！