前端面試題(四)

• 簡述超連接 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()}`
      })
  }