面试题 第5天和第六天

简述超链接target属性的取值和作用

 a 标签的 target 属性一共有四个值。

_self

默认属性。在当前窗口或者框架中加载目标文档。

_blank

打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel="noopener norefferrer" 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。

_parent

在 frame 或者 iframe 中使用较多。在父级框架中载入目标文档，当 a 标签本身在顶层时，与 _self 相同。

_top

在 frame 或者 iframe 中使用较多。直接在顶层的框架中载入目标文档，加载整个窗口。

CSS3新增伪类有哪些并简要描述

CSS3 中新增的伪元素有以下这些:

:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的（控制表单奇数、偶数行的样式）
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器，用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素

css3伪类	作用
:root	文档根元素，总是返回html
:last-child, :only-child, :only-of-type	文本的最后一个 / 唯一一个 / 指定类型的唯一一个 子元素
-:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n),	第n个 / 倒数第n个 / 指定类型的第n个 / 指定类型的倒数第n个 子元素
:enabled, :disabled	启用 / 禁用
:checked	已勾选
:default	默认，例如radio group中默认选中的radio
:valid, :invalid, :required, :optional, :in-range, :out-of-range	校验有效 / 校验无效 / 必填 / 非必填 / 限定范围内 / 限定范围外的 input
:not()	括号内条件取反
-:empty-	-没有子元素的元素-
:target	URL片段标识符指向的元素

写一个把字符串大小写切换的方法

function caseConvert(str) {
  return str.split('').map(s => {
    const code = s.charCodeAt();
    if (code < 65 || code > 122 || code > 90 && code < 97) return s;
    
    if (code <= 90) {
      return String.fromCharCode(code + 32)
    } else {
      return String.fromCharCode(code - 32)
    }
  }).join('')
}

console.log(caseConvert('AbCdE')) // aBcDe 

function caseConvertEasy(str) {
  return str.split('').map(s => {
    if (s.charCodeAt() <= 90) {
      return s.toLowerCase()
    }
    return s.toUpperCase()
  }).join('')
}

console.log(caseConvertEasy('AbCxYz')) // aBcXyZ 

label都有哪些作用？并举相应的例子说明

表示用户界面中某个元素的说明
增加命中区域，屏幕阅读器可以读出标签。使使用辅助技术的用户更容易理解输入 哪些数据

用法
单击关联标签激活input，需给input一个id属性，给label一个for属性，设为同一个值

lable可以关联控件，可以和表单元素结合，使表单元素获得焦点。有两个属性，for和accesskey。
for 属性用来关联表单，accesskey属性设置快捷键。
for属性：
<label for="username">姓名</label><input id="username" type="text">

<input type="checkbox" id="a" value="haha" name="cn">
<label for="a" >haha </label>
<input type="checkbox" id="b" value="hehe" name="cm">
<label for="b" >hehe </label>
accesskey属性:
<label for="username" accesskey＝"N">姓名</label><input id="username" type="text">

写一个去除制表符和换行符的方法

/**
 * \f  匹配换页字符。
 * \n  匹配换行字符。
 * \r  匹配回车符字符。
 * \t  匹配制表字符。
 * \v  匹配垂直制表符。
 */

function deleteTN(str){
    return str.replace(/[\t\n]+/g, '')
}