首頁 探索 說明
註冊 登入
root
/
myBlogs_2
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
目錄樹: 8fc7f14924
分支列表 標籤列表
myBlogs_2
/
dist
/
JavaScript
/
2018_10_29_02.html

2018_10_29_02.html 197 KB
文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>代码收集 | 看白鹿的博客</title>
    7. 

  7.     <meta name="description" content="只有敢于尝试,才能品味人生.">
    8. 

  8.     <link rel="icon" href="/logo.png">
    9. 

  9.     
    10. 

  10.     <link rel="preload" href="/assets/css/0.styles.9f9689a0.css" as="style"><link rel="preload" href="/assets/js/app.e708c228.js" as="script"><link rel="preload" href="/assets/js/3.db2f1e5f.js" as="script"><link rel="preload" href="/assets/js/84.376d4f1c.js" as="script"><link rel="prefetch" href="/assets/js/10.6ed737d5.js"><link rel="prefetch" href="/assets/js/100.ce57f417.js"><link rel="prefetch" href="/assets/js/101.3df935d9.js"><link rel="prefetch" href="/assets/js/102.c60ec37a.js"><link rel="prefetch" href="/assets/js/103.fc7cccb2.js"><link rel="prefetch" href="/assets/js/104.a96cfc21.js"><link rel="prefetch" href="/assets/js/105.cb7f28ee.js"><link rel="prefetch" href="/assets/js/106.c030cf9e.js"><link rel="prefetch" href="/assets/js/107.f7e716fd.js"><link rel="prefetch" href="/assets/js/108.96b61fa3.js"><link rel="prefetch" href="/assets/js/109.591848fa.js"><link rel="prefetch" href="/assets/js/11.f23848ff.js"><link rel="prefetch" href="/assets/js/110.933b3212.js"><link rel="prefetch" href="/assets/js/111.0be16d33.js"><link rel="prefetch" href="/assets/js/112.c5cf7e2b.js"><link rel="prefetch" href="/assets/js/113.1b6e7027.js"><link rel="prefetch" href="/assets/js/114.547f72dc.js"><link rel="prefetch" href="/assets/js/12.9768d711.js"><link rel="prefetch" href="/assets/js/13.e4dc8a2c.js"><link rel="prefetch" href="/assets/js/14.c68e579e.js"><link rel="prefetch" href="/assets/js/15.9c6cc7ea.js"><link rel="prefetch" href="/assets/js/16.25acc608.js"><link rel="prefetch" href="/assets/js/17.6bfdf855.js"><link rel="prefetch" href="/assets/js/18.f36b9d48.js"><link rel="prefetch" href="/assets/js/19.4fb7dc2f.js"><link rel="prefetch" href="/assets/js/20.97d64be6.js"><link rel="prefetch" href="/assets/js/21.1c992386.js"><link rel="prefetch" href="/assets/js/22.5686c25d.js"><link rel="prefetch" href="/assets/js/23.4be23257.js"><link rel="prefetch" href="/assets/js/24.33657f7f.js"><link rel="prefetch" href="/assets/js/25.320528b6.js"><link rel="prefetch" href="/assets/js/26.aa73b215.js"><link rel="prefetch" href="/assets/js/27.ae22b260.js"><link rel="prefetch" href="/assets/js/28.8a5d68dc.js"><link rel="prefetch" href="/assets/js/29.26665480.js"><link rel="prefetch" href="/assets/js/30.78e435df.js"><link rel="prefetch" href="/assets/js/31.944caa3d.js"><link rel="prefetch" href="/assets/js/32.eb2e15c1.js"><link rel="prefetch" href="/assets/js/33.c4ed4964.js"><link rel="prefetch" href="/assets/js/34.91e03ab0.js"><link rel="prefetch" href="/assets/js/35.2525221c.js"><link rel="prefetch" href="/assets/js/36.ff0f2ba1.js"><link rel="prefetch" href="/assets/js/37.07680168.js"><link rel="prefetch" href="/assets/js/38.6c20a418.js"><link rel="prefetch" href="/assets/js/39.264885d0.js"><link rel="prefetch" href="/assets/js/4.98339c5a.js"><link rel="prefetch" href="/assets/js/40.aa0df58e.js"><link rel="prefetch" href="/assets/js/41.00ec6a3a.js"><link rel="prefetch" href="/assets/js/42.4f9c2705.js"><link rel="prefetch" href="/assets/js/43.18c94874.js"><link rel="prefetch" href="/assets/js/44.b843dc53.js"><link rel="prefetch" href="/assets/js/45.ce601065.js"><link rel="prefetch" href="/assets/js/46.231ea9e5.js"><link rel="prefetch" href="/assets/js/47.3b100c97.js"><link rel="prefetch" href="/assets/js/48.2bd06ef1.js"><link rel="prefetch" href="/assets/js/49.b3c29988.js"><link rel="prefetch" href="/assets/js/5.4edccbb7.js"><link rel="prefetch" href="/assets/js/50.c128c076.js"><link rel="prefetch" href="/assets/js/51.57f910a7.js"><link rel="prefetch" href="/assets/js/52.9673b19c.js"><link rel="prefetch" href="/assets/js/53.74822412.js"><link rel="prefetch" href="/assets/js/54.94ead0f2.js"><link rel="prefetch" href="/assets/js/55.2657edb2.js"><link rel="prefetch" href="/assets/js/56.ca1f6b47.js"><link rel="prefetch" href="/assets/js/57.f2ffb074.js"><link rel="prefetch" href="/assets/js/58.aad3481a.js"><link rel="prefetch" href="/assets/js/59.6c6d9e19.js"><link rel="prefetch" href="/assets/js/6.1de86338.js"><link rel="prefetch" href="/assets/js/60.e1e4a1dd.js"><link rel="prefetch" href="/assets/js/61.c9aa409a.js"><link rel="prefetch" href="/assets/js/62.f9ff4c15.js"><link rel="prefetch" href="/assets/js/63.f7218d4f.js"><link rel="prefetch" href="/assets/js/64.fd4479bf.js"><link rel="prefetch" href="/assets/js/65.47b2f12e.js"><link rel="prefetch" href="/assets/js/66.1a99c0a9.js"><link rel="prefetch" href="/assets/js/67.791fada3.js"><link rel="prefetch" href="/assets/js/68.b1bec000.js"><link rel="prefetch" href="/assets/js/69.a639c2f3.js"><link rel="prefetch" href="/assets/js/7.cea02d3e.js"><link rel="prefetch" href="/assets/js/70.11ea071f.js"><link rel="prefetch" href="/assets/js/71.f53bb3d4.js"><link rel="prefetch" href="/assets/js/72.c5fab436.js"><link rel="prefetch" href="/assets/js/73.aed36f34.js"><link rel="prefetch" href="/assets/js/74.bcd8b441.js"><link rel="prefetch" href="/assets/js/75.8381ae34.js"><link rel="prefetch" href="/assets/js/76.a8ced92a.js"><link rel="prefetch" href="/assets/js/77.824eaeec.js"><link rel="prefetch" href="/assets/js/78.aca9fa09.js"><link rel="prefetch" href="/assets/js/79.bf315430.js"><link rel="prefetch" href="/assets/js/8.74f13dae.js"><link rel="prefetch" href="/assets/js/80.53eb46d1.js"><link rel="prefetch" href="/assets/js/81.bcf973bd.js"><link rel="prefetch" href="/assets/js/82.22b94ced.js"><link rel="prefetch" href="/assets/js/83.9993f5ed.js"><link rel="prefetch" href="/assets/js/85.2e0f7fca.js"><link rel="prefetch" href="/assets/js/86.11c21705.js"><link rel="prefetch" href="/assets/js/87.9ca94b0e.js"><link rel="prefetch" href="/assets/js/88.500879fa.js"><link rel="prefetch" href="/assets/js/89.87a60d2e.js"><link rel="prefetch" href="/assets/js/9.02d42a35.js"><link rel="prefetch" href="/assets/js/90.458ff2d4.js"><link rel="prefetch" href="/assets/js/91.2d25b4f0.js"><link rel="prefetch" href="/assets/js/92.ec4c7b72.js"><link rel="prefetch" href="/assets/js/93.35f65ff4.js"><link rel="prefetch" href="/assets/js/94.b9bb1a80.js"><link rel="prefetch" href="/assets/js/95.05151362.js"><link rel="prefetch" href="/assets/js/96.ed53cc9e.js"><link rel="prefetch" href="/assets/js/97.0ef7a53a.js"><link rel="prefetch" href="/assets/js/98.c43a624e.js"><link rel="prefetch" href="/assets/js/99.144eda80.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.9416a2d8.js">
    11. 

  11.     <link rel="stylesheet" href="/assets/css/0.styles.9f9689a0.css">
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">看白鹿的博客</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link router-link-active">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    15. 

  15.   GitHub
    16. 

  16.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link router-link-active">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    17. 

  17.   GitHub
    18. 

  18.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/JavaScript/" class="sidebar-link">JS 目录</a></li><li><a href="/JavaScript/2018_10_29_02.html" class="active sidebar-link">代码收集</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#区分-桌面环境-与-移动平台" class="sidebar-link">区分 桌面环境 与 移动平台</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#element-元素-y-轴的-scroll-事件触发" class="sidebar-link">element 元素 Y 轴的 scroll 事件触发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#移动平台" class="sidebar-link">移动平台</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#桌面环境" class="sidebar-link">桌面环境</a></li></ul></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#节点的操作" class="sidebar-link">节点的操作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#一、js-获取子节点的方式" class="sidebar-link">一、js 获取子节点的方式</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#二、js-获取父节点的方式" class="sidebar-link">二、js 获取父节点的方式</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#三、js-获取兄弟节点的方式" class="sidebar-link">三、js 获取兄弟节点的方式</a></li></ul></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#原生-ajax-学习" class="sidebar-link">原生 Ajax 学习</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#readystate" class="sidebar-link">readyState</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#http-头部信息" class="sidebar-link">HTTP 头部信息</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#get-请求" class="sidebar-link">GET 请求</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#post-请求" class="sidebar-link">POST 请求</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#formdata" class="sidebar-link">FormData</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#es5-示例代码" class="sidebar-link">es5 示例代码</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#es6-示例代码" class="sidebar-link">es6 示例代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#正则截取指定字符串" class="sidebar-link">正则截取指定字符串</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#参考文章-2" class="sidebar-link">参考文章</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#正则截取指定字符串-2" class="sidebar-link">正则截取指定字符串</a></li></ul></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#浏览器基本信息判断" class="sidebar-link">浏览器基本信息判断</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#javascript-jquery-判断元素即将出现在文档可视区域或文档可视区域的顶部" class="sidebar-link">JavaScript|jQuery 判断元素即将出现在文档可视区域或文档可视区域的顶部</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#导航条动画，设定" class="sidebar-link">导航条动画，设定</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#锚链接跳转过渡" class="sidebar-link">锚链接跳转过渡</a></li><li class="sidebar-sub-header"><a href="/JavaScript/2018_10_29_02.html#文章标题的动画" class="sidebar-link">文章标题的动画</a></li></ul></li><li><a href="/JavaScript/2018_10_28_01.html" class="sidebar-link">动态替换图片</a></li><li><a href="/JavaScript/2018_11_02_01.html" class="sidebar-link">战舰游戏</a></li><li><a href="/JavaScript/2018_11_02_02.html" class="sidebar-link">原理</a></li><li><a href="/JavaScript/2018_11_02_03.html" class="sidebar-link">匿名函数和闭包</a></li><li><a href="/JavaScript/2018_11_02_04.html" class="sidebar-link">instanceof运算符</a></li><li><a href="/JavaScript/2018_11_02_05.html" class="sidebar-link">JavaScript 事件流</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="代码收集"><a href="#代码收集" class="header-anchor">#</a> 代码收集</h1> <h2 id="区分-桌面环境-与-移动平台"><a href="#区分-桌面环境-与-移动平台" class="header-anchor">#</a> 区分 桌面环境 与 移动平台</h2> <h4 id="参考文章"><a href="#参考文章" class="header-anchor">#</a> 参考文章:</h4> <p><a href="https://segmentfault.com/a/1190000016760627" target="_blank" rel="noopener noreferrer">https://segmentfault.com/a/1190000016760627<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 区分桌面浏览器与移动浏览器</span>
    19. 

  19. <span class="token keyword">var</span> <span class="token constant">OS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    20. 

  20.   <span class="token constant">WINDOWS</span><span class="token punctuation">:</span> <span class="token string">'win'</span><span class="token punctuation">,</span>
    21. 

  21.   <span class="token constant">MACINTOSH</span><span class="token punctuation">:</span> <span class="token string">'mac'</span><span class="token punctuation">,</span>
    22. 

  22.   <span class="token constant">LINUX</span><span class="token punctuation">:</span> <span class="token string">'linux'</span><span class="token punctuation">,</span>
    23. 

  23.   <span class="token constant">IOS</span><span class="token punctuation">:</span> <span class="token string">'iOS'</span><span class="token punctuation">,</span>
    24. 

  24.   <span class="token constant">ANDROID</span><span class="token punctuation">:</span> <span class="token string">'Android'</span><span class="token punctuation">,</span>
    25. 

  25.   <span class="token constant">BLACKBERRY</span><span class="token punctuation">:</span> <span class="token string">'bb'</span><span class="token punctuation">,</span>
    26. 

  26.   <span class="token constant">WINDOWS_PHONE</span><span class="token punctuation">:</span> <span class="token string">'winphone'</span><span class="token punctuation">,</span>
    27. 

  27. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    28. 

  28. <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">getOS</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    29. 

  29. <span class="token function">alert</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    30. 

  30. <span class="token keyword">function</span> <span class="token function">getOS</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    31. 

  31.   <span class="token keyword">var</span> userAgent <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">;</span>
    32. 

  32.   <span class="token keyword">var</span> platform<span class="token punctuation">,</span> result<span class="token punctuation">;</span>
    33. 

  33.   <span class="token keyword">function</span> <span class="token function">getDesktopOS</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    34. 

  34.     <span class="token keyword">var</span> pf <span class="token operator">=</span> navigator<span class="token punctuation">.</span>platform<span class="token punctuation">;</span>
    35. 

  35.     <span class="token keyword">if</span> <span class="token punctuation">(</span>pf<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Win'</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    36. 

  36.       <span class="token comment">// 说明当前是Windows操作系统</span>
    37. 

  37.       <span class="token keyword">var</span> rVersion <span class="token operator">=</span> <span class="token regex">/Windows NT (\d+).(\d)/i</span><span class="token punctuation">;</span>
    38. 

  38.       <span class="token keyword">var</span> uaResult <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>rVersion<span class="token punctuation">)</span><span class="token punctuation">;</span>
    39. 

  39.       <span class="token keyword">var</span> sVersionStr <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    40. 

  40.       <span class="token keyword">if</span> <span class="token punctuation">(</span>uaResult<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">'6'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    41. 

  41.         <span class="token keyword">if</span> <span class="token punctuation">(</span>uaResult<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    42. 

  42.           sVersionStr <span class="token operator">=</span> <span class="token string">'7'</span><span class="token punctuation">;</span> <span class="token comment">// 说明当前运行在Windows 7 中</span>
    43. 

  43.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>uaResult<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    44. 

  44.           sVersionStr <span class="token operator">=</span> <span class="token string">'8'</span><span class="token punctuation">;</span> <span class="token comment">// 说明当前运行在Windows 8 中</span>
    45. 

  45.         <span class="token punctuation">}</span>
    46. 

  46.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    47. 

  47.         sVersionStr <span class="token operator">=</span> uaResult<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    48. 

  48.       <span class="token punctuation">}</span>
    49. 

  49.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">WINDOWS</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> sVersionStr <span class="token punctuation">}</span><span class="token punctuation">;</span>
    50. 

  50.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>pf<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Mac'</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    51. 

  51.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">MACINTOSH</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Macintosh操作系统</span>
    52. 

  52.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>pf<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Linux'</span><span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    53. 

  53.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">LINUX</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// 说明当前运行在Linux操作系统</span>
    54. 

  54.     <span class="token punctuation">}</span>
    55. 

  55.     <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    56. 

  56.   <span class="token punctuation">}</span>
    57. 

  57.   platform <span class="token operator">=</span> <span class="token regex">/Windows Phone (?:OS )?([\d.]*)/</span><span class="token punctuation">;</span> <span class="token comment">// windows phone的正则表达式</span>
    58. 

  58.   result <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>platform<span class="token punctuation">)</span><span class="token punctuation">;</span>
    59. 

  59.   <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    60. 

  60.     <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">WINDOWS_PHONE</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> result<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
    61. 

  61.   <span class="token punctuation">}</span>
    62. 

  62.   <span class="token comment">// BlackBerry 10</span>
    63. 

  63.   <span class="token keyword">if</span> <span class="token punctuation">(</span>userAgent<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'(BB10;'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    64. 

  64.     platform <span class="token operator">=</span> <span class="token regex">/\sVersion\/([\d.]+)\s/</span><span class="token punctuation">;</span> <span class="token comment">// BlackBerry的regular expression</span>
    65. 

  65.     result <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>platform<span class="token punctuation">)</span><span class="token punctuation">;</span>
    66. 

  66.     <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    67. 

  67.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">BLACKBERRY</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> result<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
    68. 

  68.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    69. 

  69.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">BLACKBERRY</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> <span class="token string">'10'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
    70. 

  70.     <span class="token punctuation">}</span>
    71. 

  71.   <span class="token punctuation">}</span>
    72. 

  72.   <span class="token comment">// iOS, Android, BlackBerry 6.0+:</span>
    73. 

  73.   platform <span class="token operator">=</span> <span class="token regex">/\(([a-zA-Z ]+);\s(?:[U]?[;]?)([\D]+)((?:[\d._]*))(?:.*[\)][^\d]*)([\d.]*)\s/</span><span class="token punctuation">;</span>
    74. 

  74.   result <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>platform<span class="token punctuation">)</span><span class="token punctuation">;</span>
    75. 

  75.   <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    76. 

  76.     <span class="token keyword">var</span> appleDevices <span class="token operator">=</span> <span class="token regex">/iPhone|iPad|iPod/</span><span class="token punctuation">;</span>
    77. 

  77.     <span class="token keyword">var</span> bbDevices <span class="token operator">=</span> <span class="token regex">/PlayBook|BlackBerry/</span><span class="token punctuation">;</span>
    78. 

  78.     <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>appleDevices<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    79. 

  79.       result<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">=</span> result<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/_/g</span><span class="token punctuation">,</span> <span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    80. 

  80.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">IOS</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> result<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// iOS操作系统</span>
    81. 

  81.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/Android/</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    82. 

  82.       result<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> result<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\s/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    83. 

  83.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">ANDROID</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> result<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Android操作系统</span>
    84. 

  84.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>bbDevices<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    85. 

  85.       <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">BLACKBERRY</span><span class="token punctuation">,</span> versionStr<span class="token punctuation">:</span> result<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Blackberry</span>
    86. 

  86.     <span class="token punctuation">}</span>
    87. 

  87.   <span class="token punctuation">}</span>
    88. 

  88.   <span class="token comment">//Android平台上的Firefox浏览器</span>
    89. 

  89.   platform <span class="token operator">=</span> <span class="token regex">/\((Android)[\s]?([\d][.\d]*)?;.*Firefox\/[\d][.\d]*/</span><span class="token punctuation">;</span>
    90. 

  90.   result <span class="token operator">=</span> userAgent<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>platform<span class="token punctuation">)</span><span class="token punctuation">;</span>
    91. 

  91.   <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    92. 

  92.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    93. 

  93.       name<span class="token punctuation">:</span> <span class="token constant">OS</span><span class="token punctuation">.</span><span class="token constant">ANDROID</span><span class="token punctuation">,</span>
    94. 

  94.       versionStr<span class="token punctuation">:</span> result<span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">3</span> <span class="token operator">?</span> result<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    95. 

  95.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    96. 

  96.   <span class="token punctuation">}</span>
    97. 

  97.   <span class="token comment">// Desktop</span>
    98. 

  98.   <span class="token keyword">return</span> <span class="token function">getDesktopOS</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    99. 

  99. <span class="token punctuation">}</span>
    100. 

  100. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br></div></div><h2 id="element-元素-y-轴的-scroll-事件触发"><a href="#element-元素-y-轴的-scroll-事件触发" class="header-anchor">#</a> element 元素 Y 轴的 scroll 事件触发</h2> <h3 id="移动平台"><a href="#移动平台" class="header-anchor">#</a> 移动平台</h3> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    101. 

  101.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    102. 

  102.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>os<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>OS:{{osStr}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    103. 

  103.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>btn-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    104. 

  104.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    105. 

  105.         移动平台
    106. 

  106.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    107. 

  107.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    108. 

  108.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>enable<span class="token punctuation">&quot;</span></span>
    109. 

  109.           <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span>enableF</span><span class="token punctuation">&gt;</span></span>enable
    110. 

  110.           scrolling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    111. 

  111.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    112. 

  112.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    113. 

  113.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>disable<span class="token punctuation">&quot;</span></span>
    114. 

  114.           <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span>disableF</span><span class="token punctuation">&gt;</span></span>disable
    115. 

  115.           scrolling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    116. 

  116.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    117. 

  117.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    118. 

  118.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>status<span class="token punctuation">&quot;</span></span>
    119. 

  119.           <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>statusClassName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{enabled}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span>
    120. 

  120.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    121. 

  121.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    122. 

  122.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    123. 

  123. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    124. 

  124. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    125. 

  125. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    126. 

  126.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    127. 

  127.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    128. 

  128.       top<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    129. 

  129.       osStr<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    130. 

  130.       enabled<span class="token punctuation">:</span> <span class="token string">'enabled'</span><span class="token punctuation">,</span>
    131. 

  131.       statusClassName<span class="token punctuation">:</span> <span class="token string">'enabled'</span><span class="token punctuation">,</span>
    132. 

  132.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    133. 

  133.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    134. 

  134.   methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    135. 

  135.     <span class="token function">enableF</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    136. 

  136.       <span class="token keyword">this</span><span class="token punctuation">.</span>statusClassName <span class="token operator">=</span> <span class="token string">'enabled'</span><span class="token punctuation">;</span>
    137. 

  137.       <span class="token keyword">this</span><span class="token punctuation">.</span>enabled <span class="token operator">=</span> <span class="token string">'enabled'</span><span class="token punctuation">;</span>
    138. 

  138.       document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">'static'</span><span class="token punctuation">;</span>
    139. 

  139.       window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>top<span class="token punctuation">)</span><span class="token punctuation">;</span>
    140. 

  140.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    141. 

  141.     <span class="token function">disableF</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    142. 

  142.       <span class="token keyword">this</span><span class="token punctuation">.</span>top <span class="token operator">=</span> window<span class="token punctuation">.</span>scrollY<span class="token punctuation">;</span>
    143. 

  143.       <span class="token keyword">this</span><span class="token punctuation">.</span>statusClassName <span class="token operator">=</span> <span class="token string">'disabled'</span><span class="token punctuation">;</span>
    144. 

  144.       <span class="token keyword">this</span><span class="token punctuation">.</span>enabled <span class="token operator">=</span> <span class="token string">'disabled'</span><span class="token punctuation">;</span>
    145. 

  145.       <span class="token comment">// document.body.style.overflow = 'hidden';</span>
    146. 

  146.       document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">'fixed'</span><span class="token punctuation">;</span>
    147. 

  147.       document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>top <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
    148. 

  148.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    149. 

  149.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    150. 

  150. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    151. 

  151. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    152. 

  152. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    153. 

  153. <span class="token selector">.article</span> <span class="token punctuation">{</span>
    154. 

  154. <span class="token punctuation">}</span>
    155. 

  155. <span class="token comment">/*btn*/</span>
    156. 

  156. <span class="token selector">#btn-wrapper</span> <span class="token punctuation">{</span>
    157. 

  157.   <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    158. 

  158.   <span class="token property">z-index</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
    159. 

  159.   <span class="token property">bottom</span><span class="token punctuation">:</span> 40%<span class="token punctuation">;</span>
    160. 

  160.   <span class="token property">right</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
    161. 

  161.   <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
    162. 

  162.   <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    163. 

  163.   <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    164. 

  164. <span class="token punctuation">}</span>
    165. 

  165. <span class="token selector">#btn-wrapper &gt; div</span> <span class="token punctuation">{</span>
    166. 

  166.   <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    167. 

  167.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    168. 

  168. <span class="token punctuation">}</span>
    169. 

  169. <span class="token selector">.enabled</span> <span class="token punctuation">{</span>
    170. 

  170.   <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
    171. 

  171. <span class="token punctuation">}</span>
    172. 

  172. <span class="token selector">.disabled</span> <span class="token punctuation">{</span>
    173. 

  173.   <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    174. 

  174. <span class="token punctuation">}</span>
    175. 

  175. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    176. 

  176. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br></div></div> <h3 id="桌面环境"><a href="#桌面环境" class="header-anchor">#</a> 桌面环境</h3> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    177. 

  177.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    178. 

  178.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>btn-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    179. 

  179.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>桌面环境<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    180. 

  180.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    181. 

  181.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>enable<span class="token punctuation">&quot;</span></span>
    182. 

  182.           <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span>enableF</span><span class="token punctuation">&gt;</span></span>enable
    183. 

  183.           scrolling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    184. 

  184.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    185. 

  185.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    186. 

  186.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>disable<span class="token punctuation">&quot;</span></span>
    187. 

  187.           <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span>disableF</span><span class="token punctuation">&gt;</span></span>disable
    188. 

  188.           scrolling<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    189. 

  189.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    190. 

  190.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    191. 

  191.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>status<span class="token punctuation">&quot;</span></span>
    192. 

  192.           <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>statusClassName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{enabled}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span>
    193. 

  193.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    194. 

  194.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    195. 

  195.     <span class="token comment">&lt;!-- &lt;div class=&quot;article&quot;&gt;
    196. 

  196.       &lt;h3&gt;桨声灯影里的秦淮河&lt;/h3&gt;
    197. 

  197.       &lt;div&gt;作者：朱自清
    198. 

  198.         文章来源：&lt;a
    199. 

  199.         target=&quot;_blank&quot;
    200. 

  200.           href=&quot;https://www.thn21.com/Article/chang/weiren/mydoc004.htm&quot;&gt;会员整理&lt;/a&gt;&lt;/div&gt;
    201. 

  201.       &lt;p&gt;一九二三年八月的一晚，我和平伯同游秦淮河；平伯是初泛，我是重来了。我们雇了一只七板子，在夕阳已去，皎月方来的时候，便下了船。于是桨声汩--汩，我们开始领略那晃荡着蔷薇色的历史的秦淮河的滋味了。&lt;/p&gt;
    202. 

  202.       &lt;p&gt;秦淮河里的船，比北京万甡园，颐和园的船好，比西湖的船好，比扬州瘦西湖的船也好。这几处的船不是觉着笨，就是觉着简陋、局促；都不能引起乘客们的情韵，如秦淮河的船一样。秦淮河的船约略可分为两种：一是大船；一是小船，就是所谓七板子。大船舱口阔大，可容二三十人。里面陈设着字画和光洁的红木家具，桌上一律嵌着冰凉的大理石面。窗格雕镂颇细，使人起柔腻之感。窗格里映着红色蓝色的玻璃；玻璃上有精致的花纹，也颇悦人目。七板子规模虽不及大船，但那淡蓝色的栏干，空敞的舱，也足系人情思。而最出色处却在它的舱前。舱前是甲板上的一部。上面有弧形的顶，两边用疏疏的栏干支着。里面通常放着两张藤的躺椅。躺下，可以谈天，可以望远，可以顾盼两岸的河房。大船上也有这个，便在小船上更觉清隽罢了。舱前的顶下，一律悬着灯彩；灯的多少，明暗，彩苏的精粗，艳晦，是不一的。但好歹总还你一个灯彩。这灯彩实在是最能钩人的东西。夜幕垂垂地下来时，大小船上都点起灯火。从两重玻璃里映出那辐射着的黄黄的散光，反晕出一片朦胧的烟霭；透过这烟霭，在黯黯的水波里，又逗起缕缕的明漪。在这薄霭和微漪里，听着那悠然的间歇的桨声，谁能不被引入他的美梦去呢？只愁梦太多了，这些大小船儿如何载得起呀？我们这时模模糊糊的谈着明末的秦淮河的艳迹，如《桃花扇》及《板桥杂记》里所载的。我们真神往了。我们仿佛亲见那时华灯映水，画舫凌波的光景了。于是我们的船便成了历史的重载了。我们终于恍然秦淮河的船所以雅丽过于他处，而又有奇异的吸引力的，实在是许多历史的影象使然了。&lt;/p&gt;
    203. 

  203.       &lt;p&gt;秦淮河的水是碧阴阴的；看起来厚而不腻，或者是六朝金粉所凝么？我们初上船的时候，天色还未断黑，那漾漾的柔波是这样的恬静，委婉，使我们一面有水阔天空之想，一面又憧憬着纸醉金迷之境了。等到灯火明时，阴阴的变为沉沉了：黯淡的水光，像梦一般；那偶然闪烁着的光芒，就是梦的眼睛了。我们坐在舱前，因了那隆起的顶棚，仿佛总是昂着首向前走着似的；于是飘飘然如御风而行的我们，看着那些自在的湾泊着的船，船里走马灯般的人物，便像是下界一般，迢迢的远了，又像在雾里看花，尽朦朦胧胧的。这时我们已过了利涉桥，望见东关头了。沿路听见断续的歌声：有从沿河的妓楼飘来的，有从河上船里度来的。我们明知那些歌声，只是些因袭的言词，从生涩的歌喉里机械的发出来的；但它们经了夏夜的微风的吹漾和水波的摇拂，袅娜着到我们耳边的时候，已经不单是她们的歌声，而混着微风和河水的密语了。于是我们不得不被牵惹着，震撼着，相与浮沉于这歌声里了。从东关头转湾，不久就到大中桥。大中桥共有三个桥拱，都很阔大，俨然是三座门儿；使我们觉得我们的船和船里的我们，在桥下过去时，真是太无颜色了。桥砖是深褐色，表明它的历史的长久；但都完好无缺，令人太息于古昔工程的坚美。桥上两旁都是木壁的房子，中间应该有街路？这些房子都破旧了，多年烟熏的迹，遮没了当年的美丽。我想象秦淮河的极盛时，在这样宏阔的桥上，特地盖了房子，必然是髹漆得富富丽丽的；晚间必然是灯火通明的。现在却只剩下一片黑沉沉！但是桥上造着房子，毕竟使我们多少可以想见往日的繁华；这也慰情聊胜无了。过了大中桥，便到了灯月交辉，笙歌彻夜的秦淮河；这才是秦淮河的真面目哩。&lt;/p&gt;
    204. 

  204.       &lt;p&gt;大中桥外，顿然空阔，和桥内两岸排着密密的人家的大异了。一眼望去，疏疏的林，淡淡的月，衬着蓝蔚的天，颇像荒江野渡光景；那边呢，郁丛丛的，阴森森的，又似乎藏着无边的黑暗：令人几乎不信那是繁华的秦淮河了。但是河中眩晕着的灯光，纵横着的画舫，悠扬着的笛韵，夹着那吱吱的胡琴声，终于使我们认识绿如茵陈酒的秦淮水了。此地天裸露着的多些，故觉夜来的独迟些；从清清的水影里，我们感到的只是薄薄的夜--这正是秦淮河的夜。大中桥外，本来还有一座复成桥，是船夫口中的我们的游踪尽处，或也是秦淮河繁华的尽处了。我的脚曾踏过复成桥的脊，在十三四岁的时候。但是两次游秦淮河，却都不曾见着复成桥的面；明知总在前途的，却常觉得有些虚无缥缈似的。我想，不见倒也好。这时正是盛夏。我们下船后，借着新生的晚凉和河上的微风，暑气已渐渐销散；到了此地，豁然开朗，身子顿然轻了--习习的清风荏苒在面上，手上，衣上，这便又感到了一缕新凉了。南京的日光，大概没有杭州猛烈；西湖的夏夜老是热蓬蓬的，水像沸着一般，秦淮河的水却尽是这样冷冷地绿着。任你人影的憧憧，歌声的扰扰，总像隔着一层薄薄的绿纱面幂似的；它尽是这样静静的，冷冷的绿着。我们出了大中桥，走不上半里路，船夫便将船划到一旁，停了桨由它宕着。他以为那里正是繁华的极点，再过去就是荒凉了；所以让我们多多赏鉴一会儿。他自己却静静的蹲着。他是看惯这光景的了，大约只是一个无可无不可。这无可无不可，无论是升的沉的，总之，都比我们高了。&lt;/p&gt;
    205. 

  205.       &lt;p&gt;那时河里闹热极了；船大半泊着，小半在水上穿梭似的来往。停泊着的都在近市的那一边，我们的船自然也夹在其中。因为这边略略的挤，便觉得那边十分的疏了。在每一只船从那边过去时，我们能画出它的轻轻的影和曲曲的波，在我们的心上；这显着是空，且显着是静了。那时处处都是歌声和凄厉的胡琴声，圆润的喉咙，确乎是很少的。但那生涩的，尖脆的调子能使人有少年的，粗率不拘的感觉，也正可快我们的意。况且多少隔开些儿听着，因为想象与渴慕的做美，总觉更有滋味；而竞发的喧嚣，抑扬的不齐，远近的杂沓，和乐器的嘈嘈切切，合成另一意味的谐音，也使我们无所适从，如随着大风而走。这实在因为我们的心枯涩久了，变为脆弱；故偶然润泽一下，便疯狂似的不能自主了。但秦淮河确也腻人。即如船里的人面，无论是和我们一堆儿泊着的，无论是从我们眼前过去的，总是模模糊糊的，甚至渺渺茫茫的；任你张圆了眼睛，揩净了眦垢，也是枉然。这真够人想呢。在我们停泊的地方，灯光原是纷然的；不过这些灯光都是黄而有晕的。黄已经不能明了，再加上了晕，便更不成了。灯愈多，晕就愈甚；在繁星般的黄的交错里，秦淮河仿佛笼上了一团光雾。光芒与雾气腾腾的晕着，什么都只剩了轮廓了；所以人面的详细的曲线，便消失于我们的眼底了。但灯光究竟夺不了那边的月色；灯光是浑的，月色是清的，在浑沌的灯光里，渗入了一派清辉，却真是奇迹！那晚月儿已瘦削了两三分。她晚妆才罢，盈盈的上了柳梢头。天是蓝得可爱，仿佛一汪水似的；月儿便更出落得精神了。岸上原有三株两株的垂杨树，淡淡的影子，在水里摇曳着。它们那柔细的枝条浴着月光，就像一支支美人的臂膊，交互的缠着，挽着；又像是月儿披着的发。而月儿偶然也从它们的交叉处偷偷窥看我们，大有小姑娘怕羞的样子。岸上另有几株不知名的老树，光光的立着；在月光里照起来。却又俨然是精神矍铄的老人。远处--快到天际线了，才有一两片白云，亮得现出异彩，像美丽的贝壳一般。白云下便是黑黑的一带轮廓；是一条随意画的不规则的曲线。这一段光景，和河中的风味大异了。但灯与月竟能并存着，交融着，使月成了缠绵的月，灯射着渺渺的灵辉；这正是天之所以厚秦淮河，也正是天之所以厚我们了。&lt;/p&gt;
    206. 

  206.       &lt;p&gt;这时却遇着了难解的纠纷。秦淮河上原有一种歌妓，是以歌为业的。从前都在茶舫上，唱些大曲之类。每日午后一时起；什么时候止，却忘记了。晚上照样也有一回。也在黄晕的灯光里。我从前过南京时，曾随着朋友去听过两次。因为茶舫里的人脸太多了，觉得不大适意，终于听不出所以然。前年听说歌妓被取缔了，不知怎的，颇涉想了几次--却想不出什么。这次到南京，先到茶舫上去看看，觉得颇是寂寥，令我无端的怅怅了。不料她们却仍在秦淮河里挣扎着，不料她们竟会纠缠到我们，我于是很张皇了。她们也乘着七板子，她们总是坐在舱前的。舱前点着石油汽灯，光亮眩人眼目：坐在下面的，自然是纤毫毕见了--引诱客人们的力量，也便在此了。舱里躲着乐工等人，映着汽灯的余辉蠕动着；他们是永远不被注意的。每船的歌妓大约都是二人；天色一黑。她们的船就在大中桥外往来不息的兜生意。无论行着的船，泊着的船，都要来兜揽的。这都是我后来推想出来的。那晚不知怎样，忽然轮着我们的船了。我们的船好好的停着，一只歌舫划向我们来的；渐渐和我们的船并着了。铄铄的灯光逼得我们皱起了眉头；我们的风尘色全给它托出来了，这使我踧踖不安了。那时一个伙计跨过船来，拿着摊开的歌折，就近塞向我的手里，说，点几出吧！他跨过来的时候，我们船上似乎有许多眼光跟着。同时相近的别的船上也似乎有许多眼睛炯炯的向我们船上看着。我真窘了！我也装出大方的样子，向歌妓们瞥了一眼，但究竟是不成的！我勉强将那歌折翻了一翻，却不曾看清了几个字；便赶紧递还那伙计，一面不好意思地说，不要，我们......不要。他便塞给平伯。平伯掉转头去，摇手说，不要！那人还腻着不走。平伯又回过脸来，摇着头道，不要！于是那人重到我处。我窘着再拒绝了他。他这才有所不屑似的走了。我的心立刻放下，如释了重负一般。我们就开始自白了。&lt;/p&gt;
    207. 

  207.       &lt;p&gt;我说我受了道德律的压迫，拒绝了她们；心里似乎很抱歉的。这所谓抱歉，一面对于她们，一面对于我自己。她们于我们虽然没有很奢的希望；但总有些希望的。我们拒绝了她们，无论理由如何充足，却使她们的希望受了伤；这总有几分不做美了。这是我觉得很怅怅的。至于我自己，更有一种不足之感。我这时被四面的歌声诱惑了，降服了；但是远远的，远远的歌声总仿佛隔着重衣搔痒似的，越搔越搔不着痒处。我于是憧憬着贴耳的妙音了。在歌舫划来时，我的憧憬，变为盼望；我固执的盼望着，有如饥渴。虽然从浅薄的经验里，也能够推知，那贴耳的歌声，将剥去了一切的美妙；但一个平常的人像我的，谁愿凭了理性之力去丑化未来呢？我宁愿自己骗着了。不过我的社会感性是很敏锐的；我的思力能拆穿道德律的西洋镜，而我的感情却终于被它压服着，我于是有所顾忌了，尤其是在众目昭彰的时候。道德律的力，本来是民众赋予的；在民众的面前，自然更显出它的威严了。我这时一面盼望，一面却感到了两重的禁制：一，在通俗的意义上，接近妓者总算一种不正当的行为；二，妓是一种不健全的职业，我们对于她们，应有哀矜勿喜之心，不应赏玩的去听她们的歌。在众目睽睽之下，这两种思想在我心里最为旺盛。她们暂时压倒了我的听歌的盼望，这便成就了我的灰色的拒绝。那时的心实在异常状态中，觉得颇是昏乱。歌舫去了，暂时宁靖之后，我的思绪又如潮涌了。两个相反的意思在我心头往复：卖歌和卖淫不同，听歌和狎妓不同，又干道德甚事？--但是，但是，她们既被逼的以歌为业，她们的歌必无艺术味的；况她们的身世，我们究竟该同情的。所以拒绝倒也是正办。但这些意思终于不曾撇开我的听歌的盼望。它力量异常坚强；它总想将别的思绪踏在脚下。从这重重的争斗里，我感到了浓厚的不足之感。这不足之感使我的心盘旋不安，起坐都不安宁了。唉！我承认我是一个自私的人！平伯呢，却与我不同。他引周启明先生的诗，因为我有妻子，所以我爱一切的女人，因为我有子女，所以我爱一切的孩子。①&lt;/p&gt;
    208. 

  208.       &lt;p&gt;①原诗是，我为了自己的儿女才爱小孩子，为了自己的妻才爱女人，见《雪朝》第４８页。他的意思可以见了。&lt;/p&gt;
    209. 

  209.       &lt;p&gt;他因为推及的同情，爱着那些歌妓，并且尊重着她们，所以拒绝了她们。在这种情形下，他自然以为听歌是对于她们的一种侮辱。但他也是想听歌的，虽然不和我一样，所以在他的心中，当然也有一番小小的争斗；争斗的结果，是同情胜了。至于道德律，在他是没有什么的；因为他很有蔑视一切的倾向，民众的力量在他是不大觉着的。这时他的心意的活动比较简单，又比较松弱，故事后还怡然自若；我却不能了。这里平伯又比我高了。&lt;/p&gt;
    210. 

  210.       &lt;p&gt;在我们谈话中间，又来了两只歌舫。伙计照前一样的请我们点戏，我们照前一样的拒绝了。我受了三次窘，心里的不安更甚了。清艳的夜景也为之减色。船夫大约因为要赶第二趟生意，催着我们回去；我们无可无不可的答应了。我们渐渐和那些晕黄的灯光远了，只有些月色冷清清的随着我们的归舟。我们的船竟没个伴儿，秦淮河的夜正长哩！到大中桥近处，才遇着一只来船。这是一只载妓的板船，黑漆漆的没有一点光。船头上坐着一个妓女；暗里看出，白地小花的衫子，黑的下衣。她手里拉着胡琴，口里唱着青衫的调子。她唱得响亮而圆转；当她的船箭一般驶过去时，余音还袅袅的在我们耳际，使我们倾听而向往。想不到在弩末的游踪里，还能领略到这样的清歌！这时船过大中桥了，森森的水影，如黑暗张着巨口，要将我们的船吞了下去，我们回顾那渺渺的黄光，不胜依恋之情；我们感到了寂寞了！这一段地方夜色甚浓，又有两头的灯火招邀着；桥外的灯火不用说了，过了桥另有东关头疏疏的灯火。我们忽然仰头看见依人的素月，不觉深悔归来之早了！走过东关头，有一两只大船湾泊着，又有几只船向我们来着。嚣嚣的一阵歌声人语，仿佛笑我们无伴的孤舟哩。东关头转湾，河上的夜色更浓了；临水的妓楼上，时时从帘缝里射出一线一线的灯光；仿佛黑暗从酣睡里眨了一眨眼。我们默然的对着，静听那汩--汩的桨声，几乎要入睡了；朦胧里却温寻着适才的繁华的余味。我那不安的心在静里愈显活跃了！这时我们都有了不足之感，而我的更其浓厚。我们却只不愿回去，于是只能由懊悔而怅惘了。船里便满载着怅惘了。直到利涉桥下，微微嘈杂的人声，才使我豁然一惊；那光景却又不同。右岸的河房里，都大开了窗户，里面亮着晃晃的电灯，电灯的光射到水上，蜿蜒曲折，闪闪不息，正如跳舞着的仙女的臂膊。我们的船已在她的臂膊里了；如睡在摇篮里一样，倦了的我们便又入梦了。那电灯下的人物，只觉像蚂蚁一般，更不去萦念。这是最后的梦；可惜是最短的梦！黑暗重复落在我们面前，我们看见傍岸的空船上一星两星的，枯燥无力又摇摇不定的灯光。我们的梦醒了，我们知道就要上岸了；我们心里充满了幻灭的情思。&lt;/p&gt;
    211. 

  211.       &lt;p&gt;１９２３年１０月１１日作完，于温州。&lt;p&gt;（原载１９２４年１月２５日《东方杂志》第２１卷第２号２０周年纪念号）&lt;/p&gt;
    212. 

  212.     &lt;/div&gt; --&gt;</span>
    213. 

  213.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    214. 

  214. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    215. 

  215. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    216. 

  216. <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    217. 

  217.   <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    218. 

  218.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    219. 

  219.       top<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    220. 

  220.       enabled<span class="token punctuation">:</span> <span class="token string">'enabled'</span><span class="token punctuation">,</span>
    221. 

  221.       statusClassName<span class="token punctuation">:</span> <span class="token string">'enabled'</span><span class="token punctuation">,</span>
    222. 

  222.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    223. 

  223.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    224. 

  224.   methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    225. 

  225.     <span class="token function">enableF</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    226. 

  226.       <span class="token keyword">this</span><span class="token punctuation">.</span>statusClassName <span class="token operator">=</span> <span class="token string">'enabled'</span><span class="token punctuation">;</span>
    227. 

  227.       <span class="token keyword">this</span><span class="token punctuation">.</span>enabled <span class="token operator">=</span> <span class="token string">'enabled'</span><span class="token punctuation">;</span>
    228. 

  228.       <span class="token comment">//</span>
    229. 

  229.       <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>removeEventListener<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    230. 

  230.         window<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMMouseScroll'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    231. 

  231.       <span class="token punctuation">}</span>
    232. 

  232.       window<span class="token punctuation">.</span>onmousewheel <span class="token operator">=</span> document<span class="token punctuation">.</span>onmousewheel <span class="token operator">=</span> document<span class="token punctuation">.</span>onkeydown <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    233. 

  233.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    234. 

  234.     <span class="token function">disableF</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    235. 

  235.       <span class="token keyword">this</span><span class="token punctuation">.</span>top <span class="token operator">=</span> window<span class="token punctuation">.</span>scrollY<span class="token punctuation">;</span>
    236. 

  236.       <span class="token keyword">this</span><span class="token punctuation">.</span>statusClassName <span class="token operator">=</span> <span class="token string">'disabled'</span><span class="token punctuation">;</span>
    237. 

  237.       <span class="token keyword">this</span><span class="token punctuation">.</span>enabled <span class="token operator">=</span> <span class="token string">'disabled'</span><span class="token punctuation">;</span>
    238. 

  238.       <span class="token comment">//</span>
    239. 

  239.       <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    240. 

  240.         window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMMouseScroll'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    241. 

  241.       <span class="token punctuation">}</span>
    242. 

  242.       window<span class="token punctuation">.</span>onmousewheel <span class="token operator">=</span> document<span class="token punctuation">.</span>onmousewheel <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">;</span>
    243. 

  243.       document<span class="token punctuation">.</span>onkeydown <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keydown<span class="token punctuation">;</span>
    244. 

  244.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    245. 

  245.     <span class="token function">wheel</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    246. 

  246.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    247. 

  247.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    248. 

  248.     <span class="token comment">// 阻止冒泡事件传递</span>
    249. 

  249.     <span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    250. 

  250.       e <span class="token operator">=</span> e <span class="token operator">||</span> window<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
    251. 

  251.       <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>preventDefault<span class="token punctuation">)</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    252. 

  252.       e<span class="token punctuation">.</span>returnValue <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    253. 

  253.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    254. 

  254.     <span class="token comment">// 阻止键盘移动网页</span>
    255. 

  255.     <span class="token function">keydown</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    256. 

  256.       <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keys<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">;</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    257. 

  257.         <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keys<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    258. 

  258.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
    259. 

  259.           <span class="token keyword">return</span><span class="token punctuation">;</span>
    260. 

  260.         <span class="token punctuation">}</span>
    261. 

  261.       <span class="token punctuation">}</span>
    262. 

  262.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    263. 

  263.   <span class="token punctuation">}</span><span class="token punctuation">,</span>
    264. 

  264. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    265. 

  265. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    266. 

  266. 

  267. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    268. 

  268. <span class="token selector">.article p</span> <span class="token punctuation">{</span>
    269. 

  269.   <span class="token property">text-indent</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
    270. 

  270. <span class="token punctuation">}</span>
    271. 

  271. <span class="token comment">/*btn*/</span>
    272. 

  272. <span class="token selector">#btn-wrapper</span> <span class="token punctuation">{</span>
    273. 

  273.   <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    274. 

  274.   <span class="token property">z-index</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
    275. 

  275.   <span class="token property">bottom</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
    276. 

  276.   <span class="token property">right</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
    277. 

  277.   <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
    278. 

  278.   <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
    279. 

  279.   <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    280. 

  280. <span class="token punctuation">}</span>
    281. 

  281. <span class="token selector">#btn-wrapper &gt; div</span> <span class="token punctuation">{</span>
    282. 

  282.   <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    283. 

  283.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    284. 

  284. <span class="token punctuation">}</span>
    285. 

  285. <span class="token selector">.enabled</span> <span class="token punctuation">{</span>
    286. 

  286.   <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
    287. 

  287. <span class="token punctuation">}</span>
    288. 

  288. <span class="token selector">.disabled</span> <span class="token punctuation">{</span>
    289. 

  289.   <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    290. 

  290. <span class="token punctuation">}</span>
    291. 

  291. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    292. 

  292. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br></div></div> <h2 id="节点的操作"><a href="#节点的操作" class="header-anchor">#</a> 节点的操作</h2> <p><a href="https://blog.csdn.net/laok_/article/details/75760572" target="_blank" rel="noopener noreferrer">(转载)S 获取子节点、父节点和兄弟节点的若干种方式<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h3 id="一、js-获取子节点的方式"><a href="#一、js-获取子节点的方式" class="header-anchor">#</a> 一、js 获取子节点的方式</h3> <h4 id="_1-通过获取-dom-方式直接获取子节点"><a href="#_1-通过获取-dom-方式直接获取子节点" class="header-anchor">#</a> 1.通过获取 dom 方式直接获取子节点</h4> <p>其中 test 的父标签 id 的值，div 为标签的名字。getElementsByTagName 是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    293. 

  293. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_2-通过-childnodes-获取子节点"><a href="#_2-通过-childnodes-获取子节点" class="header-anchor">#</a> 2.通过 childNodes 获取子节点</h4> <p>使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> b <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
    294. 

  294. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>为了不显示不必须的换行的空格，我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//去掉换行的空格</span>
    295. 

  295. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> b<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    296. 

  296.   <span class="token keyword">if</span> <span class="token punctuation">(</span>b<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>nodeName <span class="token operator">==</span> <span class="token string">'#text'</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token regex">/\s/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>nodeValue<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    297. 

  297.     document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>b<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    298. 

  298.   <span class="token punctuation">}</span>
    299. 

  299. <span class="token punctuation">}</span>
    300. 

  300. <span class="token comment">//打印测试</span>
    301. 

  301. <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> b<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    302. 

  302.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token string">'---------'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    303. 

  303.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    304. 

  304. <span class="token punctuation">}</span>
    305. 

  305. <span class="token comment">//补充 document.getElementById(&quot;test&quot;).childElementCount;  可以直接获取长度 同length</span>
    306. 

  306. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h4 id="_4-通过-children-来获取子节点"><a href="#_4-通过-children-来获取子节点" class="header-anchor">#</a> 4.通过 children 来获取子节点</h4> <p>利用 children 来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> getFirstChild <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    307. 

  307. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_5-获取第一个子节点"><a href="#_5-获取第一个子节点" class="header-anchor">#</a> 5.获取第一个子节点</h4> <p>firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？？其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和 childNodes 一样处理呀。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> getFirstChild <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    308. 

  308. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_6-firstelementchild-获取第一个子节点"><a href="#_6-firstelementchild-获取第一个子节点" class="header-anchor">#</a> 6.firstElementChild 获取第一个子节点</h4> <p>使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> getFirstChild <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;</span>
    309. 

  309. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_7-获取最后一个子节点"><a href="#_7-获取最后一个子节点" class="header-anchor">#</a> 7.获取最后一个子节点</h4> <p>lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> getLastChildA <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>lastChild<span class="token punctuation">;</span>
    310. 

  310. <span class="token keyword">var</span> getLastChildB <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>lastElementChild<span class="token punctuation">;</span>
    311. 

  311. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="二、js-获取父节点的方式"><a href="#二、js-获取父节点的方式" class="header-anchor">#</a> 二、js 获取父节点的方式</h3> <h4 id="_1-parentnode-获取父节点"><a href="#_1-parentnode-获取父节点" class="header-anchor">#</a> 1.parentNode 获取父节点</h4> <p>获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">;</span>
    312. 

  312. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_2-parentelement-获取父节点"><a href="#_2-parentelement-获取父节点" class="header-anchor">#</a> 2.parentElement 获取父节点</h4> <p>parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>parentElement<span class="token punctuation">;</span>
    313. 

  313. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_3-offsetparent-获取所有父节点"><a href="#_3-offsetparent-获取所有父节点" class="header-anchor">#</a> 3.offsetParent 获取所有父节点</h4> <p>一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> p2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>offsetParent<span class="token punctuation">;</span>
    314. 

  314. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="三、js-获取兄弟节点的方式"><a href="#三、js-获取兄弟节点的方式" class="header-anchor">#</a> 三、js 获取兄弟节点的方式</h3> <h4 id="_1-通过获取父亲节点再获取子节点来获取兄弟节点"><a href="#_1-通过获取父亲节点再获取子节点来获取兄弟节点" class="header-anchor">#</a> 1.通过获取父亲节点再获取子节点来获取兄弟节点</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> brother1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    315. 

  315. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="_2-获取上一个兄弟节点"><a href="#_2-获取上一个兄弟节点" class="header-anchor">#</a> 2.获取上一个兄弟节点</h4> <p>在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling 则直接匹配节点。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> brother2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>previousElementSibling<span class="token punctuation">;</span>
    316. 

  316. <span class="token keyword">var</span> brother3 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>previousSibling<span class="token punctuation">;</span>
    317. 

  317. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="_3-获取下一个兄弟节点"><a href="#_3-获取下一个兄弟节点" class="header-anchor">#</a> 3.获取下一个兄弟节点</h4> <p>同 previousSibling 和 previousElementSibling，nextSibling 和 nextElementSibling 也是类似的。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> brother4 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>nextElementSibling<span class="token punctuation">;</span>
    318. 

  318. <span class="token keyword">var</span> brother5 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>nextSibling<span class="token punctuation">;</span>
    319. 

  319. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><hr> <p>作者：-老 K-<br>
    320. 

  320. 来源：CSDN<br>
    321. 

  321. 原文：<a href="https://blog.csdn.net/laok_/article/details/75760572" target="_blank" rel="noopener noreferrer">https://blog.csdn.net/laok_/article/details/75760572<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><br>
    322. 

  322. 版权声明：本文为博主原创文章，转载请附上博文链接！<br></p> <hr> <h2 id="原生-ajax-学习"><a href="#原生-ajax-学习" class="header-anchor">#</a> 原生 Ajax 学习</h2> <ul><li><a href="https://zacklive.com/javascript-dom-ajax/" target="_blank" rel="noopener noreferrer">https://zacklive.com/javascript-dom-ajax/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://segmentfault.com/a/1190000004322487" target="_blank" rel="noopener noreferrer">你真的会使用 XMLHttpRequest 吗？<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br></p> <h4 id="检测并兼容所有浏览器包括-ie7-之流的远古浏览器中是否存在-xhr-对象"><a href="#检测并兼容所有浏览器包括-ie7-之流的远古浏览器中是否存在-xhr-对象" class="header-anchor">#</a> 检测并兼容所有浏览器包括 IE7 之流的远古浏览器中是否存在 XHR 对象</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">createXHR</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    323. 

  323.   <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> XMLHttpRequset <span class="token operator">!=</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    324. 

  324.     <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    325. 

  325.   <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> ActiveXobject <span class="token operator">!=</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    326. 

  326.     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> arguments<span class="token punctuation">.</span>callee<span class="token punctuation">.</span>activeXString <span class="token operator">!=</span> <span class="token string">'string'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    327. 

  327.       <span class="token keyword">var</span> versions <span class="token operator">=</span> <span class="token punctuation">[</span>
    328. 

  328.           <span class="token string">'MSXML2.XMLHttp.6.0'</span><span class="token punctuation">,</span>
    329. 

  329.           <span class="token string">'MSXML2.XMLHttp.3.0'</span><span class="token punctuation">,</span>
    330. 

  330.           <span class="token string">'MSXML2.XMLHttp'</span><span class="token punctuation">,</span>
    331. 

  331.         <span class="token punctuation">]</span><span class="token punctuation">,</span>
    332. 

  332.         i<span class="token punctuation">,</span>
    333. 

  333.         len<span class="token punctuation">;</span>
    334. 

  334.       <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> versions<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    335. 

  335.         <span class="token keyword">try</span> <span class="token punctuation">{</span>
    336. 

  336.           <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span>versions<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    337. 

  337.           arguments<span class="token punctuation">.</span>callee<span class="token punctuation">.</span>activeXString <span class="token operator">=</span> versions<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    338. 

  338.           <span class="token keyword">break</span><span class="token punctuation">;</span>
    339. 

  339.         <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>ex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    340. 

  340.           <span class="token comment">// 跳过</span>
    341. 

  341.         <span class="token punctuation">}</span>
    342. 

  342.       <span class="token punctuation">}</span>
    343. 

  343.     <span class="token punctuation">}</span>
    344. 

  344.     <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>callee<span class="token punctuation">.</span>activeXString<span class="token punctuation">)</span><span class="token punctuation">;</span>
    345. 

  345.   <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    346. 

  346.     <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'No XHR object available'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    347. 

  347.   <span class="token punctuation">}</span>
    348. 

  348. <span class="token punctuation">}</span>
    349. 

  349. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h4 id="创建-xhr-对象"><a href="#创建-xhr-对象" class="header-anchor">#</a> 创建 XHR 对象</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token function">createXHR</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    350. 

  350. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
    351. 

  351.  * xhr对象中的open参数设定
    352. 

  352.  * @param {string} method   要使用的HTTP方法，比如「GET」、「POST」、
    353. 

  353.  *                          「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
    354. 

  354.  * @param {string} url      一个DOMString表示要向其发送请求的URL。
    355. 

  355.  * @param {Boolean} async   可选;一个可选的布尔参数，默认为true，表示要不要异步执行操作。
    356. 

  356.  *                          如果值为false，send()方法直到收到答复前不会返回。如果true，
    357. 

  357.  *                          已完成事务的通知可供事件监听器使用。
    358. 

  358.  *                          如果multipart属性为true则这个必须为true，否则将引发异常。
    359. 

  359.  * @param {String} user     可选.可选的用户名用于认证用途；默认为null。
    360. 

  360.  * @param {String} password 可选的密码用于认证用途，默认为null。
    361. 

  361.  */</span>
    362. 

  362. <span class="token comment">// 语法</span>
    363. 

  363. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
    364. 

  364. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> async<span class="token punctuation">)</span><span class="token punctuation">;</span>
    365. 

  365. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> async<span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span>
    366. 

  366. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> async<span class="token punctuation">,</span> user<span class="token punctuation">,</span> password<span class="token punctuation">)</span><span class="token punctuation">;</span>
    367. 

  367. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'example.txt'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    368. 

  368. xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    369. 

  369. 

  370. <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">200</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token operator">||</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">304</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    371. 

  371.   <span class="token function">alert</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
    372. 

  372. <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    373. 

  373.   <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Request was unsuccessful: '</span> <span class="token operator">+</span> xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
    374. 

  374. <span class="token punctuation">}</span>
    375. 

  375. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="readystate"><a href="#readystate" class="header-anchor">#</a> readyState</h3> <table><thead><tr><th style="text-align:center;">状态码</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:center;">0</td> <td style="text-align:left;">未初始化.尚未调用 open()方法</td></tr> <tr><td style="text-align:center;">1</td> <td style="text-align:left;">启动。已经调用 open()方法，但尚未调用 send()方法。</td></tr> <tr><td style="text-align:center;">2</td> <td style="text-align:left;">发送。已经调用 send()方法，但尚未接收到响应。</td></tr> <tr><td style="text-align:center;">3</td> <td style="text-align:left;">接收。已经接收到部分响应数据。</td></tr> <tr><td style="text-align:center;">4</td> <td style="text-align:left;">完成。已经接收到全部响应数据，而且已经可以在客户端使用了。</td></tr></tbody></table> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token function">createXHR</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    376. 

  376. xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    377. 

  377.   <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    378. 

  378.     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">200</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token operator">||</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">304</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    379. 

  379.       <span class="token function">alert</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
    380. 

  380.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    381. 

  381.       <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Request was unsuccessful: '</span> <span class="token operator">+</span> xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
    382. 

  382.     <span class="token punctuation">}</span>
    383. 

  383.   <span class="token punctuation">}</span>
    384. 

  384. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    385. 

  385. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'example.txt'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    386. 

  386. xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    387. 

  387. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="http-头部信息"><a href="#http-头部信息" class="header-anchor">#</a> HTTP 头部信息</h3> <ul><li>可使用<code>setRequestHeader()</code>方法可以设置自定义的请求头部信息</li></ul> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">说明</th></tr></thead> <tbody><tr><td style="text-align:left;">Accept</td> <td style="text-align:left;">浏览器能够处理的内容类型。</td></tr> <tr><td style="text-align:left;">Accept-Charset</td> <td style="text-align:left;">浏览器能够显示的字符集。</td></tr> <tr><td style="text-align:left;">Accept-Encoding</td> <td style="text-align:left;">浏览器能够处理的压缩编码。</td></tr> <tr><td style="text-align:left;">Accept-Language</td> <td style="text-align:left;">浏览器当前设置的语言。</td></tr> <tr><td style="text-align:left;">Connection</td> <td style="text-align:left;">浏览器与服务器之间连接的类型。</td></tr> <tr><td style="text-align:left;">Cookie</td> <td style="text-align:left;">当前页面设置的任何 Cookie。</td></tr> <tr><td style="text-align:left;">Host</td> <td style="text-align:left;">发出请求的页面所在的域 。</td></tr> <tr><td style="text-align:left;">Referer</td> <td style="text-align:left;">发出请求的页面的 URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）</td></tr> <tr><td style="text-align:left;">User-Agent</td> <td style="text-align:left;">浏览器的用户代理字符串。</td></tr></tbody></table> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token function">createXHR</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    388. 

  388. xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    389. 

  389.   <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    390. 

  390.     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">200</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token operator">||</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">304</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    391. 

  391.       <span class="token function">alert</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
    392. 

  392.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    393. 

  393.       <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Request was unsuccessful: '</span> <span class="token operator">+</span> xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
    394. 

  394.     <span class="token punctuation">}</span>
    395. 

  395.   <span class="token punctuation">}</span>
    396. 

  396. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    397. 

  397. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'example.php'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    398. 

  398. xhr<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">'MyHeader'</span><span class="token punctuation">,</span> <span class="token string">'MyValue'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    399. 

  399. xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    400. 

  400. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="get-请求"><a href="#get-请求" class="header-anchor">#</a> GET 请求</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 语法</span>
    401. 

  401. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'example.php?name1=value1&amp;name2=value2'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    402. 

  402. <span class="token comment">// 向现有URL的末尾添加查询字符串参数</span>
    403. 

  403. <span class="token keyword">function</span> <span class="token function">addURLParam</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> name<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    404. 

  404.   url <span class="token operator">+=</span> url<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'?'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token string">'?'</span> <span class="token punctuation">:</span> <span class="token string">'&amp;'</span><span class="token punctuation">;</span>
    405. 

  405.   url <span class="token operator">+=</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'='</span> <span class="token operator">+</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    406. 

  406.   <span class="token keyword">return</span> url<span class="token punctuation">;</span>
    407. 

  407. <span class="token punctuation">}</span>
    408. 

  408. <span class="token comment">// 使用</span>
    409. 

  409. <span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token string">'example.php'</span><span class="token punctuation">;</span>
    410. 

  410. <span class="token comment">//添加参数</span>
    411. 

  411. url <span class="token operator">=</span> <span class="token function">addURLParam</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'Nicholas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    412. 

  412. url <span class="token operator">=</span> <span class="token function">addURLParam</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token string">'book'</span><span class="token punctuation">,</span> <span class="token string">'Professional	JavaScript'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    413. 

  413. <span class="token comment">//初始化请求</span>
    414. 

  414. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span> url<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    415. 

  415. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="post-请求"><a href="#post-请求" class="header-anchor">#</a> POST 请求</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 语法</span>
    416. 

  416. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token string">'example.php'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    417. 

  417. <span class="token comment">// 数据序列化,并提交</span>
    418. 

  418. <span class="token keyword">function</span> <span class="token function">submitData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    419. 

  419.   <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token function">createXHR</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    420. 

  420.   xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    421. 

  421.     <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    422. 

  422.       <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">200</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token operator">||</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">304</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    423. 

  423.         <span class="token function">alert</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
    424. 

  424.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    425. 

  425.         <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Request	was	unsuccessful:	'</span> <span class="token operator">+</span> xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
    426. 

  426.       <span class="token punctuation">}</span>
    427. 

  427.     <span class="token punctuation">}</span>
    428. 

  428.   <span class="token punctuation">}</span><span class="token punctuation">;</span>
    429. 

  429.   xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token string">'postexample.php'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    430. 

  430.   xhr<span class="token punctuation">.</span><span class="token function">setRequestHeader</span><span class="token punctuation">(</span><span class="token string">'Content-Type'</span><span class="token punctuation">,</span> <span class="token string">'application/x-www-form-urlencoded'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    431. 

  431.   <span class="token keyword">var</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'user-info'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    432. 

  432.   xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token function">serialize</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    433. 

  433. <span class="token punctuation">}</span>
    434. 

  434. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="formdata"><a href="#formdata" class="header-anchor">#</a> FormData</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 创建`FormData`并添加数据</span>
    435. 

  435. <span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    436. 

  436. data<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'Nicholas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    437. 

  437. <span class="token comment">// 使用</span>
    438. 

  438. <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token function">createXHR</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    439. 

  439. xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    440. 

  440.   <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    441. 

  441.     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">&gt;=</span> <span class="token number">200</span> <span class="token operator">&amp;&amp;</span> xhr<span class="token punctuation">.</span>status <span class="token operator">&lt;</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token operator">||</span> xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">304</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    442. 

  442.       <span class="token function">alert</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
    443. 

  443.     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    444. 

  444.       <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Request	was	unsuccessful:	'</span> <span class="token operator">+</span> xhr<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span>
    445. 

  445.     <span class="token punctuation">}</span>
    446. 

  446.   <span class="token punctuation">}</span>
    447. 

  447. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    448. 

  448. xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token string">'postexample.php'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    449. 

  449. <span class="token keyword">var</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'user-info'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    450. 

  450. xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    451. 

  451. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h4 id="超时设定"><a href="#超时设定" class="header-anchor">#</a> 超时设定</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>xhr<span class="token punctuation">.</span>timeout <span class="token operator">=</span> <span class="token number">1000</span><span class="token punctuation">;</span> <span class="token comment">//将超时设置为1秒钟(仅适用于IE8+)</span>
    452. 

  452. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="es5-示例代码"><a href="#es5-示例代码" class="header-anchor">#</a> es5 示例代码</h3> <h4 id="跨域"><a href="#跨域" class="header-anchor">#</a> 跨域</h4> <h4 id="异常处理"><a href="#异常处理" class="header-anchor">#</a> 异常处理</h4> <h3 id="es6-示例代码"><a href="#es6-示例代码" class="header-anchor">#</a> es6 示例代码</h3> <h4 id="跨域-2"><a href="#跨域-2" class="header-anchor">#</a> 跨域</h4> <h4 id="promise-调用"><a href="#promise-调用" class="header-anchor">#</a> promise 调用</h4> <h2 id="正则截取指定字符串"><a href="#正则截取指定字符串" class="header-anchor">#</a> 正则截取指定字符串</h2> <h3 id="参考文章-2"><a href="#参考文章-2" class="header-anchor">#</a> <a href="http://www.baidufe.com/item/eb10deb92f2c05ca32cf.html" target="_blank" rel="noopener noreferrer">参考文章<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <h3 id="正则截取指定字符串-2"><a href="#正则截取指定字符串-2" class="header-anchor">#</a> 正则截取指定字符串</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> str<span class="token operator">=</span>'<span class="token punctuation">{</span><span class="token string">&quot;asd&quot;</span><span class="token punctuation">:</span>\\<span class="token number">1234</span>\\<span class="token number">1234</span>\\<span class="token number">1234</span>\\<span class="token number">1234</span><span class="token punctuation">,</span><span class="token string">&quot;true&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    453. 

  453.          <span class="token punctuation">{</span><span class="token string">&quot;sada&quot;</span><span class="token punctuation">:</span>\\<span class="token number">1111</span>\\<span class="token number">1234</span>\\<span class="token number">1234</span>\\<span class="token number">4444</span><span class="token punctuation">,</span><span class="token string">&quot;true&quot;</span><span class="token punctuation">}</span>'<span class="token punctuation">;</span>
    454. 

  454. <span class="token keyword">let</span> substr <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/&quot;sada&quot;:(\S*),&quot;true&quot;/</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    455. 

  455. console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>substr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// \\1111\\1234\\1234\\4444</span>
    456. 

  456. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="浏览器基本信息判断"><a href="#浏览器基本信息判断" class="header-anchor">#</a> 浏览器基本信息判断</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/*
    457. 

  457.   * 智能机浏览器版本信息:
    458. 

  458.   *
    459. 

  459.   */</span>
    460. 

  460. <span class="token keyword">var</span> browser <span class="token operator">=</span> <span class="token punctuation">{</span>
    461. 

  461.   versions<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    462. 

  462.     <span class="token keyword">var</span> u <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">,</span>
    463. 

  463.       app <span class="token operator">=</span> navigator<span class="token punctuation">.</span>appVersion<span class="token punctuation">;</span>
    464. 

  464.     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>u<span class="token punctuation">)</span><span class="token punctuation">;</span>
    465. 

  465.     <span class="token keyword">return</span> <span class="token punctuation">{</span>
    466. 

  466.       <span class="token comment">//移动终端浏览器版本信息</span>
    467. 

  467.       trident<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Trident'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//IE内核</span>
    468. 

  468.       presto<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Presto'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//opera内核</span>
    469. 

  469.       webKit<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'AppleWebKit'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//苹果、谷歌内核</span>
    470. 

  470.       gecko<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Gecko'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&amp;&amp;</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'KHTML'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//火狐内核</span>
    471. 

  471.       mobile<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token operator">!</span>u<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/Mobile/g</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//去掉浏览器内核判断</span>
    472. 

  472.       <span class="token comment">//        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端</span>
    473. 

  473.       ios<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token operator">!</span>u<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/\(i[^;]+;( U;)? CPU.+Mac OS X/</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//ios终端</span>
    474. 

  474.       android<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Android'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">||</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Linux'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//android终端或者uc浏览器</span>
    475. 

  475.       iPhone<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'iPhone'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">||</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Mac'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//是否为iPhone或者QQHD浏览器</span>
    476. 

  476.       iPad<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'iPad'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//是否iPad</span>
    477. 

  477.       webApp<span class="token punctuation">:</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Safari'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//是否web应该程序，没有头部与底部</span>
    478. 

  478.     <span class="token punctuation">}</span><span class="token punctuation">;</span>
    479. 

  479.   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    480. 

  480.   language<span class="token punctuation">:</span> <span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>browserLanguage <span class="token operator">||</span> navigator<span class="token punctuation">.</span>language<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    481. 

  481. <span class="token punctuation">}</span><span class="token punctuation">;</span>
    482. 

  482. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">'语言版本: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>language<span class="token punctuation">)</span><span class="token punctuation">;</span>
    483. 

  483. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">' 是否为移动终端: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>mobile<span class="token punctuation">)</span><span class="token punctuation">;</span>
    484. 

  484. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">' 是否为webKit: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>webKit<span class="token punctuation">)</span><span class="token punctuation">;</span>
    485. 

  485. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">' ios终端: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>ios<span class="token punctuation">)</span><span class="token punctuation">;</span>
    486. 

  486. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">' android终端: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>android<span class="token punctuation">)</span><span class="token punctuation">;</span>
    487. 

  487. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">' 是否为iPhone: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>iPhone<span class="token punctuation">)</span><span class="token punctuation">;</span>
    488. 

  488. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token string">' 是否iPad: '</span> <span class="token operator">+</span> browser<span class="token punctuation">.</span>versions<span class="token punctuation">.</span>iPad<span class="token punctuation">)</span><span class="token punctuation">;</span>
    489. 

  489. document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">)</span><span class="token punctuation">;</span>
    490. 

  490. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><h2 id="javascript-jquery-判断元素即将出现在文档可视区域或文档可视区域的顶部"><a href="#javascript-jquery-判断元素即将出现在文档可视区域或文档可视区域的顶部" class="header-anchor">#</a> JavaScript|jQuery 判断元素即将出现在文档可视区域或文档可视区域的顶部</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/* JavaScript判断元素即将出现在文档可视区域或离开文档可视区域.
    491. 

  491. 一、判断元素是否处于可视文档区域顶部
    492. 

  492. 判断条件:DOMTop.offsetTop + clientHeight - 10 &lt; clientHeight + scrollTop
    493. 

  493. 解析:
    494. 

  494.   获取元素距离文档顶端的长度,然后与窗口的高度相加;
    495. 

  495.   接着,再通过获取窗口滚动条顶端与文档顶端的距离;
    496. 

  496.   并通过判断得到元素是否处于,距离可视文档区域的顶部10个单位的位置.
    497. 

  497. 二、判断元素是否即将出现在可视窗口的底部
    498. 

  498. 判断条件:DOMTop.offsetTop -10 &lt; clientHeight + scrollTop
    499. 

  499. 解析:基本思路同上一致.
    500. 

  500.  */</span>
    501. 

  501. <span class="token keyword">function</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    502. 

  502.   <span class="token keyword">var</span> DOMTop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'box'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    503. 

  503.   document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    504. 

  504.     <span class="token keyword">var</span> clientHeight <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span>
    505. 

  505.     <span class="token keyword">var</span> scrollTop <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
    506. 

  506.     <span class="token keyword">if</span> <span class="token punctuation">(</span>DOMTop<span class="token punctuation">.</span>offsetTop <span class="token operator">+</span> clientHeight <span class="token operator">-</span> <span class="token number">10</span> <span class="token operator">&lt;</span> clientHeight <span class="token operator">+</span> scrollTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    507. 

  507.       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'发现元素'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    508. 

  508.     <span class="token punctuation">}</span>
    509. 

  509.   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    510. 

  510. <span class="token punctuation">}</span>
    511. 

  511. 

  512. window<span class="token punctuation">.</span>onload <span class="token operator">=</span> init<span class="token punctuation">;</span>
    513. 

  513. <span class="token comment">// delete init();</span>
    514. 

  514. 

  515. <span class="token comment">/*jQuery判断元素即将出现在文档可视区域或离开文档可视区域.
    516. 

  516. 思路同上一致,表达方式不同
    517. 

  517.  当元素距离可视区域还有10的长度时,执行相关程序*/</span>
    518. 

  518. <span class="token comment">/*$(document).ready(function () {
    519. 

  519.   $(window).scroll(function () {
    520. 

  520.     // console.log($(window).scrollTop() +  $(window).height())
    521. 

  521.     // 文档距离屏幕可视区域的距离
    522. 

  522.     var DOMTop = $('.box').offset().top + 10;
    523. 

  523.     // 文档已经滑动的距离 + 窗口的高度
    524. 

  524.     var DOMScrollHeight = $(window).scrollTop() +  $(window).height();
    525. 

  525.     // 元素距离可视区域顶部距离为10的时候触发
    526. 

  526.     if (DOMTop &lt; DOMScrollHeight) {
    527. 

  527.       console.log('DOMTop' + DOMTop);
    528. 

  528.       console.log('DOMScrollHeight' + DOMScrollHeight);
    529. 

  529.     }
    530. 

  530.   });
    531. 

  531. });*/</span>
    532. 

  532. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><h2 id="导航条动画，设定"><a href="#导航条动画，设定" class="header-anchor">#</a> 导航条动画，设定</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">navAnimation</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    533. 

  533.   <span class="token keyword">let</span> DOMTop <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'nav'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 获取导航对象</span>
    534. 

  534.     clientHeight <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">,</span> <span class="token comment">// 获取窗口可视区域高度</span>
    535. 

  535.     tru <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否替换类名的依据</span>
    536. 

  536.     clientHeightScrollTop <span class="token operator">=</span>
    537. 

  537.       clientHeight <span class="token operator">+</span> DOMTop<span class="token punctuation">.</span>offsetTop <span class="token operator">+</span> DOMTop<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span> <span class="token comment">// 是否替换类名的依据</span>
    538. 

  538.   <span class="token comment">// 监听文档滚动条事件，绑定动画</span>
    539. 

  539.   document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
    540. 

  540.     <span class="token string">'scroll'</span><span class="token punctuation">,</span>
    541. 

  541.     <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    542. 

  542.       <span class="token keyword">let</span> scrollTop <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    543. 

  543.       <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    544. 

  544.         scrollTop <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
    545. 

  545.       <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    546. 

  546.         scrollTop <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
    547. 

  547.       <span class="token punctuation">}</span>
    548. 

  548.       <span class="token keyword">if</span> <span class="token punctuation">(</span>tru <span class="token operator">&amp;&amp;</span> clientHeightScrollTop <span class="token operator">&lt;</span> clientHeight <span class="token operator">+</span> scrollTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    549. 

  549.         DOMTop<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'page-nav top'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    550. 

  550.         tru <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    551. 

  551.       <span class="token punctuation">}</span>
    552. 

  552.       <span class="token keyword">if</span> <span class="token punctuation">(</span>clientHeightScrollTop <span class="token operator">&gt;</span> clientHeight <span class="token operator">+</span> scrollTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    553. 

  553.         DOMTop<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'page-nav'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    554. 

  554.         tru <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    555. 

  555.       <span class="token punctuation">}</span>
    556. 

  556.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    557. 

  557.     <span class="token boolean">false</span><span class="token punctuation">,</span>
    558. 

  558.   <span class="token punctuation">)</span><span class="token punctuation">;</span>
    559. 

  559. <span class="token punctuation">}</span>
    560. 

  560. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h2 id="锚链接跳转过渡"><a href="#锚链接跳转过渡" class="header-anchor">#</a> 锚链接跳转过渡</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">/*
    561. 

  561. # 锚链接跳转过度
    562. 

  562. 条件：
    563. 

  563.   1.目标位置 &amp; 滚动条位置 距离过近
    564. 

  564.   2.目标位置 &gt; 滚动条位置
    565. 

  565.   3.目标位置 &lt; 滚动条位置
    566. 

  566. 策略：
    567. 

  567.   1.获取需要绑定事件的对象；
    568. 

  568.   2.使用for循环语句，给获取到的对象集合绑定事件；
    569. 

  569.   3.window.scrollTo(X,Y); 备注：X=window水平方向的滚动条移动位置；Y=window水平方向的滚动条移动位置;
    570. 

  570.   4.根据条件，执行不同事件。
    571. 

  571.   5.获取`目标位置 &amp; 滚动条位置`的间距，除以25。然后用该数值与`滚动条位置`相加或相减。而累加或累减的过程通过setInterval()定时器方法来控制。
    572. 

  572.   6.程序执行完毕之后，用clearInterval()方法清除定时器。
    573. 

  573.  */</span>
    574. 

  574. <span class="token function">anchorLinkJumpTransition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    575. 

  575. 

  576. <span class="token keyword">function</span> <span class="token function">anchorLinkJumpTransition</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    577. 

  577.   <span class="token keyword">let</span> aTag <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.animation-top a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    578. 

  578.   <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> aTag<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    579. 

  579.     aTag<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
    580. 

  580.       <span class="token string">'click'</span><span class="token punctuation">,</span>
    581. 

  581.       <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    582. 

  582.         <span class="token keyword">var</span> $target <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hash<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    583. 

  583.         <span class="token function">scrollToTop</span><span class="token punctuation">(</span>$target<span class="token punctuation">.</span>offsetTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
    584. 

  584. 

  585.         <span class="token keyword">function</span> <span class="token function">scrollToTop</span><span class="token punctuation">(</span><span class="token parameter">scrollDuration</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    586. 

  586.           <span class="token keyword">let</span> scrollTop <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 滚动条当前位置</span>
    587. 

  587.             scrollStep <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// 滚动条累加前的位置</span>
    588. 

  588.             s <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// 关闭计时器的条件 s = 25时</span>
    589. 

  589.           <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    590. 

  590.             scrollTop <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
    591. 

  591.           <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    592. 

  592.             scrollTop <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
    593. 

  593.           <span class="token punctuation">}</span>
    594. 

  594.           scrollStep <span class="token operator">=</span> scrollTop <span class="token operator">=</span> Number<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span>scrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
    595. 

  595.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'滚动前，滚动条位置:'</span> <span class="token operator">+</span> scrollTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
    596. 

  596.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'目标位置：'</span> <span class="token operator">+</span> scrollDuration<span class="token punctuation">)</span><span class="token punctuation">;</span>
    597. 

  597.           <span class="token comment">// 目标位置 &amp; 滚动条位置 距离过近</span>
    598. 

  598.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>scrollTop <span class="token operator">-</span> scrollDuration<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    599. 

  599.           <span class="token keyword">if</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>scrollTop <span class="token operator">-</span> scrollDuration<span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">21</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    600. 

  600.             <span class="token keyword">let</span> scrollInterval <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    601. 

  601.               <span class="token keyword">if</span> <span class="token punctuation">(</span>s <span class="token operator">&lt;</span> <span class="token number">26</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    602. 

  602.                 <span class="token comment">// s 是累加的，所以用来跟`目标位置 &amp; 滚动条位置`的间距，相乘，获得过渡效果。</span>
    603. 

  603.                 window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span>
    604. 

  604.                   <span class="token number">0</span><span class="token punctuation">,</span>
    605. 

  605.                   scrollStep <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>scrollDuration <span class="token operator">-</span> scrollTop<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">25</span><span class="token punctuation">)</span> <span class="token operator">*</span> s<span class="token punctuation">,</span>
    606. 

  606.                 <span class="token punctuation">)</span><span class="token punctuation">;</span>
    607. 

  607.                 s<span class="token operator">++</span><span class="token punctuation">;</span>
    608. 

  608.               <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    609. 

  609.                 <span class="token function">clearInterval</span><span class="token punctuation">(</span>scrollInterval<span class="token punctuation">)</span><span class="token punctuation">;</span>
    610. 

  610.                 scrollStep <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    611. 

  611.               <span class="token punctuation">}</span>
    612. 

  612.             <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    613. 

  613.           <span class="token punctuation">}</span>
    614. 

  614.         <span class="token punctuation">}</span>
    615. 

  615.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    616. 

  616.       <span class="token boolean">false</span><span class="token punctuation">,</span>
    617. 

  617.     <span class="token punctuation">)</span><span class="token punctuation">;</span>
    618. 

  618.   <span class="token punctuation">}</span>
    619. 

  619. <span class="token punctuation">}</span>
    620. 

  620. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div><h2 id="文章标题的动画"><a href="#文章标题的动画" class="header-anchor">#</a> 文章标题的动画</h2> <div class="language-Javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">animateIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    621. 

  621.   <span class="token keyword">let</span> animateIn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.container .title strong'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    622. 

  622.   <span class="token comment">// console.log(animateIn.getAttribute('class'))</span>
    623. 

  623.   <span class="token comment">// console.log(animateIn)</span>
    624. 

  624.   <span class="token keyword">let</span> that <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    625. 

  625.   <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> animateIn<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    626. 

  626.     animateIn<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    627. 

  627.       <span class="token keyword">if</span> <span class="token punctuation">(</span>that <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    628. 

  628.         that<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    629. 

  629.         <span class="token keyword">if</span> <span class="token punctuation">(</span>that <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    630. 

  630.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    631. 

  631.           that <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    632. 

  632.           <span class="token keyword">return</span><span class="token punctuation">;</span>
    633. 

  633.         <span class="token punctuation">}</span>
    634. 

  634.       <span class="token punctuation">}</span>
    635. 

  635.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">,</span> <span class="token string">'animate-in'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    636. 

  636.       that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    637. 

  637.     <span class="token punctuation">}</span><span class="token punctuation">)</span>
    638. 

  638.   <span class="token punctuation">}</span>
    639. 

  639. <span class="token punctuation">}</span>
    640. 

  640. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/2/2018, 4:50:38 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    641. 

  641.       ←
    642. 

  642.       <a href="/JavaScript/" class="prev router-link-active">JS 目录</a></span> <span class="next"><a href="/JavaScript/2018_10_28_01.html">动态替换图片</a>
    643. 

  643.       →
    644. 

  644.     </span></p></div> </main></div><div class="global-ui"></div></div>
    645. 

  645.     <script src="/assets/js/app.e708c228.js" defer></script><script src="/assets/js/3.db2f1e5f.js" defer></script><script src="/assets/js/84.376d4f1c.js" defer></script>
    646. 

  646.   </body>
    647. 

  647. </html>
    648.