成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端這幾個(gè)webApi你都知道嗎

libin19890520 / 2424人閱讀

摘要：跟相反，該元素可以向上查詢，也就是可以查詢到父元素就跟原生微信小程序一樣，能獲取標(biāo)簽上以為前綴的屬性集合蜘蛛俠蜘蛛俠注意這是開發(fā)規(guī)范問題，凡是自定義屬性都要加上前綴假設(shè)瀏覽器的參數(shù)是蜘蛛俠蜘蛛俠這是一個(gè)對(duì)象，該對(duì)象里封裝了許多操作元

closest 
跟querySelector相反，該元素可以向上查詢，也就是可以查詢到父元素：
    document.querySelector("li").closest("#nav");
dataset

就跟原生微信小程序一樣，能獲取標(biāo)簽上以"data-"為前綴的屬性集合：

    

    document.querySelector("p").dataset; // {name: "蜘蛛俠", age: "16"}

注意：這是開發(fā)規(guī)范問題，凡是自定義屬性都要加上data-前綴

URLSearchParams

假設(shè)瀏覽器的url參數(shù)是 "?name=蜘蛛俠&age=16"：

    new URLSearchParams(location.search).get("name"); // 蜘蛛俠
classList

這是一個(gè)對(duì)象，該對(duì)象里封裝了許多操作元素類名的方法：

    

    let elem = document.querySelector("p");
    
    // 增加類名
    elem.classList.add("title-new"); // "title title-new"
    
    // 刪除類名
    elem.classList.remove("title"); // "title-new"
    
    // 切換類名（有則刪、無則增，常用于一些切換操作，如顯示/隱藏）
    elem.classList.toggle("title"); // "title-new title"
    
    // 替換類名
    elem.classList.replace("title", "title-old"); // "title-new title-old"
    
    // 是否包含指定類名
    elem.classList.contains("title"); // false
getBoundingClientRect

可以獲取指定元素在當(dāng)前頁面的空間信息：

    elem.getBoundingClientRect();
    // 返回
    {
      x: 604.875,
      y: 1312,
      width: 701.625,
      height: 31,
      top: 1312,
      right: 1306.5,
      bottom: 1343,
      left: 604.875
    }
notification

PC端的桌面通知，如網(wǎng)頁端的微信，當(dāng)收到消息時(shí)，右下角會(huì)出現(xiàn)一個(gè)通知（盡管你把瀏覽器最小化），因?yàn)檫@個(gè)通知時(shí)獨(dú)立于瀏覽器的，是系統(tǒng)的一個(gè)原生控件：

    const notice = new Notification("前端宇宙情報(bào)局", {
      body: "這20個(gè)不常用的Web API真的有用嗎?，別問，問就是有用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116354.html

相關(guān)文章

  • 作為開發(fā)人員，這四類Code Review方法你都知道嗎？

    摘要：類型瞬時(shí)的代碼審查第一種類型是瞬時(shí)代碼審查，它發(fā)生在結(jié)對(duì)編程的情景中。相同的專業(yè)水平考慮進(jìn)行結(jié)對(duì)編程的另一個(gè)重要方面，是一起工作時(shí)，兩個(gè)開發(fā)者的專業(yè)水平。讓一個(gè)初級(jí)開發(fā)者和一個(gè)高級(jí)開發(fā)者進(jìn)行結(jié)對(duì)編程，效果并不好。 本文翻譯自：https://dzone.com/articles/4-... 轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。 沒...

    姘擱『 評(píng)論0 收藏0

  • 阿里巴巴2018秋招總結(jié)

    摘要：作為一個(gè)前端人，阿里巴巴，是我最想去的國(guó)內(nèi)公司，我看重的也不是他薪水如何，完全在于他的技術(shù)，這一點(diǎn)可以說明一切。阿里是個(gè)十分重視基礎(chǔ)的公司，和浮躁的前端大環(huán)境形成鮮明的對(duì)比。我不是第一次投阿里巴巴，所以心態(tài)一開始還是挺平和的。 這是去年8月份秋招的面試，五面都面完了，給大家貢獻(xiàn)干貨吧。我沒寫問題的答案，有什么問題可以留言區(qū)問我。 一面 電話面（1小時(shí)）電話面問題不多，但是十分考驗(yàn)對(duì)相關(guān)...

    AWang 評(píng)論0 收藏0

  • 阿里巴巴2018秋招總結(jié)

    摘要：作為一個(gè)前端人，阿里巴巴，是我最想去的國(guó)內(nèi)公司，我看重的也不是他薪水如何，完全在于他的技術(shù)，這一點(diǎn)可以說明一切。阿里是個(gè)十分重視基礎(chǔ)的公司，和浮躁的前端大環(huán)境形成鮮明的對(duì)比。我不是第一次投阿里巴巴，所以心態(tài)一開始還是挺平和的。 這是去年8月份秋招的面試，五面都面完了，給大家貢獻(xiàn)干貨吧。我沒寫問題的答案，有什么問題可以留言區(qū)問我。 一面 電話面（1小時(shí)）電話面問題不多，但是十分考驗(yàn)對(duì)相關(guān)...

    mj 評(píng)論0 收藏0

  • 阿里巴巴2018秋招總結(jié)

    摘要：作為一個(gè)前端人，阿里巴巴，是我最想去的國(guó)內(nèi)公司，我看重的也不是他薪水如何，完全在于他的技術(shù)，這一點(diǎn)可以說明一切。阿里是個(gè)十分重視基礎(chǔ)的公司，和浮躁的前端大環(huán)境形成鮮明的對(duì)比。我不是第一次投阿里巴巴，所以心態(tài)一開始還是挺平和的。 這是去年8月份秋招的面試，五面都面完了，給大家貢獻(xiàn)干貨吧。我沒寫問題的答案，有什么問題可以留言區(qū)問我。 一面 電話面（1小時(shí)）電話面問題不多，但是十分考驗(yàn)對(duì)相關(guān)...

    yy13818512006 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<