前端面试题(四)

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

  a 标签的取值有以下几种:

  • _self
    默认属性. 在当前窗口或者框架中加载目标文件
  • _blank
    打开新的窗口或者新的标签页.在使用这个属性的时候,最好添加 rel="noopener norefferrer" 属性, 防止打开新窗口对原窗口造成破坏,防止 window.opener 的恶意行为
  • _parent
    在 frame 或者 iframe 中使用较多,在父级框架中载入目标文件, 当 a 标签在顶层时, 与 _self 一样
  • _top
    在 frame 或者 iframe 中使用较多. 直接在顶层的框架中加载目标文件,加载整个窗口

---

• css 新增伪类有哪些,并简要描述

  CSS3 中规定伪类使用一个 : 来表示；伪元素则使用 :: 来表示。

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

---

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

  第一种方法比较简单容易思考
  遍历字符串 每一个字符串对比将其变大写 如果不相等的话说明是小写,将其转换为大写 相等的话就是大写 将其转换为小写

      var str = "aBCDefdGj";
      var arr = [];
  
      for (var item of str) {
          if(item == item.toUpperCase()){
              item = item.toLowerCase()
          }else{
              item = item.toUpperCase()
          }
          arr.push(item)
      }
      console.log(arr)
      var newStr = arr.join("")
      console.log(newStr)

  第二种是利用 replace 方法和正则表达式
  replace 的第一个参数是匹配规则.规定子字符串或要替换的模式的 RegExp 对象. 第二个参数是一个字符串值。规定了替换文本或生成替换文本的函数。

  function caseConvert(str){
      return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2)=>{
      return `${s1.toUpperCase()}${s2.toLowerCase()}`
      })
  }