released v1.32.0

doc: update README.md.
doc: update CONTRIBUTING.md.
2025-06-17 04:31:22 +08:00 · 2022-12-14 12:34:19 +08:00 · 2022-12-14 03:29:38 +00:00 · 2022-12-14 03:29:37 +00:00 · 2022-12-14 11:27:58 +08:00 · 2022-12-13 11:05:04 +08:00
24 changed files with 5386 additions and 105 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -48,8 +48,29 @@ jobs:
      - name: gh-pages README.md
        working-directory: dist
        run: |
-          cat > README.md << EOF
+          cat << "EOF" > README.md
          Website: https://jaywcjlove.github.io/reference
+          ## Docker
+
+          [![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference) [![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference) [![Docker Pulls](https://img.shields.io/docker/pulls/wcjiang/reference)](https://hub.docker.com/r/wcjiang/reference)
+
+          轻松通过 `docker` 部署 `Quick Reference` 网站。
+
+          ```bash
+          docker pull wcjiang/reference
+          ```
+
+          ```bash
+          docker run --name reference --rm -d -p 9667:3000 wcjiang/reference:latest
+          # Or
+          docker run --name reference -itd -p 9667:3000 wcjiang/reference:latest
+          ```
+
+          在浏览器中访问以下 URL
+
+          ```bash
+          http://localhost:9667/
+          ```
          EOF

      - name: Deploy
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -154,38 +154,44 @@ REF_LABEL=网站首页
 <a href="https://github.com/mofelee" title="mofelee">
  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
 </a>
-<a href="https://github.com/Alex-Programer" title="Alex">
-  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
+<a href="https://github.com/Alex-Programer" title="Alex">
+  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
+</a>
 <a href="https://github.com/expoli" title="expoli">
  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
 </a>
+<a href="https://github.com/heStudio-Network" title="醉、倾城">
+  <img src="https://avatars.githubusercontent.com/u/119711513?v=4" width="42;" alt="醉、倾城"/>
+</a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
 <a href="https://github.com/LufsX" title="LufsX">
  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
 </a>
+<a href="https://github.com/1834423612" title="kjch">
+  <img src="https://avatars.githubusercontent.com/u/49981661?v=4" width="42;" alt="kjch"/>
+</a>
 <a href="https://github.com/partoneplay" title="partoneplay">
  <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
 </a>
 <a href="https://github.com/ryanhex53" title="ryanhex53">
  <img src="https://avatars.githubusercontent.com/u/360426?v=4" width="42;" alt="ryanhex53"/>
 </a>
+<a href="https://github.com/eryajf" title="二丫讲梵">
+  <img src="https://avatars.githubusercontent.com/u/33259379?v=4" width="42;" alt="二丫讲梵"/>
+</a>
 <a href="https://github.com/catcto" title="喵仙人">
  <img src="https://avatars.githubusercontent.com/u/5467932?v=4" width="42;" alt="喵仙人"/>
 </a>
-<a href="https://github.com/heStudio-Network" title="醉、倾城">
-  <img src="https://avatars.githubusercontent.com/u/119711513?v=4" width="42;" alt="醉、倾城"/>
-</a>
 <a href="https://github.com/13812700839" title="花殇">
  <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
 </a>
-<a href="https://github.com/Smartdousha" title="Anko">
-  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
+<a href="https://github.com/Smartdousha" title="dousha">
+  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="dousha"/>
 </a>
 <a href="https://github.com/Brid9e" title="Brid9e">
  <img src="https://avatars.githubusercontent.com/u/85558909?v=4" width="42;" alt="Brid9e"/>
@ -217,6 +223,9 @@ REF_LABEL=网站首页
 <a href="https://github.com/HanaNoryu" title="Noryu">
  <img src="https://avatars.githubusercontent.com/u/109856546?v=4" width="42;" alt="Noryu"/>
 </a>
+<a href="https://github.com/PipecraftNet" title="Pipecraft">
+  <img src="https://avatars.githubusercontent.com/u/88728670?v=4" width="42;" alt="Pipecraft"/>
+</a>
 <a href="https://github.com/whb1998a" title="WHB">
  <img src="https://avatars.githubusercontent.com/u/44045064?v=4" width="42;" alt="WHB"/>
 </a>
@ -283,9 +292,6 @@ REF_LABEL=网站首页
 <a href="https://github.com/zxx-457" title="zxx-457">
  <img src="https://avatars.githubusercontent.com/u/114141362?v=4" width="42;" alt="zxx-457"/>
 </a>
-<a href="https://github.com/eryajf" title="二丫讲梵">
-  <img src="https://avatars.githubusercontent.com/u/33259379?v=4" width="42;" alt="二丫讲梵"/>
-</a>
 <a href="https://github.com/lvzhenbo" title="吕振波">
  <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
 </a>
--- a/README.md
+++ b/README.md
@ -24,6 +24,7 @@ Quick Reference
 [C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->  
 [Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->  
 [FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->  
+[Flask](./docs/flask.md)<!--rehype:style=background: rgb(210 168 255);&class=contributing tag&data-lang=Python-->
 [Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->  
 [Gitlab CI/CD](./docs/gitlab-ci.md)<!--rehype:style=background: rgb(226 67 41);&class=contributing-->  
 [LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->  
@ -44,7 +45,8 @@ Quick Reference
 [Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255);-->  
 [Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223);-->  
 [Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153);&class=tag&data-lang=Docker-->  
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->  
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python--> 
+[Flask](./docs/flask.md)<!--rehype:style=background: rgb(210 168 255);&class=contributing tag&data-lang=Python--> 
 [Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->  
 [Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193);-->  
 [GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146);-->  
@ -80,12 +82,14 @@ Quick Reference
 [Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154);&class=tag&data-lang=CSS-->  
 [HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39);-->  
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->  
+[jQuery](./docs/jquery.md)<!--rehype:style=background: rgb(203 183 31);-->  
 [Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93);&class=tag&data-lang=CSS-->  
 [Next.js](./docs/nextjs.md)<!--rehype:style=background: rgb(0 0 0);&class=tag&data-lang=React-->  
 [React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173);-->  
 [React Native](./docs/react-native.md)<!--rehype:style=background: rgb(34 143 173);&class=tag&data-lang=React-->  
 [RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155);-->  
 [TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198);-->  
+[Tailwind CSS](./docs/tailwindcss.md)<!--rehype:style=background: rgb(49 120 198);-->  
 [Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131);-->  
 [Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->  
 [</> htmx](./docs/htmx.md)<!--rehype:style=background: rgb(52 101 164);&class=contributing-->  
@ -169,6 +173,7 @@ Quick Reference
 [Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54);-->  
 [Gitlab](./docs/gitlab.md)<!--rehype:style=background: rgb(226 67 41);-->  
 [Google Chrome](./docs/google-chrome.md)<!--rehype:style=background: rgb(29 116 232);-->  
+[IntelliJ IDEA](./docs/intelli-j-idea.md)<!--rehype:style=background: rgb(223 148 0);&class=tag&data-lang=Java-->  
 [Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0);&class=tag&data-lang=macOS-->  
 [Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0);-->  
 [VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230);-->  
@ -215,38 +220,44 @@ Quick Reference
 <a href="https://github.com/mofelee" title="mofelee">
  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
 </a>
-<a href="https://github.com/Alex-Programer" title="Alex">
-  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
  <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
+<a href="https://github.com/Alex-Programer" title="Alex">
+  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
+</a>
 <a href="https://github.com/expoli" title="expoli">
  <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
 </a>
+<a href="https://github.com/heStudio-Network" title="醉、倾城">
+  <img src="https://avatars.githubusercontent.com/u/119711513?v=4" width="42;" alt="醉、倾城"/>
+</a>
 <a href="https://github.com/sjh42" title="42:p">
  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
 </a>
 <a href="https://github.com/LufsX" title="LufsX">
  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
 </a>
+<a href="https://github.com/1834423612" title="kjch">
+  <img src="https://avatars.githubusercontent.com/u/49981661?v=4" width="42;" alt="kjch"/>
+</a>
 <a href="https://github.com/partoneplay" title="partoneplay">
  <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
 </a>
 <a href="https://github.com/ryanhex53" title="ryanhex53">
  <img src="https://avatars.githubusercontent.com/u/360426?v=4" width="42;" alt="ryanhex53"/>
 </a>
+<a href="https://github.com/eryajf" title="二丫讲梵">
+  <img src="https://avatars.githubusercontent.com/u/33259379?v=4" width="42;" alt="二丫讲梵"/>
+</a>
 <a href="https://github.com/catcto" title="喵仙人">
  <img src="https://avatars.githubusercontent.com/u/5467932?v=4" width="42;" alt="喵仙人"/>
 </a>
-<a href="https://github.com/heStudio-Network" title="醉、倾城">
-  <img src="https://avatars.githubusercontent.com/u/119711513?v=4" width="42;" alt="醉、倾城"/>
-</a>
 <a href="https://github.com/13812700839" title="花殇">
  <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
 </a>
-<a href="https://github.com/Smartdousha" title="Anko">
-  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
+<a href="https://github.com/Smartdousha" title="dousha">
+  <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="dousha"/>
 </a>
 <a href="https://github.com/Brid9e" title="Brid9e">
  <img src="https://avatars.githubusercontent.com/u/85558909?v=4" width="42;" alt="Brid9e"/>
@ -278,6 +289,9 @@ Quick Reference
 <a href="https://github.com/HanaNoryu" title="Noryu">
  <img src="https://avatars.githubusercontent.com/u/109856546?v=4" width="42;" alt="Noryu"/>
 </a>
+<a href="https://github.com/PipecraftNet" title="Pipecraft">
+  <img src="https://avatars.githubusercontent.com/u/88728670?v=4" width="42;" alt="Pipecraft"/>
+</a>
 <a href="https://github.com/whb1998a" title="WHB">
  <img src="https://avatars.githubusercontent.com/u/44045064?v=4" width="42;" alt="WHB"/>
 </a>
@ -344,9 +358,6 @@ Quick Reference
 <a href="https://github.com/zxx-457" title="zxx-457">
  <img src="https://avatars.githubusercontent.com/u/114141362?v=4" width="42;" alt="zxx-457"/>
 </a>
-<a href="https://github.com/eryajf" title="二丫讲梵">
-  <img src="https://avatars.githubusercontent.com/u/33259379?v=4" width="42;" alt="二丫讲梵"/>
-</a>
 <a href="https://github.com/lvzhenbo" title="吕振波">
  <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
 </a>
@ -376,18 +387,17 @@ Quick Reference
 [if010.com](https://quickref.if010.com/)<!--rehype:target=_blank-->
 [pipecraft.net](https://quickref.pipecraft.net/)<!--rehype:target=_blank&class=contributing&data-info=👆需要梯子-->
 [isteed.cc](https://ref.isteed.cc/)<!--rehype:target=_blank-->
-[cas-air.cn](https://www.ccommunity.cas-air.cn/index.html)<!--rehype:target=_blank&class=contributing&data-info=👆非镜像，另起炉灶-->
 [1han.wiki](https://code.1han.wiki/)<!--rehype:target=_blank-->
 [linzhe.top](https://linzhe.top/)<!--rehype:target=_blank-->
 [xushanxiang.com](https://xushanxiang.com/ref/)<!--rehype:target=_blank-->
 [winnerzr01.github.io](https://winnerzr01.github.io/Quick-Reference/index.html)<!--rehype:target=_blank&class=contributing&data-info=👆需要梯子-->
 [isteed.cc](https://ref.isteed.cc/)<!--rehype:target=_blank-->
-[hestudio.org](https://quickref.hestudio.org)<!--rehype:target=_blank-->
+[quickref.hestudio.org](https://quickref.hestudio.org)<!--rehype:target=_blank&class=contributing&data-info=👆整点自动同步-->
 [surcode.cn](https://ref.surcode.cn)<!--rehype:target=_blank-->
-[hestudio.org](https://quickref.hestudio.org)<!--rehype:target=_blank-->
 [cms.im](https://quickref.cms.im/)<!--rehype:target=_blank-->
 [nuomiphp.com](https://reference.tool.nuomiphp.com/)<!--rehype:target=_blank-->
-[eryajf.net](https://ref.eryajf.net/)<!--rehype:target=_blank-->
+[eryajf.net](https://ref.eryajf.net/)<!--rehype:target=_blank&class=contributing&data-info=👆每天自动同步-->
+[kjchmc.cn](https://ref.kjchmc.cn/)<!--rehype:target=_blank&class=contributing&data-info=👆实时同步，多线路-->
 <!--rehype:class=home-card home-links-->

 如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 [gh-pages](https://github.com/jaywcjlove/reference/tree/gh-pages) 分支代码到你的静态服务就可以了，还可以使用 [docker](https://hub.docker.com/r/wcjiang/reference) 快捷部署 web 版。
--- a/assets/flask.svg
+++ b/assets/flask.svg
--- a/assets/intelli-j-idea.svg
+++ b/assets/intelli-j-idea.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" height="1em" width="1em">
+  <path d="M0 0v32h32V0zm4.964 4.145h6.667v2.448H9.776v8.371h1.855v2.443H4.964v-2.443h1.927V6.593H4.964zm14.739 0h2.964v8.667c0 .819-.073 1.485-.297 2.079a4.002 4.002 0 0 1-.963 1.479c-.371.371-.885.745-1.48.891a5.192 5.192 0 0 1-1.927.371c-1.036 0-1.927-.224-2.593-.595a6.403 6.403 0 0 1-1.704-1.405l1.855-2.073c.369.443.74.74 1.109.964.369.219.812.369 1.26.369.521 0 .959-.151 1.333-.521.292-.369.443-.891.443-1.703zM2.964 26h12v2h-12z"/>
+</svg>
--- a/assets/jquery.svg
+++ b/assets/jquery.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
+  <path d="M1.525 5.87c-2.126 3.054-1.862 7.026-.237 10.269.037.079.078.154.118.229.023.052.049.1.077.15.013.027.031.056.047.082.026.052.054.102.081.152l.157.266c.03.049.057.097.09.146.056.094.12.187.178.281.026.04.05.078.079.117a6.368 6.368 0 0 0 .31.445c.078.107.156.211.24.315.027.038.058.076.086.115l.22.269c.028.03.055.067.084.099.098.118.202.233.306.35l.005.006a3.134 3.134 0 0 0 .425.44c.08.083.16.165.245.245l.101.097c.111.105.223.209.34.309.002 0 .003.002.005.003l.057.05c.102.089.205.178.31.26l.125.105c.085.068.174.133.26.2l.137.105c.093.07.192.139.287.207.035.025.07.05.106.073l.03.023.28.185.12.08c.148.094.294.184.44.272.041.02.084.044.123.068.108.062.22.125.329.183.06.034.122.063.184.094.075.042.153.083.234.125a.324.324 0 0 1 .056.023c.033.015.064.031.096.047.12.06.245.118.375.175.024.01.05.02.076.034.144.063.289.123.438.182.034.01.07.027.105.04.135.051.274.103.411.152l.05.018c.154.052.305.102.46.15.036.01.073.023.111.033.16.048.314.105.474.137 10.273 1.872 13.258-6.177 13.258-6.177-2.508 3.266-6.958 4.127-11.174 3.169-.156-.036-.312-.086-.47-.132a13.539 13.539 0 0 1-.567-.182l-.062-.024c-.136-.046-.267-.097-.4-.148a1.615 1.615 0 0 0-.11-.04c-.148-.06-.29-.121-.433-.184-.031-.01-.057-.024-.088-.036a23.44 23.44 0 0 1-.362-.17 1.485 1.485 0 0 1-.106-.052c-.094-.044-.188-.095-.28-.143a3.947 3.947 0 0 1-.187-.096c-.114-.06-.227-.125-.34-.187-.034-.024-.073-.044-.112-.066a15.922 15.922 0 0 1-.439-.27 2.107 2.107 0 0 1-.118-.078 6.01 6.01 0 0 1-.312-.207c-.035-.023-.067-.048-.103-.073a9.553 9.553 0 0 1-.295-.212c-.042-.034-.087-.066-.132-.1-.088-.07-.177-.135-.265-.208l-.118-.095a10.593 10.593 0 0 1-.335-.28.258.258 0 0 0-.037-.031l-.347-.316-.1-.094c-.082-.084-.166-.164-.25-.246l-.098-.1a9.081 9.081 0 0 1-.309-.323l-.015-.016c-.106-.116-.21-.235-.313-.355-.027-.03-.053-.064-.08-.097l-.227-.277a21.275 21.275 0 0 1-.34-.449C2.152 11.79 1.306 7.384 3.177 3.771m4.943-.473c-1.54 2.211-1.454 5.169-.254 7.508a9.111 9.111 0 0 0 .678 1.133c.23.33.484.721.793.988.107.122.223.24.344.36l.09.09c.114.11.232.217.35.325l.016.013a9.867 9.867 0 0 0 .414.342c.034.023.063.05.096.073.14.108.282.212.428.316l.015.009c.062.045.128.086.198.13.028.018.06.042.09.06.106.068.21.132.318.197.017.007.032.016.048.023.09.055.188.108.282.157.033.02.065.035.1.054.066.033.132.068.197.102l.032.014c.135.067.273.129.408.19.034.014.063.025.092.039.111.048.224.094.336.137.05.017.097.037.144.052.102.038.21.073.31.108l.14.045c.147.045.295.104.449.13C22.164 17.206 24 11.098 24 11.098c-1.653 2.38-4.852 3.513-8.261 2.628a8.04 8.04 0 0 1-.449-.13c-.048-.014-.09-.029-.136-.043-.104-.036-.211-.07-.312-.109l-.144-.054c-.113-.045-.227-.087-.336-.135-.034-.015-.065-.025-.091-.04-.14-.063-.281-.125-.418-.192l-.206-.107-.119-.06a5.673 5.673 0 0 1-.265-.15.62.62 0 0 1-.062-.035c-.106-.066-.217-.13-.318-.198-.034-.019-.065-.042-.097-.062l-.208-.136c-.144-.1-.285-.208-.428-.313-.032-.029-.063-.053-.094-.079-1.499-1.178-2.681-2.79-3.242-4.613-.59-1.897-.46-4.023.56-5.75m4.292-.147c-.909 1.334-.996 2.99-.37 4.46.665 1.563 2.024 2.79 3.608 3.37.065.025.128.046.196.07l.088.027c.092.03.185.063.28.084 4.381.845 5.567-2.25 5.886-2.704-1.043 1.498-2.792 1.857-4.938 1.335a4.85 4.85 0 0 1-.516-.16 6.352 6.352 0 0 1-.618-.254 6.53 6.53 0 0 1-1.082-.66c-1.922-1.457-3.113-4.236-1.859-6.5"/>
+</svg>
--- a/assets/tailwindcss.svg
+++ b/assets/tailwindcss.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
+  <path d="M7.5 2.5c-1.026 0-1.908.277-2.6.87-.688.59-1.137 1.447-1.387 2.516a.5.5 0 0 0 .897.4c.316-.452.632-.723.936-.863.294-.135.611-.162.975-.065.366.098.65.386 1.095.87l.015.016c.336.365.745.81 1.305 1.156.582.359 1.305.6 2.264.6 1.026 0 1.908-.277 2.6-.87.688-.59 1.138-1.447 1.387-2.516a.5.5 0 0 0-.897-.4c-.316.452-.632.723-.936.863-.294.135-.611.162-.975.065-.366-.098-.65-.386-1.095-.87l-.015-.016c-.336-.365-.745-.81-1.305-1.156-.582-.359-1.305-.6-2.264-.6ZM4 7c-1.026 0-1.908.277-2.6.87C.712 8.46.263 9.317.013 10.386a.5.5 0 0 0 .897.4c.316-.452.632-.723.936-.863.294-.135.611-.162.975-.065.366.098.65.386 1.095.87l.015.016c.336.365.745.81 1.305 1.156.582.359 1.305.6 2.264.6 1.026 0 1.908-.277 2.6-.87.688-.59 1.138-1.447 1.387-2.516a.5.5 0 0 0-.897-.4c-.316.452-.632.723-.936.863-.294.135-.611.162-.975.065-.366-.098-.65-.386-1.095-.87l-.015-.016c-.335-.365-.745-.81-1.305-1.156C5.682 7.24 4.959 7 4 7Z" fill="currentColor"/>
+</svg>
--- a/docs/bash.md
+++ b/docs/bash.md
@ -4,7 +4,7 @@ Bash 备忘清单
 这是开始使用 linux bash shell 脚本的快速参考备忘单。

 入门
---------------
+-----

 ### hello.sh

@ -837,7 +837,6 @@ if [[ "$1" == '--' ]]; then shift; fi
 ```

 ### 检查命令的结果
-<!--rehype:wrap-class=col-span-2-->

 ```bash
 if ping -c 1 google.com; then
@ -845,6 +844,73 @@ if ping -c 1 google.com; then
 fi
 ```

+### grep 检查
+
+```bash
+if grep -q 'foo' ~/.bash_history; then
+    echo "您过去似乎输入过“foo”"
+fi
+```
+
+### 写入文件
+<!--rehype:wrap-class=row-span-6-->
+
+:-- | --
+:-- | --
+`cat` | 用于显示文本文件内容，全部输出
+`EOF` | `end of file`，表示文本结束符
+
+---
+
+```bash
+cat > output.txt <<EOF
+this is test eof
+this is test eof2
+EOF
+```
+
+输出 `cat output.txt`
+
+```
+this is test eof
+this is test eof2
+```
+
+追加内容
+
+```bash
+cat >>2.txt <<EOF
+456
+789
+EOF
+```
+
+`$` 等特殊字符时，须利用转义字符 `\`
+
+```bash
+cat > file <<EOF
+export ORACLE_SID=yqpt 
+export PATH=\$PATH:\$ORACLE_HOME/bin  
+EOF
+```
+
+取消变量替换，`EOF` 被加上双引号或者单引号，即可取消变量的替换
+
+```bash
+cat << "EOF" > output.sh
+echo "This is output"
+echo $1
+EOF
+```
+
+所有TAB键将全部忽略[不能是空格]
+
+```bash
+cat << -EOF
+        echo "This is output"
+EOF
+```
+
 ### 特殊变量
 <!--rehype:wrap-class=row-span-2-->

@ -857,15 +923,6 @@ fi

 见[特殊参数](http://wiki.bash-hackers.org/syntax/shellvars#special_parameters_and_shell_variables)。

-### grep 检查
-<!--rehype:wrap-class=col-span-2-->
-
-```bash
-if grep -q 'foo' ~/.bash_history; then
-    echo "您过去似乎输入过“foo”"
-fi
-```
-
 ### 反斜杠转义
 <!--rehype:wrap-class=row-span-2-->

--- a/docs/css.md
+++ b/docs/css.md
@ -13,8 +13,6 @@ CSS 功能丰富，不仅仅是布局页面

 #### 外部样式表 `<link>`

-`
-
 ```html
 <link
  href="./path/to/stylesheet/style.css"
@ -1521,6 +1519,43 @@ html {

 上面示例设置了当前卡片灰色

+### 使用 unset 而不是重置所有属性
+
+使用 `all` 速记来指定元素的所有属性。将值设置为 `unset` 会将元素的属性更改为其初始值：
+
+```css
+button {
+  all: unset;
+}
+```
+
+注意：`IE11` 不支持 `all` 和 `unset` 速记
+
+### 超出显示省略号
+
+```css
+p {
+  overflow: hidden;/*超出部分隐藏*/
+  /* 超出部分显示省略号 */
+  text-overflow:ellipsis;
+  /* 规定段落中的文本不进行换行 */
+  white-space: nowrap;
+  width: 250px;/*需要配合宽度来使用*/
+}
+```
+
+### 给正文添加行高
+
+您不需要为每个 `<p>`、`<h*>` 等添加行高。相反，将其添加到正文：
+
+```css
+body {
+  line-height: 1.5;
+}
+```
+
+这样文本元素可以很容易地从 `body` 继承
+
 ### 使用图像作为光标

 ```css
@ -1652,6 +1687,114 @@ div {

 属性 [aspect-ratio](https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio) 可以非常容易的定义一个容器的长宽比

+### 等宽表格单元格
+
+尝试使用 `table-layout: fixed` 以保持单元格宽度相等：
+
+```css
+table {
+  table-layout: fixed;
+}
+```
+
+### 利用属性选择器来选择空链接
+
+当 `<a>` 元素没有文本内容，但有 `href` 属性的时候，显示它的 `href` 属性：
+
+```css
+a[href^="http"]:empty::before {
+  content: attr(href);
+}
+```
+
+### 给 “默认” 链接定义样式
+
+给 “默认” 链接定义样式：
+
+```css
+a[href]:not([class]) {
+  color: #008000;
+  text-decoration: underline;
+}
+```
+
+通常没有 `class` 属性，以上样式可以甄别它们，而且不会影响其它样式
+
+### 用 rem 调整全局大小；用 em 调整局部大小
+<!--rehype:wrap-class=row-span-2-->
+
+在根元素设置基本字体大小后 (`html { font-size: 100%; }`), 使用 em 设置文本元素的字体大小:
+
+```css
+h2 { 
+  font-size: 2em;
+}
+p {
+  font-size: 1em;
+}
+```
+
+然后设置模块的字体大小为 rem:
+
+```css
+article {
+  font-size: 1.25rem;
+}
+aside .module {
+  font-size: .9rem;
+}
+```
+
+现在，每个模块变得独立，更容易、灵活的样式便于维护
+
+### 隐藏没有静音、自动播放的影片
+
+这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：
+
+```css
+video[autoplay]:not([muted]) {
+  display: none;
+}
+```
+
+再次，我们利用了 `:not()` 的优点
+
+### 为更好的移动体验，为表单元素设置字体大小
+
+当触发 `<select>` 的下拉列表时，为了避免表单元素在移动浏览器（iOS Safari 和其它）上的缩放，加上font-size：
+
+```css
+input[type="text"],
+input[type="number"],
+select,
+textarea {
+  font-size: 16px;
+}
+```
+
+### 使用指针事件来控制鼠标事件
+
+指针事件允许您指定鼠标如何与其触摸的元素进行交互。要禁用按钮上的默认指针事件，例如：
+
+```css
+button:disabled {
+  opacity: .5;
+  pointer-events: none;
+}
+```
+
+就这么简单
+
+### 在用作间距的换行符上设置 `display: none`
+
+用户使用额外的换行符
+
+```css
+br + br {
+  display: none;
+}
+```
+
 另见
 ---------

--- a/docs/docker.md
+++ b/docs/docker.md
@ -281,7 +281,7 @@ $ docker push eon01/nginx localhost:5000/myadmin/nginx
 |---------|---------|
 `docker stop -f $(docker ps -a -q)` | 停止所有容器
 `docker rm -f $(docker ps -a -q)` | 删除所有容器
-`docker rmi -f $(docker images -q)` | 删除所有图像
+`docker rmi -f $(docker images -q)` | 删除所有镜像

 ### 卷 volume

@ -307,10 +307,10 @@ $ docker volume prune
 `docker-compose down` | 停止和删除容器、网络、映像和卷
 `docker-compose logs` | 查看容器的输出
 `docker-compose restart` | 重启所有服务
-`docker-compose pull` | 拉取所有图片服务
-`docker-compose build` | 构建所有图像服务
+`docker-compose pull` | 拉取所有服务的镜像
+`docker-compose build` | 构建所有服务的镜像
 `docker-compose config` | 验证并查看 Compose 文件
-`docker-compose scale <service_name>=<replica>` | 规模特殊服务
+`docker-compose scale <service_name>=<replica>` | 为服务指定容器个数
 `docker-compose top` | 显示正在运行的进程
 `docker-compose run -rm -p 2022:22 web bash` | 启动 Web 服务并运行 bash 作为其命令，删除旧容器。

@ -361,35 +361,35 @@ $ docker volume prune
 :- | :-
 `attach`   | 将本地标准输入、输出和错误流附加到正在运行的容器
 `build`    | 从 Dockerfile 构建镜像
-`commit`   | 从容器的更改创建新图像
+`commit`   | 从容器的更改创建新镜像
 `cp`       | 在容器和本地文件系统之间复制文件/文件夹
 `create`   | 创建一个新容器
 `diff`     | 检查容器文件系统上文件或目录的更改
 `events`   | 从服务器获取实时事件
 `exec`     | 在正在运行的容器中运行命令
 `export`   | 将容器的文件系统导出为 tar 存档
-`history`  | 显示图像的历史
-`images`   | 列出图像
+`history`  | 显示镜像的历史
+`images`   | 列出镜像
 `import`   | 从 tarball 导入内容以创建文件系统映像
 `info`     | 显示系统范围的信息
 `inspect`  | 返回有关 Docker 对象的低级信息
 `kill`     | 杀死一个或多个正在运行的容器
-`load`     | 从 tar 存档或 STDIN 加载图像
+`load`     | 从 tar 存档或 STDIN 加载镜像
 `login`    | 登录到 Docker 注册表
 `logout`   | 从 Docker 注册表中注销
 `logs`     | 获取容器的日志
 `pause`    | 暂停一个或多个容器内的所有进程
 `port`     | 列出容器的端口映射或特定映射
 `ps`       | 列出容器
-`pull`     | 从注册表中提取图像或存储库
-`push`     | 将图像或存储库推送到注册表
+`pull`     | 从注册表中提取镜像或存储库
+`push`     | 将镜像或存储库推送到注册表
 `rename`   | 重命名容器
 `restart`  | 重启一个或多个容器
 `rm`       | 移除一个或多个容器
-`rmi`      | 移除一张或多张图片
+`rmi`      | 移除一张或多张镜像
 `run`      | 在新容器中运行命令
-`save`     | 将一个或多个图像保存到 tar 存档（默认流式传输到 STDOUT）
-`search`   | 在 `Docker Hub` 中搜索图像
+`save`     | 将一个或多个镜像保存到 tar 存档（默认流式传输到 STDOUT）
+`search`   | 在 `Docker Hub` 中搜索镜像
 `start`    | 启动一个或多个停止的容器
 `stats`    | 显示容器资源使用统计的实时流
 `stop`     | 停止一个或多个正在运行的容器
@ -431,12 +431,12 @@ $ docker volume prune
    --device-read-iops list    # 限制设备的读取速率（每秒 IO）（默认 []）
    --device-write-bps list    # 限制设备的写入速率（每秒字节数）（默认 []）
    --device-write-iops list   # 限制设备的写入速率（每秒 IO）（默认 []）
-    --disable-content-trust    # 跳过图像验证（默认为 true）
+    --disable-content-trust    # 跳过镜像验证（默认为 true）
    --dns list                 # 设置自定义 DNS 服务器
    --dns-option list          # 设置 DNS 选项
    --dns-search list          # 设置自定义 DNS 搜索域
    --domainname string        # 容器 NIS 域名
-    --entrypoint string        # 覆盖图像的默认入口点
+    --entrypoint string        # 覆盖镜像的默认入口点
 -e, --env list                 # 设置环境变量
    --env-file list            # 读入环境变量文件
    --expose list              # 公开一个端口或一系列端口
@ -480,7 +480,7 @@ $ docker volume prune
    --privileged               # 授予此容器扩展权限
 -p, --publish list             # 将容器的端口发布到主机
 -P, --publish-all              # 将所有暴露的端口发布到随机端口
-    --pull string              # 创建前拉取图像("always"|"missing"|"never")(默认"missing")
+    --pull string              # 创建前拉取镜像("always"|"missing"|"never")(默认"missing")
    --read-only                # 将容器的根文件系统挂载为只读
    --restart string           # 容器退出时应用的重启策略（默认“否”）
    --rm                       # 容器退出时自动移除
@ -533,7 +533,7 @@ $ docker volume prune
 `docker config`      | 管理 Docker 配置
 `docker container`   | 管理容器
 `docker context`     | 管理上下文
-`docker image`       | 管理图像
+`docker image`       | 管理镜像
 `docker manifest`    | 管理 Docker 镜像清单和清单列表
 `docker network`     | 管理网络
 `docker node`        | 管理 Swarm 节点
@ -550,12 +550,12 @@ $ docker volume prune
 ### docker images

 ```bash
-a, --all             显示所有图像（默认隐藏中间图像）
+-a, --all             显示所有镜像（默认隐藏中间镜像）
    --digests         显示摘要
 -f, --filter filter   根据提供的条件过滤输出
-    --format string   使用 Go 模板打印漂亮的图像
+    --format string   使用 Go 模板打印漂亮的镜像
    --no-trunc        不要截断输出
-q, --quiet           仅显示图像 ID
+-q, --quiet           仅显示镜像 ID
 ```

 Docker 示例
--- a/docs/dockerfile.md
+++ b/docs/dockerfile.md
@ -215,7 +215,7 @@ Dockerfile 示例

 ```dockerfile
 FROM lipanski/docker-static-website:latest
-# 使用 .dockerignore 文件来控制图像中的内容！
+# 使用 .dockerignore 文件来控制镜像中的内容！
 # 复制当前目录内容，到容器中
 COPY ./ .
 ```
--- a/docs/ffmpeg.md
+++ b/docs/ffmpeg.md
@ -581,6 +581,7 @@ $ ffmpeg -f concat -i mylist.txt -c:v copy -c:a flac -strict -2 output.mp4

 视频过滤器
 ---
+<!--rehype:body-class=cols-2-->

 ### 格式

@ -631,7 +632,6 @@ ffmpeg -i 1.mp4 -b:v 548k -vf delogo=x=10:y=10:w=120:h=45:show=1 output.mp4
 <!--rehype:className=wrap-text -->

 ### 创建缩略图
-<!--rehype:wrap-class=row-span-2-->

 在 10 秒时创建一个缩略图

@ -686,6 +686,7 @@ $ ffmpeg -i 1.mp4 -i test.mp3 \

 音频过滤器
 ---
+<!--rehype:body-class=cols-2-->

 ### 调节音量

@ -720,6 +721,7 @@ $ ffmpeg -i input.mp3 -af "channelmap=1-0|1-1" output.mp3

 流处理
 ---
+<!--rehype:body-class=cols-2-->

 ### 拉流

@ -736,6 +738,7 @@ $ ffmpeg -re -i test.mp4 -f flv rtmp://127.0.0.1/test
 ```

 ### 转发
+<!--rehype:wrap-class=col-span-2-->

 ```bash
 # 拉取流并转发
--- a/docs/flask.md
+++ b/docs/flask.md
@ -0,0 +1,183 @@
+Flask 备忘清单
+===
+
+本清单对 Flask 的入门进行了简要的概述，以及其常用示例。需要有 `HTML` 和 `Python` 基础。
+
+入门
+-----
+
+### 相关链接
+
+- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) _(developer.mozilla.org)_
+- [Python](https://www.python.org/) _(python.org)_
+- [Flask](https://flask.palletsprojects.com/) _(flask.palletsprojects.com)_
+- [Python 备忘清单](./python.md) _(jaywcjlove.github.io)_
+
+### Hello World
+<!--rehype:wrap-class=row-span-2-->
+
+#### hello.py
+
+```python
+# 导入 Flask 类
+from flask import Flask
+
+# 创建应用实例
+app = Flask(__name__) # 'Flask' 参数是 应用程序模块 或 包 的名称
+                      # __name__是适用于大多数情况的便捷快捷方式
+
+# 路由 (装饰器)
+@app.route('/')           # route()装饰器告诉 Flask 什么路径触发下面的功能
+def hello():
+   # 该函数返回我们想要在浏览器中显示的消息内容
+   return 'Hello World!'
+   # 默认类型 HTML, 因此字符串中的 HTML 将被浏览器渲染
+# 启动服务
+if __name__ == '__main__':
+   app.run()
+```
+
+### 运行 `hello.py` 程序
+<!--rehype:wrap-class=row-span-2-->
+
+```shell
+$ python hello.py
+ * Serving Flask app 'hello'
+ * Running on http://127.0.0.1:5000
+ * Press CTRL+C to quit
+```
+
+#### 或
+
+```shell
+$ flask --app hello run
+ * Serving Flask app 'hello'
+ * Running on http://127.0.0.1:5000
+ * Press CTRL+C to quit
+$ flask run --host=0.0.0.0
+```
+
+启用调试模式，使用 `--debug` 选项
+
+```bash
+$ flask --app hello --debug run
+```
+
+### HTML 转义
+
+```py
+from markupsafe import escape
+
+@app.route("/<name>")
+def hello(name):
+    return f"Hello, {escape(name)}!"
+```
+
+### 路由
+
+```py
+@app.route('/')
+def index():
+    return 'Index Page'
+
+@app.route('/hello')
+def hello():
+    return 'Hello, World'
+```
+
+### 变量规则
+<!--rehype:wrap-class=row-span-2-->
+
+```py
+from markupsafe import escape
+
+@app.route('/user/<username>')
+def show_user_profile(username):
+    # 显示该用户的用户个人资料
+    return f'User {escape(username)}'
+
+@app.route('/post/<int:post_id>')
+def show_post(post_id):
+    # 显示给定id的帖子，id是一个整数
+    return f'Post {post_id}'
+
+@app.route('/path/<path:subpath>')
+def show_subpath(subpath):
+    # 在 /path/ 之后显示子路径
+    return f'Subpath {escape(subpath)}'
+```
+
+转换器类型：
+
+:-- | --
+:-- | --
+`string` | （默认）接受任何没有斜杠的文本
+`int` | 接受正整数
+`float` | 接受正浮点值
+`path` | 像字符串但也接受斜线
+`uuid` | 接受 UUID 字符串
+
+### 唯一 URL / 重定向行为
+
+```py
+@app.route('/projects/')
+def projects():
+    return 'The project page'
+
+@app.route('/about')
+def about():
+    return 'The about page'
+```
+
+项目端点的规范 `URL` 有一个尾部斜杠。它类似于文件系统中的文件夹。如果您访问没有尾部斜杠 (`/projects`) 的 `URL`，`Flask` 会将您重定向到带有尾部斜杠 (`/projects/`) 的规范 `URL`
+
+### URL 建设
+
+```py
+from flask import url_for
+
+@app.route('/')
+def index():
+    return 'index'
+
+@app.route('/login')
+def login():
+    return 'login'
+
+@app.route('/user/<username>')
+def profile(username):
+    return f'{username}\'s profile'
+
+with app.test_request_context():
+    print(url_for('index'))
+    print(url_for('login'))
+    print(url_for('login', next='/'))
+    print(url_for('profile', username='John Doe'))
+```
+
+### HTTP 方法
+
+默认情况下，路由仅响应 `GET` 请求。您可以使用 `route()` 装饰器的方法参数来处理不同的 `HTTP` 方法
+
+```py
+from flask import request
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        return do_the_login()
+    else:
+        return show_the_login_form()
+```
+
+您还可以将不同方法的视图分成不同的函数。 `Flask` 为每个常见的 `HTTP` 方法提供了一种快捷方式，用于使用 `get()`、`post()` 等来装饰此类路由
+
+```py
+@app.get('/login')
+def login_get():
+    return show_the_login_form()
+
+@app.post('/login')
+def login_post():
+    return do_the_login()
+```
--- a/docs/flutter.md
+++ b/docs/flutter.md
@ -729,6 +729,166 @@ Row(

 例如，需要文本和图标位于一个行的两端，而中间留白时。就可以使用 `Spacer`

+### ListView
+
+`ListView` 是一个支持滚动的列表组件。该组件默认支持上下滑动。
+`ListView`的默认构造函数，会立即初始化`children`中的所有子`widget`，无法动态加载。
+
+```dart
+ListView(
+  children: [
+    Text('1'),
+    Text('2'),
+    Text('3'),
+    Text('4'),
+  ],
+),
+```
+
+需要动态加载，则可以使用 `ListView.builder()`命名构函数。
+
+```dart
+// 动态生成4个Text
+ListView.builder(
+  itemBuilder: (BuildContext context, int index) {
+    return Text('$index');
+  },
+  itemCount: 4,
+),
+```
+
+需要在对`ListView`中的`Item`添加分割线，则可以借助`ListView.separated()`。
+
+```dart
+// separatorBuilder 函数用于在元素之间插入分割线。
+// 也可以返回其他widget。该widget会被插入各个元素之间。
+ListView.separated(
+  itemBuilder: (BuildContext context, int index) {
+    return Text('$index');
+  },
+  itemCount: 4,
+  separatorBuilder: (BuildContext context, int index) {
+    // 使用Divider widget 画一条粗为5，颜色为红色的线
+    return const Divider(
+      height: 5,
+      thickness: 5,
+      color: Colors.red,
+    );
+  },
+),
+```
+
+### GridView
+<!--rehype:wrap-class=col-span-2-->
+`GridView`可将元素显示为二维网格状的列表组件，并支持主轴方向滚动。
+使用GridView() 构造函数，需要传入gridDelegate和children。Flutter中已经提供了两种实现方式，分别是:
+
+- `SliverGridDelegateWithFixedCrossAxisCount()` 用于交叉轴方向固定数。
+- `SliverGridDelegateWithMaxCrossAxisExtent()` 用于交叉轴方向限制最大长度。
+
+```dart
+// 使用SliverGridDelegateWithFixedCrossAxisCount
+GridView(
+  gridDelegate:
+      const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
+  children: List.generate(
+      8,
+      (index) => Container(
+            color: Colors.red[index % 8 * 100],
+            child: Text("index $index"),
+          )),
+),
+
+// 使用SliverGridDelegateWithMaxCrossAxisExtent
+ GridView(
+  gridDelegate:
+      SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 200),
+  children: List.generate(
+    8,
+    (index) => Container(
+      color: Colors.red[index % 8 * 100],
+      child: Text("index $index"),
+    ),
+  ),
+),
+```
+
+`GridView.builder()`命名构造可以实现元素的动态加载，与`ListView.builder()`类似
+
+```dart
+GridView.builder(
+  itemCount: 8,
+  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+      crossAxisCount: 4),
+  itemBuilder: (context, index) => Container(
+    color: Colors.red[index % 8 * 100],
+    child: Text("index $index"),
+  ),
+),
+```
+
+`Gridview.count()` 一个简单的构造函数，只需要传入`crossAxisCount`（交叉轴元素的个数）和`children`即可。
+
+```dart
+GridView.count(
+  crossAxisCount: 4, // 每行固定为4个
+  children: List.generate(
+      8,
+      (index) => Container(
+            color: Colors.red[index % 8 * 100],
+            child: Text("index $index"),
+          )),
+),
+```
+
+`GridView.extent()` 用于设定每个元素在交叉轴方向的最大尺寸。当程序运行在较大屏幕时通常能看到更多的元素，而不是少量元素的放大版。通过传入`maxCrossAxisExtent`,`Gridview`会根据屏幕尺寸自动选择合适的行数量。
+
+```dart
+GridView.extent(
+  maxCrossAxisExtent: 200,
+  children: List.generate(
+      8,
+      (index) => Container(
+            color: Colors.red[index % 8 * 100],
+            child: Text("index $index"),
+          )),
+),
+```
+
+`GridView.count()`和GridView.extent()`可以看作GridView的语法糖。
+
+### PageView
+
+使用`PageView`可以实现整屏页面滚动,默认为水平方向翻页。与`ListView`类似。
+
+- `pageSnapping`参数可以设置滑动时`Page`停留在任意位置。
+- `scrollDirection`参数设置滚动方向(默认为水平方向)。
+
+```dart
+PageView(
+  pageSnapping: false, // 取消页面固定
+  scrollDirection: Axis.vertical, // 设置为垂直方向滚动
+  children: [
+    for (int i = 0; i < 4; i++)
+      Container(
+        color: Colors.red[i % 4 * 100],
+      )
+  ],
+),
+```
+
+使用`PageView.builder()`命名构造，可以动态加载页面。与`ListView.builder()`类似。
+
+```dart
+PageView.builder(
+  pageSnapping: false,
+  scrollDirection: Axis.vertical,
+  itemBuilder: (BuildContext context, int index) => Container(
+    color: Colors.red[index % 4 * 100],
+  ),
+),
+```
+
 另见
 ---

--- a/docs/git.md
+++ b/docs/git.md
@ -395,7 +395,7 @@ $ git log --stat -M
 ```bash
 $ cat ~/.ssh/config
 Host gitlab.com
-# 直接使用 shadowsocks 提供的 socks5 代理端口
+# 直接使用 sh**socks 提供的 socks5 代理端口
 ProxyCommand nc -X 5 -x 127.0.0.1:1080 %h %p 

 Host github.com
@ -960,6 +960,41 @@ Host github.com
 ```
 <!--rehype:className=wrap-text-->

+git 代码统计
+---
+
+### 查看 git 上的个人代码量
+
+- `username` 需要改成自己的
+
+```bash
+git log --author="username" --pretty=tformat: --numstat | awk \
+'{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -
+```
+
+### 统计每个人增删行数
+
+```bash
+git log --format='%aN' | sort -u |\
+  while read name; do echo -en "$name\t";\
+  git log --author="$name" --pretty=tformat: --numstat | awk \
+  '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -; done
+```
+
+### 查看仓库提交者排名
+
+这里是排名前十，也可以更改排名
+
+```bash
+git log --pretty='%aN' | sort | uniq -c | sort -k1 -n -r | head -n 10
+```
+
+### 提交数统计
+
+```bash
+git log --oneline | wc -l
+```
+
 Conventional Commmits
 ----

--- a/docs/htmx.md
+++ b/docs/htmx.md
@ -17,9 +17,15 @@
 [htmx](https://htmx.org/) 是 [intercooler.js](http://intercoolerjs.org/) 的继承者

 ```html
-<script src="https://unpkg.com/htmx.org@1.8.4"></script>
+<script
+  src="https://unpkg.com/htmx.org@1.8.4"
+>
+</script>
 <!-- 有一个按钮POST，通过AJAX点击 -->
-<button hx-post="/clicked" hx-swap="outerHTML">
+<button
+  hx-post="/clicked"
+  hx-swap="outerHTML"
+>
  点击我
 </button>
 ```
@ -79,7 +85,7 @@ import 'htmx.org';
 表单按照通常的 `REST-ful` 模式将 `PUT` 发回 `/contacts/1`

 ### 删除行
-<!--rehype:wrap-class=col-span-2-->
+<!--rehype:wrap-class=col-span-2 row-span-2-->

 ```html
 <table class="table delete-row-example">
@ -141,6 +147,20 @@ img {
 }
 ```

+### hx-swap
+
+:-- | --
+:-- | --
+`innerHTML` | 默认，替换目标元素的内部 `html`
+`outerHTML` | 用响应替换整个目标元素
+`beforebegin` | 在目标元素之前插入响应
+`afterbegin` | 目标元素的第一个子元素之前插入响应
+`beforeend` | 目标元素的最后一个子元素之后插入响应
+`afterend` | 在目标元素之后插入响应
+`delete` | 无论响应如何，都删除目标元素
+`none` | 不附加来自响应的内容 <br />_(带外项目仍将被处理)_
+<!--rehype:className=left-align-->
+
 API 参考
 ---
 <!--rehype:body-class=cols-2-->
--- a/docs/intelli-j-idea.md
+++ b/docs/intelli-j-idea.md
@ -0,0 +1,195 @@
+IntelliJ IDEA 键盘快捷键
+===
+
+IntelliJ IDEA 是一款非常优秀的 Java IDE，它的大部分命令都有快捷键，让你的手不离开键盘
+
+IDEA Windows 和 Linux 键盘映射
+---
+
+### 编辑
+<!--rehype:wrap-class=row-span-5-->
+
+快捷键 | 说明
+:-- | --
+`Ctrl` `Space`| 基本代码完成
+`Ctrl` `Shift` `Space`| 智能代码完成
+`Ctrl` `Shift` `Enter`| 完整声明
+`Ctrl` `P`| 参数信息
+`Ctrl` `Q`| 快速文档查找
+`Shift` `F1`| 外部文档
+`Ctrl` `hover`| 简介
+`Ctrl` `F1`| 插入符号处的错误或警告
+`Alt` `Insert`| 生成代码
+`Ctrl` `O`| 覆盖方法
+`Ctrl` `I`| 实现方法
+`Ctrl` `Alt` `T`| 环绕着
+`Ctrl` `/`| 注释或取消注释行
+`Ctrl` `Shift` `/`| 评论或取消评论块
+`Ctrl` `W`| 选择连续递增的代码块
+`Ctrl` `Shift` `W`| 将当前选择减少到以前的状态
+`Alt` `Q`| 上下文信息
+`Alt` `Enter`| 显示意图操作和快速修复
+`Ctrl` `Alt` `L`| 重新格式化代码
+`Ctrl` `Alt` `O`| 优化导入
+`Ctrl` `Alt` `I`| 自动缩进行
+`Tab`|   缩进所选行
+`Shift` `Tab`|   取消缩进所选行
+`Ctrl` `X`| 将当前行或选定的块剪切到剪贴板
+`Ctrl` `C`| 将当前行或选定的块复制到剪贴板
+`Ctrl` `V`| 从剪贴板粘贴
+`Ctrl` `Shift` `V`| 从最近的缓冲区粘贴
+`Ctrl` `D`| 复制当前行或选定的块
+`Ctrl` `Y`| 删除插入符处的行
+`Ctrl` `Shift` `J`| 智能线路加入
+`Ctrl` `Enter`| 智能分线
+`Shift` `Enter`| 开始新行
+`Ctrl` `Shift` `U`| 在插入符号或选定块处切换单词的大小写
+`Ctrl` `Shift` `]` _/_ `[`| 选择直到代码块结束/开始
+`Ctrl` `Backspace`| 删除到词尾/开头
+`Ctrl` `+` _/_ `-`| 展开/折叠代码块
+`Ctrl` `Shift` `+`| 展开全部
+`Ctrl` `Shift` `-`| 全部收缩
+`Ctrl` `F4`| 关闭活动编辑器选项卡
+<!--rehype:className=shortcuts-->
+
+### 使用搜索
+
+快捷键 | 说明
+:-- | --
+`Alt` `F7` _/_ `Ctrl` `F7`| 查找用法/在文件中查找用法
+`Ctrl` `Shift` `F7`| 突出显示文件中的用法
+`Ctrl` `Alt` `F7`| 显示用法
+<!--rehype:className=shortcuts-->
+
+### 导航
+<!--rehype:wrap-class=row-span-4-->
+
+快捷键 | 说明
+:-- | --
+`Ctrl` `N`| 去 class
+`Ctrl` `Shift` `N`| 转到文件
+`Ctrl` `Alt` `Shift` `N`| 转到符号
+`Alt` `Right` _/_ `Left`| 转到下一个/上一个编辑器选项卡
+`F12`| 返回上一个工具窗口
+`Esc`| 转到编辑器
+`Shift` `Esc`| 隐藏活动或最后一个活动窗口
+`Ctrl` `Shift` `F4`| 关闭活动运行，消息...
+`Ctrl` `G`| 去线
+`Ctrl` `E`| 最近的文件弹出窗口
+`Ctrl` `Alt` `Left` _/_ `Right`| 向后/向前导航
+`Ctrl` `Shift` `Backspace`| 导航到上次编辑位置
+`Alt` `F1`| 在任何视图中选择当前文件或符号
+`Ctrl` `B` _/_ `Ctrl` `Click`| 去申报
+`Ctrl` `Alt` `B`| 转到实施
+`Ctrl` `Shift` `I`| 打开快速定义查找
+`Ctrl` `Shift` `B`| 转到类型声明
+`Ctrl` `U`| 转到超方法/超类
+`Alt` `Up` _/_ `Down`| 转到上一个/下一个方法
+`Ctrl` `]/[`| 移动到代码块结束/开始
+`Ctrl` `F12`| 文件结构弹出窗口
+`Ctrl` `H`| 类型层次结构
+`Ctrl` `Shift` `H`| 方法层次
+`Ctrl` `Alt` `H`| 调用层级
+`F2` _/_ `Shift` `F2`| 下一个/上一个突出显示的错误
+`F4` _/_ `Ctrl` `Enter`| 编辑源/查看源
+`Alt` `Home`| 显示导航栏
+`F11`| 切换书签
+`Ctrl` `F11`| 使用助记符切换书签
+`Ctrl` `0...9`| 转到编号书签
+`Shift` `F11`| 显示书签
+<!--rehype:className=shortcuts-->
+
+### 搜索/替换
+
+快捷键 | 说明
+:-- | --
+`Double Shift`| 到处搜索
+`Ctrl` `F`| 寻找
+`F3` `Shift` `F3`| 查找下一个/查找上一个
+`Ctrl` `R`| 代替
+`Ctrl` `Shift` `F`| 在路径中查找
+`Ctrl` `Shift` `R`| 在路径中替换
+<!--rehype:className=shortcuts-->
+
+### 实时模板
+
+快捷键 | 说明
+:-- | --
+`Ctrl` `Alt` `J` | 用实时模板环绕
+`Ctrl` `J` | 插入实时模板
+`iter` | 按照Java SDK 1.5风格迭代
+`inst` | 使用 instanceof 检查对象类型并将其向下转换
+`itco` | 迭代 java.util.Collection 的元素
+`itit` | 迭代 java.util.Iterator 的元素
+`itli` | 迭代 java.util.List 的元素
+`psf` | 公共静态决赛
+`thr` | 扔新的
+<!--rehype:className=shortcuts-->
+
+### 重构
+
+快捷键 | 说明
+:-- | --
+`F5` | 复制
+`F6` | 移动
+`Alt` `Delete` | 安全删除
+`Shift` `F6` | 改名
+`Ctrl` `F6` | 更改签名
+`Ctrl` `Alt` `N` | 排队
+`Ctrl` `Alt` `M` | 提取方法
+`Ctrl` `Alt` `V` | 提取变量
+`Ctrl` `Alt` `F` | 提取字段
+`Ctrl` `Alt` `C` | 提取常量
+`Ctrl` `Alt` `P` | 提取参数
+<!--rehype:className=shortcuts-->
+
+### 调试
+
+快捷键 | 说明
+:-- | --
+`F8/F7` | 跨过/进入
+`Shift` `F7` _/_ `Shift` `F8` | 智能步入/走出
+`Alt` `F9` | 运行到光标处
+`Alt` `F8` | 评估表达
+`F9` | 恢复程序
+`Ctrl` `F8` | 切换断点
+`Ctrl` `Shift` `F8` | 查看断点
+<!--rehype:className=shortcuts-->
+
+### 编译运行
+
+快捷键 | 说明
+:-- | --
+`Ctrl` `F9` | 做项目
+`Ctrl` `Shift` `F9` | 编译选定的文件、包或模块
+`Alt` `Shift` `F10` _/_ `F9` | 选择配置并运行/和调试
+`Shift` `F10` _/_ `F9` | 运行/调试
+`Ctrl` `Shift` `F10` | 从编辑器运行上下文配置
+<!--rehype:className=shortcuts-->
+
+### VCS/本地历史
+
+快捷键 | 说明
+:-- | --
+`Ctrl` `K` | 提交项目到 VCS
+`Ctrl` `T` | 从 VCS 更新
+`Alt` `Shift` `C` | 查看最近的更改
+`Alt` <kbd>\`</kbd>  | VCS 操作弹出窗口
+<!--rehype:className=shortcuts-->
+
+### 一般的
+
+快捷键 | 说明
+:-- | --
+`Alt` `0...9` | 打开相应的工具窗口
+`Ctrl` `S` | 保存全部
+`Ctrl` `Alt` `Y` | 同步
+`Ctrl` `Shift` `F12` | 切换最大化编辑器
+`Alt` `Shift` `F` | 添加到收藏夹
+`Alt` `Shift` `I` | 检查当前文件
+`Ctrl` <kbd>\`</kbd> | 快速切换电流方案
+`Ctrl` `Alt` `S` | 打开设置对话框
+`Ctrl` `Alt` `Shift` `S` | 打开项目结构对话框
+`Ctrl` `Shift` `A` | 寻找行动
+`Ctrl` `Tab` | 在工具和选项卡之间切换
+<!--rehype:className=shortcuts-->
--- a/docs/jquery.md
+++ b/docs/jquery.md
@ -0,0 +1,689 @@
+jQuery 备忘清单
+===
+
+[jQuery](https://jquery.com/) 备忘单对于初学者和有经验的开发人员都是很好的参考
+
+入门
+-----
+
+### 引入 jQuery
+
+```js
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+```
+<!--rehype:className=wrap-text-->
+
+#### 官方 CDN
+
+```js
+<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
+```
+<!--rehype:className=wrap-text-->
+
+### jQuery 语法
+
+```js
+$(selector).methodOrFunction();
+```
+
+#### 例子
+
+```js
+$('#menu').on('click', () =>{
+  $(this).hide();  
+});
+$("body").css("background", "red");
+```
+
+### jQuery 文档准备就绪
+
+```js
+$(document).ready(function() {
+  // 在加载 DOM 后运行
+  alert('DOM fully loaded!');
+});
+```
+
+```js
+$(function(){
+  // 在加载 DOM 后运行
+  alert('DOM fully loaded!');
+});
+```
+
+jQuery 选择器
+----------
+
+### 例子
+
+```js
+$("button").click(() => {
+    $(":button").css("color", "red");
+});
+```
+
+#### 组合选择器
+
+```js
+$("selector1, selector2 ...selectorn")
+```
+
+### 基本
+
+- [*](https://api.jquery.com/all-selector/) _选择所有元素_<!--rehype:tooltips-->
+- [.class](https://api.jquery.com/class-selector/) _选择具有给定类的所有元素_<!--rehype:tooltips-->
+- [element](https://api.jquery.com/element-selector/) _选择具有给定标签名称的所有元素_<!--rehype:tooltips-->
+- [#id](https://api.jquery.com/id-selector/) _选择具有给定 id 属性的单个元素_<!--rehype:tooltips-->
+- [:hidden](https://api.jquery.com/hidden-selector/) _选择所有隐藏的元素_<!--rehype:tooltips-->
+- [:visible](https://api.jquery.com/visible-selector/) _选择所有可见的元素_<!--rehype:tooltips-->
+- [:contains()](https://api.jquery.com/contains-selector/) _选择包含指定文本的所有元素_<!--rehype:tooltips-->
+- [:empty](https://api.jquery.com/empty-selector/) _选择所有没有子元素的元素(包括文本节点)_<!--rehype:tooltips-->
+- [:has()](https://api.jquery.com/has-selector/) _选择至少包含一个与指定选择器匹配的元素的元素_<!--rehype:tooltips-->
+- [:parent](https://api.jquery.com/parent-selector/) _选择具有至少一个子节点(元素或文本)的所有元素_<!--rehype:tooltips-->
+- [parent &gt; child](https://api.jquery.com/child-selector/) _选择由父元素指定的子元素指定的所有直接子元素_<!--rehype:tooltips-->
+- [ancestor descendant](https://api.jquery.com/descendant-selector/) _选择作为给定祖先的后代的所有元素_<!--rehype:tooltips-->
+- [prev + next](https://api.jquery.com/next-adjacent-Selector/) _选择所有与 next 匹配且紧接在其前面的同级 prev 的下一个元素_<!--rehype:tooltips-->
+- [prev ~ siblings](https://api.jquery.com/next-siblings-selector/) _选择 prev 元素之后的所有同级元素，具有相同的父元素，并匹配过滤同级选择器_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 基本过滤器
+
+- [:animated](https://api.jquery.com/animated-selector/) _在运行选择器时选择动画进度中的所有元素_<!--rehype:tooltips-->
+- [:eq()](https://api.jquery.com/eq-selector/) _选择匹配集中索引 n 处的元素_<!--rehype:tooltips-->
+- [:even](https://api.jquery.com/even-selector/) _选择偶数元素，索引为零。 另见：奇数_<!--rehype:tooltips-->
+- [:first](https://api.jquery.com/first-selector/) _选择第一个匹配的 DOM 元素_<!--rehype:tooltips-->
+- [:gt()](https://api.jquery.com/gt-selector/) _选择匹配集中索引大于索引的所有元素_<!--rehype:tooltips-->
+- [:header](https://api.jquery.com/header-selector/) _选择所有标题元素，如 h1、h2、h3 等_<!--rehype:tooltips-->
+- [:lang()](https://api.jquery.com/lang-selector/) _选择指定语言的所有元素_<!--rehype:tooltips-->
+- [:last](https://api.jquery.com/last-selector/) _选择最后一个匹配的元素_<!--rehype:tooltips-->
+- [:lt()](https://api.jquery.com/lt-selector/) _选择匹配集中索引小于索引的所有元素_<!--rehype:tooltips-->
+- [:not()](https://api.jquery.com/not-selector/) _选择与给定选择器不匹配的所有元素_<!--rehype:tooltips-->
+- [:odd](https://api.jquery.com/odd-selector/) _选择奇数元素，索引为零。 另见：甚至_<!--rehype:tooltips-->
+- [:root](https://api.jquery.com/root-selector/) _选择作为文档根的元素_<!--rehype:tooltips-->
+- [:target](https://api.jquery.com/target-selector/) _选择由文档的 URI 的片段标识符指示的目标元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 属性
+
+- [[name|="value"]](https://api.jquery.com/attribute-contains-prefix-selector/) _选择具有指定属性且值等于给定字符串或以该字符串开头后跟连字符 (-) 的元素_<!--rehype:tooltips-->
+- [[name*="value"]](https://api.jquery.com/attribute-contains-selector/) _选择具有指定属性且值包含给定子字符串的元素_<!--rehype:tooltips-->
+- [[name~="value"]](https://api.jquery.com/attribute-contains-word-selector/) _选择具有指定属性的元素，其值包含给定单词，由空格分隔_<!--rehype:tooltips-->
+- [[name$="value"]](https://api.jquery.com/attribute-ends-with-selector/) _选择具有指定属性且值恰好以给定字符串结尾的元素。 比较区分大小写_<!--rehype:tooltips-->
+- [[name="value"]](https://api.jquery.com/attribute-equals-selector/) _选择具有指定属性且值恰好等于特定值的元素_<!--rehype:tooltips-->
+- [[name!="value"]](https://api.jquery.com/attribute-not-equal-selector/) _选择不具有指定属性或具有指定属性但不具有特定值的元素_<!--rehype:tooltips-->
+- [[name^="value"]](https://api.jquery.com/attribute-starts-with-selector/) _选择具有指定属性且值恰好以给定字符串开头的元素_<!--rehype:tooltips-->
+- [[name]](https://api.jquery.com/has-attribute-selector/) _选择具有指定属性和任意值的元素_<!--rehype:tooltips-->
+- [[name="value"][name2="value2"]](https://api.jquery.com/multiple-attribute-selector/) _匹配匹配所有指定属性过滤器的元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 子过滤器
+
+- [:first-child](https://api.jquery.com/first-child-selector/) _选择作为其父元素的第一个子元素的所有元素_<!--rehype:tooltips-->
+- [:first-of-type](https://api.jquery.com/first-of-type-selector/) _选择具有相同元素名称的兄弟姐妹中第一个的所有元素_<!--rehype:tooltips-->
+- [:last-child](https://api.jquery.com/last-child-selector/) _选择作为其父元素的最后一个子元素的所有元素_<!--rehype:tooltips-->
+- [:last-of-type](https://api.jquery.com/last-of-type-selector/) _选择具有相同元素名称的兄弟中最后一个的所有元素_<!--rehype:tooltips-->
+- [:nth-child()](https://api.jquery.com/nth-child-selector/) _选择作为其父元素的第 n 个子元素的所有元素_<!--rehype:tooltips-->
+- [:nth-last-child()](https://api.jquery.com/nth-last-child-selector/) _选择作为其父元素的第 n 个子元素的所有元素，从最后一个元素到第一个元素计数_<!--rehype:tooltips-->
+- [:nth-last-of-type()](https://api.jquery.com/nth-last-of-type-selector/) _选择所有元素，这些元素是其父元素的第 n 个子元素，相对于具有相同元素名称的兄弟元素，从最后一个元素到第一个元素计数_<!--rehype:tooltips-->
+- [:nth-of-type()](https://api.jquery.com/nth-of-type-selector/) _选择所有元素，这些元素是其父元素相对于具有相同元素名称的兄弟元素的第 n 个子元素_<!--rehype:tooltips-->
+- [:only-child](https://api.jquery.com/only-child-selector/) _选择作为其父元素的唯一子元素的所有元素_<!--rehype:tooltips-->
+- [:only-of-type()](https://api.jquery.com/only-of-type-selector/) _选择所有没有同名元素的元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### Forms
+
+- [:button](https://api.jquery.com/button-selector/) _选择所有按钮元素和按钮类型的元素_<!--rehype:tooltips-->
+- [:checkbox](https://api.jquery.com/checkbox-selector/) _选择复选框类型的所有元素_<!--rehype:tooltips-->
+- [:checked](https://api.jquery.com/checked-selector/) _匹配所有选中或选择的元素_<!--rehype:tooltips-->
+- [:disabled](https://api.jquery.com/disabled-selector/) _选择所有禁用的元素_<!--rehype:tooltips-->
+- [:enabled](https://api.jquery.com/enabled-selector/) _选择所有启用的元素_<!--rehype:tooltips-->
+- [:focus](https://api.jquery.com/focus-selector/) _如果当前获得焦点，则选择元素_<!--rehype:tooltips-->
+- [:file](https://api.jquery.com/file-selector/) _选择类型文件的所有元素_<!--rehype:tooltips-->
+- [:image](https://api.jquery.com/image-selector/) _选择图像类型的所有元素_<!--rehype:tooltips-->
+- [:input](https://api.jquery.com/input-selector/) _选择所有输入、文本区域、选择和按钮元素_<!--rehype:tooltips-->
+- [:password](https://api.jquery.com/password-selector/) _选择密码类型的所有元素_<!--rehype:tooltips-->
+- [:radio](https://api.jquery.com/radio-selector/) _选择无线电类型的所有元素_<!--rehype:tooltips-->
+- [:reset](https://api.jquery.com/reset-selector/) _选择重置类型的所有元素_<!--rehype:tooltips-->
+- [:selected](https://api.jquery.com/selected-selector/) _选择所有选中的元素_<!--rehype:tooltips-->
+- [:submit](https://api.jquery.com/submit-selector/) _选择提交类型的所有元素_<!--rehype:tooltips-->
+- [:text](https://api.jquery.com/text-selector/) _选择文本类型的所有输入元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+jQuery 属性
+-----
+
+### 例子
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+$('h2').css({
+  color: 'blue',
+  backgroundColor: 'gray',
+  fontSize: '24px'
+});
+```
+
+#### jQuery 添加类
+
+```js
+$('.button').addClass('active'); 
+```
+
+#### jQuery 移除类
+
+```js
+$('.button').on('mouseleave', evt => {
+   let e = evt.currentTarget;
+   $(e).removeClass('active');
+});
+```
+
+#### jQuery 切换类
+
+```js
+$('.choice').toggleClass('highlighted');
+```
+
+### Attributes
+
+- [.attr()](https://api.jquery.com/attr/) _获取匹配元素集中第一个元素的属性值_<!--rehype:tooltips-->
+- [.prop()](https://api.jquery.com/prop/) _获取匹配元素集中第一个元素的属性值_<!--rehype:tooltips-->
+- [.removeAttr()](https://api.jquery.com/removeAttr/) _从匹配元素集中的每个元素中删除一个属性_<!--rehype:tooltips-->
+- [.removeProp()](https://api.jquery.com/removeProp/) _删除匹配元素集的属性_<!--rehype:tooltips-->
+- [.val()](https://api.jquery.com/val/) _获取匹配元素集中第一个元素的当前值_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+#### Data
+
+- [jQuery.data()](https://api.jquery.com/jQuery.data/) _存储与指定元素关联的任意数据。 返回设置的值_<!--rehype:tooltips-->
+- [.data()](https://api.jquery.com/data/) _存储与匹配元素关联的任意数据_<!--rehype:tooltips-->
+- [jQuery.hasData()](https://api.jquery.com/jQuery.hasData/) _确定一个元素是否有任何与之关联的 jQuery 数据_<!--rehype:tooltips-->
+- [jQuery.removeData()](https://api.jquery.com/jQuery.removeData/) _删除以前存储的数据_<!--rehype:tooltips-->
+- [.removeData()](https://api.jquery.com/removeData/) _删除以前存储的数据_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### CSS
+
+- [.addClass()](https://api.jquery.com/addClass/) _将指定的类添加到匹配元素集中的每个元素_<!--rehype:tooltips-->
+- [.hasClass()](https://api.jquery.com/hasClass/) _确定是否有任何匹配的元素被分配给给定的类_<!--rehype:tooltips-->
+- [.removeClass()](https://api.jquery.com/removeClass/) _从匹配元素集中的每个元素中删除单个类、多个类或所有类_<!--rehype:tooltips-->
+- [.toggleClass()](https://api.jquery.com/toggleClass/) _根据类的存在或状态参数的值，从匹配元素集中的每个元素添加或删除一个或多个类_<!--rehype:tooltips-->
+- [.css()](https://api.jquery.com/css/) _获取匹配元素集中第一个元素的计算样式属性_<!--rehype:tooltips-->
+- [jQuery.cssHooks](https://api.jquery.com/jQuery.cssHooks/) _直接连接到 jQuery 以覆盖特定 CSS 属性的检索或设置方式、标准化 CSS 属性命名或创建自定义属性_<!--rehype:tooltips-->
+- [jQuery.cssNumber](https://api.jquery.com/jQuery.cssNumber/) _包含所有可以在没有单位的情况下使用的 CSS 属性的对象。`.css()` 方法使用此对象来查看它是否可以将 px 附加到无单位值_<!--rehype:tooltips-->
+- [jQuery.escapeSelector()](https://api.jquery.com/jQuery.escapeSelector/) _转义任何在 CSS 选择器中具有特殊含义的字符_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### Dimensions
+
+- [.height()](https://api.jquery.com/height/) _获取匹配元素集中第一个元素的当前计算高度_<!--rehype:tooltips-->
+- [.innerHeight()](https://api.jquery.com/innerHeight/) _获取匹配元素集中第一个元素的当前计算高度，包括填充但不包括边框_<!--rehype:tooltips-->
+- [.innerWidth()](https://api.jquery.com/innerWidth/) _获取匹配元素集中第一个元素的当前计算内部宽度，包括填充但不包括边框_<!--rehype:tooltips-->
+- [.outerHeight()](https://api.jquery.com/outerHeight/) _获取匹配元素集中第一个元素的当前计算外部高度(包括填充、边框和可选的边距)_<!--rehype:tooltips-->
+- [.outerWidth()](https://api.jquery.com/outerWidth/) _获取匹配元素集中第一个元素的当前计算外部宽度(包括填充、边框和可选的边距)_<!--rehype:tooltips-->
+- [.width()](https://api.jquery.com/width/) _获取匹配元素集中第一个元素的当前计算宽度_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### Offset
+
+- [.offset()](https://api.jquery.com/offset/) _获取匹配元素集中第一个元素相对于文档的当前坐标_<!--rehype:tooltips-->
+- [.offsetParent()](https://api.jquery.com/offsetParent/) _获取定位的最近的祖先元素_<!--rehype:tooltips-->
+- [.position()](https://api.jquery.com/position/) _获取匹配元素集中第一个元素相对于偏移父元素的当前坐标_<!--rehype:tooltips-->
+- [.scrollLeft()](https://api.jquery.com/scrollLeft/) _获取匹配元素集中第一个元素的滚动条的当前水平位置_<!--rehype:tooltips-->
+- [.scrollTop()](https://api.jquery.com/scrollTop/) _获取匹配元素集中第一个元素的滚动条的当前垂直位置，或为每个匹配元素设置滚动条的垂直位置_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+jQuery 操控
+------------
+
+### Examples
+<!--rehype:wrap-class=row-span-3-->
+
+```js
+/*<span>Span.</span>*/
+$('span').after('<p>Paragraph.</p>');
+/*<span>Span.</span><p>Paragraph.</p>*/
+/*<span>Span.</span>*/
+$('<span>Span.</span>').replaceAll('p');
+/*<p>Span.</p>*/
+/*<span>This is span.</span>*/
+$('span').wrap('<p></p>');
+/*<p><span>This is span.</span></p>*/
+```
+
+### 复刻
+
+- [.clone()](https://api.jquery.com/clone/) _创建匹配元素集的深层副本_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### DOM 插入，环绕
+
+- [.wrap()](https://api.jquery.com/wrap/) _在匹配元素集中的每个元素周围包装一个 HTML 结构_<!--rehype:tooltips-->
+- [.wrapAll()](https://api.jquery.com/wrapAll/) _在匹配元素集中的所有元素周围包装一个 HTML 结构_<!--rehype:tooltips-->
+- [.wrapInner()](https://api.jquery.com/wrapInner/) _围绕匹配元素集中每个元素的内容包装一个 HTML 结构_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### DOM 插入，内部
+
+- [.append()](https://api.jquery.com/append/) _在匹配的元素集中，插入由参数指定的内容插入每个元素的末尾_<!--rehype:tooltips-->
+- [.appendTo()](https://api.jquery.com/appendTo/) _将匹配元素集中的每个元素插入目标末端_<!--rehype:tooltips-->
+- [.html()](https://api.jquery.com/html/) _在匹配元素集中获取第一个元素的HTML内容_<!--rehype:tooltips-->
+- [.prepend()](https://api.jquery.com/prepend/) _插入由参数指定的内容插入匹配元素集中每个元素的开始_<!--rehype:tooltips-->
+- [.prependTo()](https://api.jquery.com/prependTo/) _将匹配元素集中的每个元素插入目标开始_<!--rehype:tooltips-->
+- [.text()](https://api.jquery.com/text/) _在匹配的元素集（包括其后代）中获取每个元素的组合文本内容_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### DOM 插入，外部
+
+- [.after()](https://api.jquery.com/after/) _在匹配元素集中的每个元素之后，插入由参数指定的内容_<!--rehype:tooltips-->
+- [.before()](https://api.jquery.com/before/) _在匹配元素集中的每个元素之前，插入由参数指定的内容_<!--rehype:tooltips-->
+- [.insertAfter()](https://api.jquery.com/insertAfter/) _在目标之后插入匹配元素集中的每个元素_<!--rehype:tooltips-->
+- [.insertBefore()](https://api.jquery.com/insertBefore/) _在目标之前插入匹配元素集中的每个元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### DOM 移除
+
+- [.detach()](https://api.jquery.com/detach/) _从DOM上删除一组匹配的元素_<!--rehype:tooltips-->
+- [.empty()](https://api.jquery.com/empty/) _从DOM中删除一组匹配元素的所有子节点_<!--rehype:tooltips-->
+- [.remove()](https://api.jquery.com/remove/) _从DOM上删除一组匹配的元素_<!--rehype:tooltips-->
+- [.unwrap()](https://api.jquery.com/unwrap/) _从DOM上删除一组匹配元素的父母，将匹配的元素留在其位置_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### DOM 替换
+
+- [.replaceAll()](https://api.jquery.com/replaceAll/) _用匹配的元素集替换每个目标元素_<!--rehype:tooltips-->
+- [.replaceWith()](https://api.jquery.com/replaceWith/) _用提供的新内容替换一组匹配元素中的每个元素，然后返回已删除的元素集_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+jQuery 遍历
+------------
+
+### 过滤
+
+- [.eq()](https://api.jquery.com/eq/) _将匹配的元素集减少到指定索引处的集合_<!--rehype:tooltips-->
+- [.filter()](https://api.jquery.com/filter/) _将匹配的元素集减少到匹配选择器或传递函数测试的元素_<!--rehype:tooltips-->
+- [.first()](https://api.jquery.com/first/) _将匹配的元素集减少到集合中的第一个_<!--rehype:tooltips-->
+- [.has()](https://api.jquery.com/has/) _将匹配的元素集减少到具有与选择器或DOM元素相匹配的后代的元素_<!--rehype:tooltips-->
+- [.is()](https://api.jquery.com/is/) _检查当前匹配的元素与选择器，元素或jQuery对象的元素集，如果至少其中一个元素与给定参数匹配，则返回true_<!--rehype:tooltips-->
+- [.last()](https://api.jquery.com/last/) _将匹配的元素集减少到集合中的最后一个元素_<!--rehype:tooltips-->
+- [.map()](https://api.jquery.com/map/) _将当前匹配的每个元素通过函数传递，从而产生包含返回值的新jQuery对象_<!--rehype:tooltips-->
+- [.not()](https://api.jquery.com/not/) _从匹配元素集中删除元素_<!--rehype:tooltips-->
+- [.slice()](https://api.jquery.com/slice/) _将匹配的元素集减少为由一系列索引指定的子集_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 杂项遍历
+
+- [.add()](https://api.jquery.com/add/) _创建一个新的jQuery对象，其中添加到匹配元素集中的元素_<!--rehype:tooltips-->
+- [.addBack()](https://api.jquery.com/addBack/) _将堆栈上的上一个元素添加到当前集合中，并由选择器进行过滤_<!--rehype:tooltips-->
+- [.andSelf()](https://api.jquery.com/andSelf/) _将堆栈上的先前元素添加到当前集合中_<!--rehype:tooltips-->
+- [.contents()](https://api.jquery.com/contents/) _在一组匹配元素中获取每个元素的孩子，包括文本和评论节点_<!--rehype:tooltips-->
+- [.each()](https://api.jquery.com/each/) _在jQuery对象上迭代，为每个匹配的元素执行一个函数_<!--rehype:tooltips-->
+- [.end()](https://api.jquery.com/end/) _结束当前链中最新的过滤操作，并将匹配元素集返回其先前状态_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 树遍历
+
+- [.children()](https://api.jquery.com/children/) _在一组匹配元素中获取每个元素的孩子，并被选择器进行过滤_<!--rehype:tooltips-->
+- [.closest()](https://api.jquery.com/closest/) _对于集合中的每个元素，通过测试元素本身并通过其祖先在DOM树中的祖先进行遍历来获取与选择器匹配的第一个元素_<!--rehype:tooltips-->
+- [.find()](https://api.jquery.com/find/) _在当前匹配元素集中获取每个元素的后代，并由选择器，jQuery对象或元素过滤_<!--rehype:tooltips-->
+- [.next()](https://api.jquery.com/next/) _在匹配的元素集中，立即获取每个元素的兄弟姐妹。 如果提供了选择器，则仅在匹配该选择器的情况下才能检索下一个兄弟姐妹_<!--rehype:tooltips-->
+- [.nextAll()](https://api.jquery.com/nextAll/) _在一组匹配元素中获取每个元素的所有以下兄弟姐妹，并由选择器进行过滤_<!--rehype:tooltips-->
+- [.nextUntil()](https://api.jquery.com/nextUntil/) _将每个元素的所有以下兄弟姐妹添加到，但不包括通过选择器，DOM节点或jQuery对象匹配的元素_<!--rehype:tooltips-->
+- [.parent()](https://api.jquery.com/parent/) _在当前匹配元素集中获取每个元素的父，由选择器选择过滤_<!--rehype:tooltips-->
+- [.parents()](https://api.jquery.com/parents/) _在当前匹配元素集中获取每个元素的祖先，并被选择器进行过滤_<!--rehype:tooltips-->
+- [.parentsUntil()](https://api.jquery.com/parentsUntil/) _在当前匹配元素集中获取每个元素的祖先，直到但不包括由选择器，DOM节点或jQuery对象匹配的元素_<!--rehype:tooltips-->
+- [.prev()](https://api.jquery.com/prev/) _在匹配元素集中获取每个元素的立即兄弟姐妹。 如果提供了选择器，则仅在匹配该选择器时才检索先前的同胞_<!--rehype:tooltips-->
+- [.prevAll()](https://api.jquery.com/prevAll/) _在一组匹配元素中获取每个元素的所有先前兄弟姐妹，并由选择器进行过滤_<!--rehype:tooltips-->
+- [.prevUntil()](https://api.jquery.com/prevUntil/) _将每个元素的所有先前兄弟姐妹添加到，但不包括由选择器，DOM节点或jQuery对象匹配的元素_<!--rehype:tooltips-->
+- [.siblings()](https://api.jquery.com/siblings/) _在匹配的元素集中获取每个元素的兄弟姐妹，并被选择器进行过滤_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+jQuery 事件
+------------
+
+### Examples
+<!--rehype:wrap-class=row-span-6-->
+
+```js
+// 鼠标事件“点击”
+$('#menu-button').on('click', () => {
+  $('#menu').show();
+});
+// 键盘事件“键盘”
+$('#textbox').on('keyup', () => {
+  $('#menu').show();
+});
+// 滚动事件“滚动”
+$('#menu-button').on('scroll', () => {
+  $('#menu').show();
+});
+```
+
+#### 事件对象
+
+```js
+$('#menu').on('click', event => {
+  $(event.currentTarget).hide();
+});
+```
+
+#### 方法链
+
+```js
+$('#menu-btn').on('mouseenter', () => {
+  $('#menu').show();
+}).on('mouseleave', () => {
+  $('#menu').hide();
+});
+```
+
+#### 防止事件
+
+```js
+$( "p" ).click(function( event ) {
+  event.stopPropagation();
+  // Do something
+});
+```
+
+### 浏览器事件
+
+- [.error()](https://api.jquery.com/error/) _将事件处理程序绑定到错误 JavaScript 事件_ <!--rehype:tooltips-->
+- [.resize()](https://api.jquery.com/resize/) _将事件处理程序绑定到调整大小的 JavaScript 事件，或在元素上触发该事件_ <!--rehype:tooltips-->
+- [.scroll()](https://api.jquery.com/scroll/) _将事件处理程序绑定到滚动 JavaScript 事件，或在元素上触发该事件_ <!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 事件对象
+<!--rehype:wrap-class=row-span-6-->
+
+- [event.currentTarget](https://api.jquery.com/event.currentTarget/) _事件冒泡阶段中的当前 DOM 元素_ <!--rehype:tooltips-->
+- [event.delegateTarget](https://api.jquery.com/event.delegateTarget/) _附加了当前调用的 jQuery 事件处理程序的元素_ <!--rehype:tooltips-->
+- [event.data](https://api.jquery.com/event.data/) _绑定当前正在执行的处理程序时传递给事件方法的可选数据对象_ <!--rehype:tooltips-->
+- [event.isDefaultPrevented()](https://api.jquery.com/event.isDefaultPrevented/) _返回是否曾在此事件对象上调用过 event.preventDefault()_ <!--rehype:tooltips-->
+- [event.isImmediatePropagationStopped()](https://api.jquery.com/event.isImmediatePropagationStopped/) _返回是否曾在此事件对象上调用过 event.stopImmediatePropagation()_ <!--rehype:tooltips-->
+- [event.isPropagationStopped()](https://api.jquery.com/event.isPropagationStopped/) _返回是否曾在此事件对象上调用过 event.stopPropagation()_ <!--rehype:tooltips-->
+- [event.metaKey](https://api.jquery.com/event.metaKey/) _指示事件触发时是否按下了 META 键_ <!--rehype:tooltips-->
+- [event.namespace](https://api.jquery.com/event.namespace/) _触发事件时指定的命名空间_ <!--rehype:tooltips-->
+- [event.pageX](https://api.jquery.com/event.pageX/) _鼠标相对于文档左边缘的位置_ <!--rehype:tooltips-->
+- [event.pageY](https://api.jquery.com/event.pageY/) _鼠标位置相对于文档的上边缘_ <!--rehype:tooltips-->
+- [event.preventDefault()](https://api.jquery.com/event.preventDefault/) _如果调用该方法，则不会触发事件的默认动作_ <!--rehype:tooltips-->
+- [event.relatedTarget](https://api.jquery.com/event.relatedTarget/) _事件中涉及的其他 DOM 元素（如果有）_ <!--rehype:tooltips-->
+- [event.result](https://api.jquery.com/event.result/) _由此事件触发的事件处理程序返回的最后一个值，除非该值未定义_ <!--rehype:tooltips-->
+- [event.stopImmediatePropagation()](https://api.jquery.com/event.stopImmediatePropagation/) _保持其余的处理程序不被执行，并防止事件在 DOM 树中向上冒泡_ <!--rehype:tooltips-->
+- [event.stopPropagation()](https://api.jquery.com/event.stopPropagation/) _防止事件在 DOM 树中向上冒泡，从而防止任何父处理程序收到事件通知_ <!--rehype:tooltips-->
+- [event.target](https://api.jquery.com/event.target/) _发起事件的 DOM 元素_ <!--rehype:tooltips-->
+- [event.timeStamp](https://api.jquery.com/event.timeStamp/) _浏览器创建事件的时间与 1970 年 1 月 1 日之间的毫秒差_ <!--rehype:tooltips-->
+- [event.type](https://api.jquery.com/event.type/) _描述事件的性质_ <!--rehype:tooltips-->
+- [event.which](https://api.jquery.com/event.which/) _对于键或鼠标事件，此属性指示按下的特定键或按钮_ <!--rehype:tooltips-->
+<!--rehype:className=style-none-->
+
+### 文档加载
+
+- [.load()](https://api.jquery.com/load-event/) _将事件处理程序绑定到加载 JavaScript 事件_<!--rehype:tooltips-->
+- [.ready()](https://api.jquery.com/ready/) _指定在 DOM 完全加载时执行的函数_<!--rehype:tooltips-->
+- [.unload()](https://api.jquery.com/unload/) _将事件处理程序绑定到卸载 JavaScript 事件_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 事件处理程序附件
+
+- [.bind()](https://api.jquery.com/bind/) _将处理程序附加到元素的事件_<!--rehype:tooltips-->
+- [.delegate()](https://api.jquery.com/delegate/) _基于一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件_<!--rehype:tooltips-->
+- [.die()](https://api.jquery.com/die/) _从元素中删除先前使用 .live() 附加的事件处理程序_<!--rehype:tooltips-->
+- [.live()](https://api.jquery.com/live/) _现在和将来为所有匹配当前选择器的元素附加一个事件处理程序_<!--rehype:tooltips-->
+- [.off()](https://api.jquery.com/off/) _删除事件处理程序_<!--rehype:tooltips-->
+- [.on()](https://api.jquery.com/on/) _将一个或多个事件的事件处理函数附加到所选元素_<!--rehype:tooltips-->
+- [.one()](https://api.jquery.com/one/) _将处理程序附加到元素的事件。 每个事件类型的每个元素最多执行一次处理程序_<!--rehype:tooltips-->
+- [.trigger()](https://api.jquery.com/trigger/) _执行附加到给定事件类型的匹配元素的所有处理程序和行为_<!--rehype:tooltips-->
+- [.triggerHandler()](https://api.jquery.com/triggerHandler/) _执行附加到事件元素的所有处理程序_<!--rehype:tooltips-->
+- [.unbind()](https://api.jquery.com/unbind/) _从元素中删除先前附加的事件处理程序_<!--rehype:tooltips-->
+- [.undelegate()](https://api.jquery.com/undelegate/) _根据一组特定的根元素，从与当前选择器匹配的所有元素的事件中删除处理程序_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 形式事件
+
+- [.blur()](https://api.jquery.com/blur/) _将事件处理程序绑定到 blur JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.change()](https://api.jquery.com/change/) _将事件处理程序绑定到更改 JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.focus()](https://api.jquery.com/focus/) _将事件处理程序绑定到焦点 JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.focusin()](https://api.jquery.com/focusin/) _将事件处理程序绑定到 focusin 事件_<!--rehype:tooltips-->
+- [.focusout()](https://api.jquery.com/focusout/) _将事件处理程序绑定到 focusout JavaScript 事件_<!--rehype:tooltips-->
+- [.select()](https://api.jquery.com/select/) _将事件处理程序绑定到 select JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.submit()](https://api.jquery.com/submit/) _将事件处理程序绑定到提交 JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 键盘事件
+
+- [.keydown()](https://api.jquery.com/keydown/) _将事件处理程序绑定到 keydown JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.keypress()](https://api.jquery.com/keypress/) _将事件处理程序绑定到按键 JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.keyup()](https://api.jquery.com/keyup/) _将事件处理程序绑定到 keyup JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 鼠标事件
+
+- [.click()](https://api.jquery.com/click/) _将事件处理程序绑定到 click JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.contextMenu()](https://api.jquery.com/contextmenu/) _将事件处理程序绑定到 contextmenu JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.dblclick()](https://api.jquery.com/dblclick/) _将事件处理程序绑定到 dblclick JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.hover()](https://api.jquery.com/hover/) _将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行_<!--rehype:tooltips-->
+- [.mousedown()](https://api.jquery.com/mousedown/) _将事件处理程序绑定到 mousedown JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.mouseenter()](https://api.jquery.com/mouseenter/) _绑定要在鼠标进入元素时触发的事件处理程序，或在元素上触发该处理程序_<!--rehype:tooltips-->
+- [.mouseleave()](https://api.jquery.com/mouseleave/) _绑定要在鼠标离开元素时触发的事件处理程序，或在元素上触发该处理程序_<!--rehype:tooltips-->
+- [.mousemove()](https://api.jquery.com/mousemove/) _将事件处理程序绑定到 mousemove JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.mouseout()](https://api.jquery.com/mouseout/) _将事件处理程序绑定到 mouseout JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.mouseover()](https://api.jquery.com/mouseover/) _将事件处理程序绑定到 mouseover JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.mouseup()](https://api.jquery.com/mouseup/) _将事件处理程序绑定到 mouseup JavaScript 事件，或在元素上触发该事件_<!--rehype:tooltips-->
+- [.toggle()](https://api.jquery.com/toggle-event/) _将两个或多个处理程序绑定到匹配的元素，以在交替单击时执行_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+jQuery Effects
+------------
+
+### 例子
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+$('#menu-button').on('click', () => {
+  // $('#menu').fadeIn(400, 'swing')
+  $('#menu').fadeIn();
+});
+```
+
+#### 淡出效果
+
+```js
+$('#menu-button').on('click', () => {
+  // $('#menu').fadeOut(400, 'swing')
+  $('#menu').fadeOut();
+});
+```
+
+### 基本
+
+- [.hide()](https://api.jquery.com/hide/) _隐藏匹配的元素_<!--rehype:tooltips-->
+- [.show()](https://api.jquery.com/show/) _显示匹配的元素_<!--rehype:tooltips-->
+- [.toggle()](https://api.jquery.com/toggle/) _显示或隐藏匹配的元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 滑动
+
+- [.slideDown()](https://api.jquery.com/slideDown/) _以滑动方式显示匹配的元素_<!--rehype:tooltips-->
+- [.slideToggle()](https://api.jquery.com/slideToggle/) _通过滑动显示或隐藏匹配的元素_<!--rehype:tooltips-->
+- [.slideUp()](https://api.jquery.com/slideUp/) _通过滑动隐藏匹配的元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 自定义
+
+- [.animate()](https://api.jquery.com/animate/) _执行一组 CSS 属性的自定义动画_<!--rehype:tooltips-->
+- [.clearQueue()](https://api.jquery.com/clearQueue/) _从队列中删除所有尚未运行的项目_<!--rehype:tooltips-->
+- [.delay()](https://api.jquery.com/delay/) _设置一个计时器来延迟队列中后续项目的执行_<!--rehype:tooltips-->
+- [.dequeue()](https://api.jquery.com/dequeue/) _为匹配的元素执行队列上的下一个函数_<!--rehype:tooltips-->
+- [jQuery.dequeue()](https://api.jquery.com/jQuery.dequeue/) _为匹配的元素执行队列上的下一个函数_<!--rehype:tooltips-->
+- [.finish()](https://api.jquery.com/finish/) _停止当前运行的动画，移除所有排队的动画，并完成匹配元素的所有动画_<!--rehype:tooltips-->
+- [jQuery.fx.interval](https://api.jquery.com/jQuery.fx.interval/) _动画触发的速率（以毫秒为单位）_<!--rehype:tooltips-->
+- [jQuery.fx.off](https://api.jquery.com/jQuery.fx.off/) _全局禁用所有动画_<!--rehype:tooltips-->
+- [jQuery.speed](https://api.jquery.com/jQuery.speed/) _创建一个对象，其中包含一组准备用于自定义动画定义的属性_<!--rehype:tooltips-->
+- [.queue()](https://api.jquery.com/queue/) _显示要在匹配元素上执行的函数队列_<!--rehype:tooltips-->
+- [jQuery.queue()](https://api.jquery.com/jQuery.queue/) _显示要在匹配元素上执行的函数队列_<!--rehype:tooltips-->
+- [.stop()](https://api.jquery.com/stop/) _停止匹配元素上当前运行的动画_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+### 衰退
+
+- [.fadeIn()](https://api.jquery.com/fadeIn/) _通过将匹配的元素淡化为不透明来显示它们_<!--rehype:tooltips-->
+- [.fadeOut()](https://api.jquery.com/fadeOut/) _通过将它们淡化为透明来隐藏匹配的元素_<!--rehype:tooltips-->
+- [.fadeTo()](https://api.jquery.com/fadeTo/) _调整匹配元素的不透明度_<!--rehype:tooltips-->
+- [.fadeToggle()](https://api.jquery.com/fadeToggle/) _通过设置不透明度动画来显示或隐藏匹配的元素_<!--rehype:tooltips-->
+<!--rehype:className=cols-3 style-none-->
+
+jQuery Ajax
+------------
+
+### Examples
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+$.ajax({
+  url: this.action,
+  type: this.method,
+  data: $(this).serialize()
+}).done(function(server_data){
+  console.log("success" + server_data);
+}).fail(function(jqXHR, status, err){
+  console.log("fail" + err);
+});
+```
+
+### 全局 Ajax 事件处理程序
+
+- [.ajaxComplete()](https://api.jquery.com/ajaxComplete/) _注册要在 Ajax 请求完成时调用的处理程序。 这是一个 AjaxEvent_<!--rehype:tooltips-->
+- [.ajaxError()](https://api.jquery.com/ajaxError/) _注册一个处理程序，当 Ajax 请求完成但出现错误时调用。 这是一个 Ajax 事件_<!--rehype:tooltips-->
+- [.ajaxSend()](https://api.jquery.com/ajaxSend/) _附加一个要在发送 Ajax 请求之前执行的函数。 这是一个 Ajax 事件_<!--rehype:tooltips-->
+- [.ajaxStart()](https://api.jquery.com/ajaxStart/) _注册一个处理程序，在第一个 Ajax 请求开始时调用。 这是一个 Ajax 事件_<!--rehype:tooltips-->
+- [.ajaxStop()](https://api.jquery.com/ajaxStop/) _注册一个处理程序，在所有 Ajax 请求完成时调用。 这是一个 Ajax 事件_<!--rehype:tooltips-->
+- [.ajaxSuccess()](https://api.jquery.com/ajaxSuccess/) _附加一个要在 Ajax 请求成功完成时执行的函数。 这是一个 Ajax 事件_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 辅助功能
+
+- [jQuery.param()](https://api.jquery.com/jQuery.param/) _创建适合在 URL 查询字符串或 Ajax 请求中使用的数组、普通对象或 jQuery 对象的序列化表示。 如果传递了 jQuery 对象，它应该包含具有名称/值属性的输入元素_<!--rehype:tooltips-->
+- [.serialize()](https://api.jquery.com/serialize/) _将一组表单元素编码为字符串以供提交_<!--rehype:tooltips-->
+- [.serializeArray()](https://api.jquery.com/serializeArray/) _将一组表单元素编码为名称和值的数组_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 底层接口
+
+- [jQuery.ajax()](https://api.jquery.com/jQuery.ajax/) _执行异步 HTTP (Ajax) 请求_<!--rehype:tooltips-->
+- [jQuery.prefilter()](https://api.jquery.com/jQuery.ajaxPrefilter/) _在发送每个请求之前和 $.ajax() 处理它们之前处理自定义 Ajax 选项或修改现有选项_<!--rehype:tooltips-->
+- [jQuery.ajaxSetup()](https://api.jquery.com/jQuery.ajaxSetup/) _为将来的 Ajax 请求设置默认值。 不推荐使用它_<!--rehype:tooltips-->
+- [jQuery.ajaxTransport()](https://api.jquery.com/jQuery.ajaxTransport/) _创建一个对象来处理 Ajax 数据的实际传输_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 速记方法
+
+- [jQuery.get()](https://api.jquery.com/jQuery.get/) _使用 HTTP GET 请求从服务器加载数据_<!--rehype:tooltips-->
+- [jQuery.getJSON()](https://api.jquery.com/jQuery.getJSON/) _使用 GET HTTP 请求从服务器加载 JSON 编码的数据_<!--rehype:tooltips-->
+- [jQuery.getScript()](https://api.jquery.com/jQuery.getScript/) _使用 GET HTTP 请求从服务器加载 JavaScript 文件，然后执行它_<!--rehype:tooltips-->
+- [jQuery.post()](https://api.jquery.com/jQuery.post/) _使用 HTTP POST 请求将数据发送到服务器_<!--rehype:tooltips-->
+- [.load()](https://api.jquery.com/load/) _从服务器加载数据并将返回的 HTML 放入匹配的元素中_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+各种各样的
+------------
+
+### jQuery 对象
+
+- [jQuery()](https://api.jquery.com/jQuery/) _接受包含 CSS 选择器的字符串，然后用于匹配一组元_<!--rehype:tooltips-->
+- [jQuery.noConflict()](https://api.jquery.com/jQuery.noConflict/) _放弃 jQuery 对 $ 变量的控_<!--rehype:tooltips-->
+- [jQuery.sub()](https://api.jquery.com/jQuery.sub/) _创建一个新的 jQuery 副本，可以在不影响原始 jQuery 对象的情况下修改其属性和方_<!--rehype:tooltips-->
+- [jQuery.holdReady()](https://api.jquery.com/jQuery.holdReady/) _持有或释放jQuery的就绪事件的执_<!--rehype:tooltips-->
+- [jQuery.when()](https://api.jquery.com/jQuery.when/) _提供一种基于零个或多个 Thenable 对象执行回调函数的方法，通常是表示异步事件的 Deferred 对_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 延迟对象
+<!--rehype:wrap-class=row-span-2-->
+
+- [jQuery.Deferred()](https://api.jquery.com/jQuery.Deferred/) _返回可链接实用程序对象的工厂函数，该对象具有将多个回调注册到回调队列、调用回调队列以及中继任何同步或异步函数的成功或失败状态的方法_<!--rehype:tooltips-->
+- [deferred.always()](https://api.jquery.com/deferred.always/) _添加要在延迟对象被解析或拒绝时调用的处理程序_<!--rehype:tooltips-->
+- [deferred.done()](https://api.jquery.com/deferred.done/) _添加要在解析延迟对象时调用的处理程序_<!--rehype:tooltips-->
+- [deferred.fail()](https://api.jquery.com/deferred.fail/) _添加处理程序以在延迟对象被拒绝时调用_<!--rehype:tooltips-->
+- [deferred.isRejected()](https://api.jquery.com/deferred.isRejected/) _判断一个 Deferred 对象是否被拒绝_<!--rehype:tooltips-->
+- [deferred.isResolved()](https://api.jquery.com/deferred.isResolved/) _判断一个 Deferred 对象是否已经解析_<!--rehype:tooltips-->
+- [deferred.notify()](https://api.jquery.com/deferred.notify/) _使用给定的 args 在 Deferred 对象上调用 progressCallbacks_<!--rehype:tooltips-->
+- [deferred.notifyWith()](https://api.jquery.com/deferred.notifyWith/) _使用给定的上下文和参数调用 Deferred 对象的 progressCallbacks_<!--rehype:tooltips-->
+- [deferred.pipe()](https://api.jquery.com/deferred.pipe/) _过滤和/或链接 Deferreds 的实用方法_<!--rehype:tooltips-->
+- [deferred.progress()](https://api.jquery.com/deferred.progress/) _添加在 Deferred 对象生成进度通知时要调用的处理程序_<!--rehype:tooltips-->
+- [deferred.promise()](https://api.jquery.com/deferred.promise/) _返回一个 Deferred 的 Promise 对象_<!--rehype:tooltips-->
+- [deferred.reject()](https://api.jquery.com/deferred.reject/) _拒绝 Deferred 对象并使用给定的 args 调用任何 failCallbacks_<!--rehype:tooltips-->
+- [deferred.rejectWith()](https://api.jquery.com/deferred.rejectWith/) _拒绝 Deferred 对象并使用给定的上下文和参数调用任何 failCallbacks_<!--rehype:tooltips-->
+- [deferred.resolve()](https://api.jquery.com/deferred.resolve/) _解析一个 Deferred 对象并使用给定的 args 调用任何 doneCallbacks_<!--rehype:tooltips-->
+- [deferred.resolveWith()](https://api.jquery.com/deferred.resolveWith/) _解析延迟对象并使用给定的上下文和参数调用任何 doneCallbacks_<!--rehype:tooltips-->
+- [deferred.state()](https://api.jquery.com/deferred.state/) _确定 Deferred 对象的当前状态_<!--rehype:tooltips-->
+- [deferred.then()](https://api.jquery.com/deferred.then/) _添加要在延迟对象被解析、拒绝或仍在进行中时调用的处理程序_<!--rehype:tooltips-->
+- [.promise()](https://api.jquery.com/promise/) _返回一个 Promise 对象以观察绑定到集合的特定类型的所有操作（无论是否排队）何时完成_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 公用事业
+<!--rehype:wrap-class=row-span-3-->
+
+- [jQuery.boxModel](https://api.jquery.com/jQuery.boxModel/) _说明用户浏览器中的当前页面是否正在使用 W3C CSS 盒模型呈现_<!--rehype:tooltips-->
+- [jQuery.browser](https://api.jquery.com/jQuery.browser/) _包含用户代理的标志，从 navigator.userAgent 读取。 此属性在 jQuery 1.9 中被删除，只能通过 jQuery.migrate 插件使用。 请尝试改用特征检测_<!--rehype:tooltips-->
+- [jQuery.contains()](https://api.jquery.com/jQuery.contains/) _检查一个 DOM 元素是否是另一个 DOM 元素的后代_<!--rehype:tooltips-->
+- [jQuery.each()](https://api.jquery.com/jQuery.each/) _通用迭代器函数，可用于无缝迭代对象和数组。 具有长度属性的数组和类似数组的对象（例如函数的参数对象）按数字索引迭代，从 0 到 length-1。 其他对象通过它们的命名属性迭代_<!--rehype:tooltips-->
+- [jQuery.extend()](https://api.jquery.com/jQuery.extend/) _将两个或多个对象的内容合并到第一个对象中_<!--rehype:tooltips-->
+- [jQuery.globalEval()](https://api.jquery.com/jQuery.globalEval/) _全局执行一些 JavaScript 代码_<!--rehype:tooltips-->
+- [jQuery.grep()](https://api.jquery.com/jQuery.grep/) _查找满足过滤功能的数组元素。 原数组不受影响_<!--rehype:tooltips-->
+- [jQuery.inArray()](https://api.jquery.com/jQuery.inArray/) _在数组中搜索指定值并返回其索引（如果未找到，则返回 -1）_<!--rehype:tooltips-->
+- [jQuery.isArray()](https://api.jquery.com/jQuery.isArray/) _判断参数是否为数组_<!--rehype:tooltips-->
+- [jQuery.isEmptyObject()](https://api.jquery.com/jQuery.isEmptyObject/) _检查对象是否为空（不包含可枚举属性）_<!--rehype:tooltips-->
+- [jQuery.isFunction()](https://api.jquery.com/jQuery.isFunction/) _确定其参数是否可作为函数调用_<!--rehype:tooltips-->
+- [jQuery.isNumeric()](https://api.jquery.com/jQuery.isNumeric/) _确定其参数是否表示 JavaScript 数字_<!--rehype:tooltips-->
+- [jQuery.isPlainObject()](https://api.jquery.com/jQuery.isPlainObject/) _检查对象是否为普通对象_<!--rehype:tooltips-->
+- [jQuery.isWindow()](https://api.jquery.com/jQuery.isWindow/) _判断参数是否为窗口_<!--rehype:tooltips-->
+- [jQuery.isXMLDoc()](https://api.jquery.com/jQuery.isXMLDoc/) _检查 DOM 节点是否在 XML 文档中（或者是 XML 文档）_<!--rehype:tooltips-->
+- [jQuery.makeArray()](https://api.jquery.com/jQuery.makeArray/) _将类数组对象转换为真正的 JavaScript 数组_<!--rehype:tooltips-->
+- [jQuery.map()](https://api.jquery.com/jQuery.map/) _将数组或对象中的所有项转换为新的项数组_<!--rehype:tooltips-->
+- [jQuery.merge()](https://api.jquery.com/jQuery.merge/) _将两个数组的内容合并到第一个数组中_<!--rehype:tooltips-->
+- [jQuery.noop()](https://api.jquery.com/jQuery.noop/) _空函数_<!--rehype:tooltips-->
+- [jQuery.now()](https://api.jquery.com/jQuery.now/) _返回代表当前时间的数字_<!--rehype:tooltips-->
+- [jQuery.parseHTML()](https://api.jquery.com/jQuery.parseHTML/) _将字符串解析为 DOM 节点数组_<!--rehype:tooltips-->
+- [jQuery.parseJSON()](https://api.jquery.com/jQuery.parseJSON/) _获取格式正确的 JSON 字符串并返回生成的 JavaScript 值_<!--rehype:tooltips-->
+- [jQuery.parseXML()](https://api.jquery.com/jQuery.parseXML/) _将字符串解析为 XML 文档_<!--rehype:tooltips-->
+- [jQuery.proxy()](https://api.jquery.com/jQuery.proxy/) _接受一个函数并返回一个总是有特定上下文的新函数_<!--rehype:tooltips-->
+- [jQuery.support](https://api.jquery.com/jQuery.support/) _表示存在不同浏览器功能或错误的属性集合。 用于 jQuery 的内部使用； 当内部不再需要特定属性以提高页面启动性能时，可能会删除它们。 对于您自己项目的功能检测需求，我们强烈建议使用外部库（例如 Modernizr），而不是依赖于 jQuery.support 中的属性_<!--rehype:tooltips-->
+- [jQuery.trim()](https://api.jquery.com/jQuery.trim/) _删除字符串开头和结尾的空格_<!--rehype:tooltips-->
+- [jQuery.type()](https://api.jquery.com/jQuery.type/) _确定对象的内部 JavaScript [[Class]]_<!--rehype:tooltips-->
+- [jQuery.unique()](https://api.jquery.com/jQuery.unique/) _对 DOM 元素数组进行适当的排序，并删除重复项。 请注意，这仅适用于 DOM 元素数组，不适用于字符串或数字_<!--rehype:tooltips-->
+- [jQuery.uniqueSort()](https://api.jquery.com/jQuery.uniqueSort/) _对 DOM 元素数组进行适当的排序，并删除重复项。 请注意，这仅适用于 DOM 元素数组，不适用于字符串或数字_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### DOM 元素方法
+
+- [.get()](https://api.jquery.com/get/) _检索与 jQuery 对象匹配的元素之一_<!--rehype:tooltips-->
+- [.index()](https://api.jquery.com/index/) _从匹配的元素中搜索给定的元素_<!--rehype:tooltips-->
+- [.size()](https://api.jquery.com/size/) _返回 jQuery 对象中元素的数量_<!--rehype:tooltips-->
+- [.toArray()](https://api.jquery.com/toArray/) _检索 jQuery 集合中包含的所有元素，作为数组_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 内部结构
+
+- [.jquery](https://api.jquery.com/jquery-2/) _包含 jQuery 版本号的字符串_<!--rehype:tooltips-->
+- [.context](https://api.jquery.com/context/) _最初传递给 jQuery() 的 DOM 节点上下文； 如果未通过，则上下文可能是文档_<!--rehype:tooltips-->
+- [jQuery.error()](https://api.jquery.com/jQuery.error/) _获取一个字符串并抛出包含它的异常_<!--rehype:tooltips-->
+- [.length](https://api.jquery.com/length/) _jQuery 对象中元素的数量_<!--rehype:tooltips-->
+- [.pushStack()](https://api.jquery.com/pushStack/) _将一组 DOM 元素添加到 jQuery 堆栈中_<!--rehype:tooltips-->
+- [.selector](https://api.jquery.com/selector/) _代表选择器的选择器在创建原始集合时传递给 jQuery()，如果有的话_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
+
+### 回调对象
+
+- [jQuery.Callbacks()](https://api.jquery.com/jQuery.Callbacks/) _一个多用途回调列表对象，提供了一种管理回调列表的强大方法_<!--rehype:tooltips-->
+- [callbacks.add()](https://api.jquery.com/callbacks.add/) _将回调或回调集合添加到回调列表_<!--rehype:tooltips-->
+- [callbacks.disable()](https://api.jquery.com/callbacks.disable/) _禁止回调列表做更多的事情_<!--rehype:tooltips-->
+- [callbacks.disabled()](https://api.jquery.com/callbacks.disabled/) _确定回调列表是否已被禁用_<!--rehype:tooltips-->
+- [callbacks.empty()](https://api.jquery.com/callbacks.empty/) _从列表中删除所有回调_<!--rehype:tooltips-->
+- [callbacks.fire()](https://api.jquery.com/callbacks.fire/) _使用给定参数调用所有回调_<!--rehype:tooltips-->
+- [callbacks.fired()](https://api.jquery.com/callbacks.fired/) _确定回调是否已至少被调用一次_<!--rehype:tooltips-->
+- [callbacks.fireWith()](https://api.jquery.com/callbacks.fireWith/) _使用给定的上下文和参数调用列表中的所有回调_<!--rehype:tooltips-->
+- [callbacks.has()](https://api.jquery.com/callbacks.has/) _确定列表是否附加了任何回调。如果回调作为参数提供，请确定它是否在列表中_<!--rehype:tooltips-->
+- [callbacks.lock()](https://api.jquery.com/callbacks.lock/) _将回调列表锁定在其当前状态_<!--rehype:tooltips-->
+- [callbacks.locked()](https://api.jquery.com/callbacks.locked/) _判断回调列表是否被锁定_<!--rehype:tooltips-->
+- [callbacks.remove()](https://api.jquery.com/callbacks.remove/) _从回调列表中删除回调或回调集合_<!--rehype:tooltips-->
+<!--rehype:className=cols-2 style-none-->
--- a/docs/make.md
+++ b/docs/make.md
@ -369,6 +369,35 @@ run:
 书写规则
 ---

+### 文件搜寻（`vpath`）
+<!--rehype:wrap-class=col-span-3-->
+
+如果没有指定 vpath 变量，make 只会在当前的目录中去寻找依赖文件和目标文件。否则，如果当前目录没有，就会到指定的目录中去寻找
+
+:-                              | :-
+:-                              | :-
+`vpath <pattern> <directories>` | 为符合模式 \<pattern> 的文件指定搜索目录 \<directories>
+`vpath <pattern>`               | 清除符合模式 \<pattern> 的文件的搜索目录。
+`vpath`                         | 清除所有已被设置好了的文件搜索目录
+
+#### `%`
+
+* vpath 使用方法中的 \<pattern> 需要包含 `%` 字符。`%` 的意思是匹配零或若干字符（类似于**通配符**）,并且引用规则是需要使用**自动变量**
+
+```makefile
+vpath %.c dist
+TARGET = hello
+OBJ = bar.o foo.o
+
+$(TARGET): $(OBJ)
+	$(CC) -o $@ $^
+
+%.o: $.c
+	$(CC) -o $< -o #@
+```
+
+<!--rehype:className=auto-wrap-->
+
 ### 通配符

 #### `*`
@ -399,36 +428,6 @@ run:
 	ls -ll packag?.json
 ```

-### 文件搜寻（`vpath`）
-
-如果没有指定 vpath 变量，make 只会在当前的目录中去寻找依赖文件和目标文件。否则，如果当前目录没有，就会到指定的目录中去寻找
-
-:-                              | :-
-:-                              | :-
-`vpath <pattern> <directories>` | 为符合模式 \<pattern> 的文件指定搜索目录 \<directories>
-`vpath <pattern>`               | 清除符合模式<pattern>的文件的搜索目录。
-`vpath`                         | 清除所有已被设置好了的文件搜索目录
-
-#### `%`
-
-* vpath使用方法中的 \<pattern> 需要包含 `%` 字符。
-* `%` 的意思是匹配零或若干字符
-* 并且引用规则是需要使用**自动变量**
-
-```makefile
-vpath %.c dist
-TARGET = hello
-OBJ = bar.o foo.o
-
-$(TARGET): $(OBJ)
-	$(CC) -o $@ $^
-
-%.o: $.c
-	$(CC) -o $< -o #@
-```
-
-<!--rehype:className=auto-wrap-->
-
 ### 静态模式

 ```makefile
@ -469,6 +468,20 @@ clean :
    rm *.o temp
 ```

+### 约定俗成的规则
+<!--rehype:wrap-class=col-span-2-->
+
+:-  | :-
+:-  | :-
+`all`        | 该伪目标是所有目标的目标，一般用于编译所有的目标
+`clean`      | 该伪目标用于删除所有由 make 创建的文件
+`install`    | 该伪目标用于安装已编译好的程序，即将目标执行文件拷贝到指定目标中
+`print`      | 该伪目标用于例出改变过的源文件
+`tar`        | 该伪目标用于把源程序打包备份为 tar 文件
+`dist`       | 该伪目标用于创建压缩文件，一般将 tar 文件压成 Z 或 gz 文件
+`TAGS`       | 该伪目标用于更新所有的目标，以备完整地重编译使用
+`check/test` | 这两个伪目标用于测试 makefile 的流程
+
 <!--rehype:className=style-round-->
 <!--rehype:className=auto-wrap-->

@ -535,6 +548,481 @@ exec:
    cd /home/hchen; pwd
 ```

+### make 参数
+<!--rehype:wrap-class=col-span-3-->
+
+:-  | :-
+:-  | :-
+`-b`,`-m`     |  忽略和其它版本make的兼容性
+`-B`          |  (`--always-make`) 认为所有的目标都需要重编译
+`-C <dir>`    |  (`--directory=<dir>`) 指定读取makefile的目录
+`-e`          |  (`--environment-overrides`) 指明环境变量的值覆盖 makefile 中定义的变量的值
+`-f=<file>`   | 指定需要执行的makefile
+`-h`          | 显示帮助信息
+`-i`          | (`--ignore-errors`)在执行时忽略所有的错误
+`-I <dir>`    | (`--include-dir=<dir>`) 指定一个被包含 makefile 的搜索目标
+`-j [<nums>]` | (`--jobs[=<jobsnum>]`)指同时运行命令的个数
+`-k`          | (`--keep-going`)出错也不停止运行
+`-l <load>`   | `--load-average[=<load>]`、`-max-load[=<load>]` 指定make运行命令的负载
+`-n`          | (`--just-print`, `--dry-run`, `--recon`) 仅输出执行过程中的命令序列，但不执行
+`-o <file>`   | (`--old-file=<file>`, `--assume-old=<file>`)不重新生成的指定的 \<file>，即使目标的依赖文件新于它
+`-p`          | (`--print-data-base`) 输出 makefile 中的所有数据，包括所有的规则和变量
+`-q`          | (`--question`) 不运行命令，也不输出。仅仅是检查所指定的目标是否需要更新
+`-r`          | (`--no-builtin-rules`) 禁止 make 使用任何隐含规则
+`-R`          | (`--no-builtin-variabes`) 禁止 make 使用任何作用于变量上的隐含规则
+`-s`          | (`--silent`,`--quiet`) 在命令运行时不输出命令的输出
+`-S`          | (`--no-keep-going`, `--stop`) 取消“-k”选项的作用
+`-t`          | `--touch` 相当于 UNIX 的 touch 命令，只是把目标的修改日期变成最新的，也就是阻止生成目标的命令运行
+`-v`          | (`--version`) 输出 make 程序的版本、版权等关于 make 的信息
+`-w`          | (`--print-directory`) 输出运行 makefile 之前和之后的信息。`--no-print-directory` 可以禁止 `-w`
+`-W <file>`   | `--what-if=<file>`, `--new-file=<file>`, `--assume-file=<file>` 假定目标 \<file> 需要更新，如果和 `-n` 选项使用，那么这个参数会输出该目标更新时的运行动作
+`--warn-undefined-variables` | 只要 make 发现有未定义的变量，那么就输出警告信息
+<!--rehype:className=left-align-->
+
+### `-debug[=<options>]`
+<!--rehype:wrap-class=col-span-2-->
+
+输出 make 的调试信息。下面是 \<options>的取值：
+
+options  | :-
+:-       | :-
+`a` | `all`，输出所有的调试信息
+`b` | `basic`，只输出简单的调试信息。即输出不需要重编译的目标
+`v` | `verbose`，包括 b 的信息。输出包括 makefile 被解析的信息，不需要被重编译的依赖文件等
+`i` | `implicit`，输出所有的隐含规则
+`j` | `jobs`，输出执行规则中命令的详细信息，如命令的 PID、返回码等
+`m` | `makefile`，输出 make 读取 makefile，更新 makefile，执行 makefile 的信息
+<!--rehype:className=left-align-->
+
+### make 的退出码
+
+:-  | :-
+:-  | :-
+`0` | 成功执行
+`1` | 运行时出现错误
+`2` | 使用了 `-q` 选项，并且一些目标不需要更新
+
+判断和循环
+---
+
+### 单分支条件判断
+
+* `ifeq` 的意思表示条件语句的开始，表达式包含两个参数，如果相同则为真。
+* `ifneq` 的意思表示条件语句的开始，表达式包含两个参数，如果不同则为真。
+* `else` 表示条件表达式为假的情况。
+* `endif` 表示一个条件语句的结束，任何一个条件表达式都应该以 `endif` 结束。
+<!--rehype:className=style-round-->
+
+```makefile
+run:
+ifeq ($(CC), cc)
+	$(CC) -o foo foo.c
+else
+	$(CC) -o bar bar.c
+endif
+```
+
+### 多分支条件判断
+
+#### ifneq 语法
+
+```makefile
+ifneq (<arg1>, <arg2>)
+ifneq '<arg1>' '<arg2>'
+ifneq "<arg1>" "<arg2>"
+ifneq "<arg1>" '<arg2>'
+ifneq '<arg1>' "<arg2>"
+```
+
+#### ifeq 语法
+
+```makefile
+ifeq (<arg1>, <arg2>)
+ifeq '<arg1>' '<arg2>'
+ifeq "<arg1>" "<arg2>"
+ifeq "<arg1>" '<arg2>'
+ifeq '<arg1>' "<arg2>"
+```
+
+### ifdef
+
+```makefile
+ifdef <variable-name>
+```
+
+`ifdef` 会根据 variable-name 判断，如果为空则为真
+
+```makefile
+bar =
+foo = $(bar)
+ifdef foo
+    frobozz = yes
+else
+    frobozz = no
+endif
+
+run:
+	echo $(frobozz)
+```
+
+`ifndef` 则和 `ifdef` 是相反的意思
+
+### for 循环
+
+```makefile
+LIST = one two three
+all:
+	for i in $(LIST); do \
+	    echo $$i; \
+	done
+```
+
+函数
+---
+
+### 字符串处理函数 - 替换函数(`subst`)
+
+把字串 \<text> 中的 \<from> 字符串替换成 \<to> 。
+
+```makefile
+$(subst <from>,<to>,<text>)
+```
+
+示例
+
+```makefile
+$(subst ee,EE,feet on the street)
+```
+
+### 字符串处理函数 - 模式字符串替换函数(`patsubst`)
+
+查找 \<text> 中的单词（**单词以空格、Tab或回车换行分隔**）是否符合模式 \<pattern>。匹配，则以 \<replacement> 替换。
+
+```makefile
+$(patsubst <pattern>,<replacement>,<text>)
+```
+
+* 示例
+
+```makefile
+$(patsubst %.c,%.o,x.c.c bar.c)
+```
+
+把字串 x.c.c bar.c 符合模式 %.c 的单词替换成 %.o ，返回结果是 x.c.o bar.o
+
+### 字符串处理函数 - 去空格函数(`strip`)
+
+去掉 <string> 字串中开头和结尾的空字符。
+
+```makefile
+$(strip <string>)
+```
+
+示例
+
+```makefile
+$(strip a b c )
+```
+
+把字串 `a b c` 去掉开头和结尾的空格，结果是 a b c。
+
+### 字符串处理函数 - 查找字符串函数(`findstring`)
+
+在字串 \<in> 中查找 \<find> 字串。
+
+```makefile
+$(findstring <find>,<in>)
+```
+
+示例：
+
+```makefile
+$(findstring a,a b c)
+$(findstring a,b c)
+```
+
+第一个函数返回 a 字符串，第二个返回空字符串
+
+### 字符串处理函数 - 过滤函数(`filter`)
+
+以 \<pattern> 模式过滤 \<text> 字符串中的单词，保留符合模式 \<pattern> 的单词。可以有多个模式。
+
+```makefile
+$(filter <pattern...>,<text>)
+```
+
+示例
+
+```makefile
+sources := foo.c bar.c baz.s ugh.h
+foo: $(sources)
+    cc $(filter %.c %.s,$(sources)) -o foo
+$(filter %.c %.s,$(sources)) 
+# 返回的值是 foo.c bar.c baz.s
+```
+
+### 字符串处理函数 - 反过滤函数(`filter-out`)
+
+以 \<pattern> 模式过滤 \<text> 字符串中的单词，去除符合模式 \<pattern> 的单词。可以有多个模式。
+
+```makefile
+$(filter-out <pattern...>,<text>)
+```
+
+示例：
+
+```makefile
+objects=main1.o foo.o main2.o bar.o
+mains=main1.o main2.o
+$(filter-out $(mains),$(objects)) 
+# 返回值是 foo.o bar.o 。
+```
+
+### 字符串处理函数 - 排序函数(`sort`)
+
+给字符串 \<list> 中的单词排序（升序）。
+
+```makefile
+$(sort <list>)
+```
+
+* 示例：`$(sort foo bar lose)` 返回 `bar foo lose`
+* 注意：sort 函数会去掉 `<list>` 中相同的单词
+
+### 字符串处理函数 - 取单词函数（`word`)
+
+取字符串 \<text> 中第 \<n> 个单词。（从一开始）
+
+```makefile
+$(word <n>,<text>)
+```
+
+示例：`$(word 2, foo bar baz)` 返回值是 `bar`
+
+### 字符串处理函数 - 取单词串函数(`wordlist`)
+
+* 从字符串 \<text> 中取从 \<s> 开始到 \<e> 的单词串。\<s> 和 \<e> 是一个数字。
+
+```makefile
+$(wordlist <ss>,<e>,<text>)
+```
+
+示例：`$(wordlist 2, 3, foo bar baz)` 返回值是 bar baz。
+
+### 字符串处理函数 - 单词个数统计函数(`words`)
+
+* 统计 \<text> 中字符串中的单词个数。
+
+```makefile
+$(words <text>)
+```
+
+* 示例：`$(words, foo bar baz)` 返回值是 3。
+
+### 字符串处理函数 - 首单词函数(`firstword`)
+
+* 取字符串 \<text> 中的第一个单词。
+
+```makefile
+$(firstword <text>)
+```
+
+* 示例：`$(firstword foo bar)` 返回值是 `foo`
+
+### 文件名操作函数
+<!--rehype:wrap-class=row-span-2-->
+
+#### 取目录函数(`dir`)
+
+从文件名序列 \<names> 中取出目录部分。目录部分是指最后一个反斜杠（`/`）之前的部分。如果没有反斜杠，那么返回 `./`。
+
+```makefile
+$(dir <names...>)
+```
+
+---
+
+```makefile
+$(dir src/foo.c hacks) 
+#返回值是 src/ ./
+```
+
+#### 取文件函数(`notdir`)
+
+从文件名序列 \<names> 中取出非目录部分。非目录部分是指最後一个反斜杠（`/`）之后的部分。
+
+```makefile
+$(notdir <names...>)
+```
+
+---
+
+```makefile
+$(notdir src/foo.c hacks)
+# 返回值是 foo.c hacks
+```
+
+#### 取后缀函数（`suffix`)
+
+从文件名序列 \<names> 中取出各个文件名的后缀
+
+```makefile
+$(suffix <names...>)
+```
+
+---
+
+```makefile
+$(suffix src/foo.c src-1.0/bar.c hacks)
+# 返回值是 .c .c
+```
+
+#### 取前缀函数(`basename`)
+
+从文件名序列 \<names> 中取出各个文件名的前缀部分。
+
+```makefile
+$(basename <names...>)
+```
+
+---
+
+```makefile
+$(basename src/foo.c src-1.0/bar.c hacks) 
+# 返回值是 src/foo src-1.0/bar hacks
+```
+
+#### 加后缀函数(`addsuffix`)
+
+把后缀 \<suffix> 加到 \<names> 中的每个单词后面
+
+```makefile
+$(addsuffix <suffix>,<names...>)
+```
+
+---
+
+```makefile
+$(addsuffix .c,foo bar)
+# 返回值是 foo.c bar.c 
+```
+
+#### 加前缀函数(`addprefix`)
+
+把前缀 \<prefix> 加到 \<names> 中的每个单词前面。
+
+```makefile
+$(addprefix <prefix>,<names...>)
+```
+
+---
+
+```makefile
+$(addprefix src/,foo bar)
+# 返回值是 src/foo src/bar 。
+```
+
+#### 连接函数(`join`)
+
+把 \<list2> 中的单词对应地加到 \<list1> 的单词后面。
+
+```makefile
+$(join <list1>,<list2>)
+```
+
+---
+
+```makefile
+$(join aaa bbb , 111 222 333)
+# 返回值是 aaa111 bbb222 333 。
+```
+
+### 其它函数
+<!--rehype:wrap-class=col-span-2-->
+
+#### foreach 函数
+
+```makefile
+$(foreach <var>,<list>,<text>)
+```
+
+---
+
+```makefile
+# $(name) 中的单词会被挨个取出，并存到变量 n 中，
+# $(n).o 每次根据 $(n) 计算出一个值，这些值以空格分隔，最后作为 foreach 函数的返回
+names := a b c d
+files := $(foreach n,$(names),$(n).o)
+run:
+	echo $(files)
+```
+
+#### if 函数
+
+与之前的条件语句——`ifeq` 类似
+
+```makefile
+$(if <condition>,<then-part>)
+# 或者
+$(if <condition>,<then-part>,<else-part>)
+```
+
+#### call 函数
+
+call 函数是唯一一个可以用来创建新的参数化的函数。
+
+```makefile
+$(call <expression>,<parm1>,<parm2>,...,<parmn>)
+```
+
+---
+
+```makefile
+reverse =  $(2) $(1)
+
+foo = $(call reverse,a,b)
+
+run:
+	echo $(foo)
+# b a
+```
+
+#### shell 函数
+
+使用操作系统 Shell 的命令
+
+```makefile
+contents := $(shell cat foo)
+files := $(shell echo *.c)
+```
+
+#### 控制 make 的函数
+
+```makefile
+$(error <text ...>)
+# and
+$(warning <text ...>)
+```
+
+#### origin 函数
+
+```makefile
+$(origin <variable>)
+```
+
+origin 函数用于告诉这个变量的从何而来
+
+:-              | :-
+:-              | :-
+`undefined`     | 如果 \<variable> 未定义，返回 `undefined`
+`default`       | 如果 \<variable> 是默认的，如 `CC`
+`environment`   | 如果 \<variable> 是环境变量，并且当 Makefile 执行时，-e 参数没有被打开
+`file`          | 如果 \<variable> 这个变量被定义在 Makefile 中。
+`command line`  | 如果 \<variable> 这个变量是被命令行定义的。
+`override`      | 如果 \<variable> 是被 override 指示符重新定义的。
+`automatic`     | 如果 \<variable> 是一个命令运行中的自动化变量
+<!--rehype:className=left-align-->
+
 另见
 ---

--- a/docs/python.md
+++ b/docs/python.md
@ -441,6 +441,18 @@ Enter your name: Tom
 True
 ```

+### 转义符号
+
+| 转义符号 | 对应的操作 |
+|---|---|
+| `\\` | 输出反斜杠 |
+| `\'` | 输出单引号 |
+| `\"` | 输出双引号 |
+| `\n` | 换行 |
+| `\t` | 水平制表符 |
+| `\r` | 光标回到首位 |
+| `\b` | 退格 |
+
 Python F 字符串（自 Python 3.6+ 起）
 ----------------

--- a/docs/react-native.md
+++ b/docs/react-native.md
@ -30,8 +30,8 @@ $ ruby --version

 <red>注意:</red> macOS 12.5.1 附带了 Ruby <pur>**2.6.8**</pur>，这不是 React Native 所要求的，React Native 70+ 需要 Ruby <yel>**2.7.5**</yel>，可以使用下面工具切换版本：

- [rbenv](https://github.com/rbenv/rbenv)
- [RVM](https://rvm.io/)
+- [rbenv](https://github.com/rbenv/rbenv) _推荐_
+- [RVM](https://rvm.io/) _推荐_
 - [chruby](https://github.com/postmodern/chruby)
 - 带有 [asdf-ruby](https://github.com/asdf-vm/asdf-ruby) 插件的 [asdf-vm](https://github.com/asdf-vm)
 <!--rehype:className=cols-2-->
@ -41,9 +41,11 @@ $ ruby --version
 ```bash
 $ npx react-native init MyApp
 # 指定 React Native 版本创建
-$ npx react-native init MyApp --version X.XX.X
+$ npx react-native init MyApp \
+  --version X.XX.X
 # 创建 typescript 版本项目
-$ npx react-native init MyTSApp --template react-native-template-typescript
+$ npx react-native init MyTSApp \
+--template react-native-template-typescript
 ```

 安装依赖
@ -58,8 +60,10 @@ $ bundle exec pod install # 以安装 iOS 依赖项
 运行你的 React Native 应用程序

 ```bash
-# 启动监听打包 JS 服务
+# 启动监听打包 JS 服务，默认端口 8081
 $ npx react-native start
+# 指定 8088 端口
+$ npx react-native start --port=8088
 # 启动 iOS 模拟器运行你的应用
 $ npx react-native run-ios
 ```
--- a/docs/systemd.md
+++ b/docs/systemd.md
@ -1,4 +1,4 @@
-Systemd
+Systemd 备忘清单
 ===

 最常用的 [Systemd](https://systemd.io/) 命令备忘单快速参考
--- a/docs/tailwindcss.md
+++ b/docs/tailwindcss.md
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@wcj/reference",
-  "version": "1.31.0",
+  "version": "1.32.0",
  "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
  "author": "jaywcjlove",
  "license": "MIT",
@ -25,7 +25,7 @@
    "husky": "^8.0.1",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
-    "refs-cli": "^1.2.7"
+    "refs-cli": "^1.2.10"
  },
  "engines": {
    "node": ">=16.0.0"
Author	SHA1	Message	Date
jaywcjlove	0f18fbac08	released v1.32.0	2022-12-14 12:34:19 +08:00
github-actions[bot]	17c188861e	doc: update README.md.	2022-12-14 03:29:38 +00:00
github-actions[bot]	1a1bf6cd66	doc: update CONTRIBUTING.md.	2022-12-14 03:29:37 +00:00
jaywcjlove	ab795d65aa	doc: update react-native.md	2022-12-14 11:27:58 +08:00
jaywcjlove	150a9bc943	doc: update htmx.md	2022-12-13 11:05:04 +08:00
jaywcjlove	89fddf6b6f	doc: update flask.md #223	2022-12-12 15:24:20 +08:00
jaywcjlove	a8ba4c4e7a	doc: update flask.md #223	2022-12-12 15:24:19 +08:00
jaywcjlove	45908c8d90	doc: update ffmpeg.md #18	2022-12-12 15:24:19 +08:00
github-actions[bot]	f626e21702	doc: update README.md.	2022-12-12 06:27:23 +00:00
github-actions[bot]	83d9bda16e	doc: update CONTRIBUTING.md.	2022-12-12 06:27:22 +00:00
kjch	470ccb5311	feat: add flask.md cheatsheet (#222 )	2022-12-12 14:26:17 +08:00
醉、倾城	3964c0c301	doc: update python.md (#221 )	2022-12-12 11:21:22 +08:00
小弟调调™	3d0d2947a0	doc: update react-native.md	2022-12-12 11:04:29 +08:00
github-actions[bot]	df8e3a8099	doc: update README.md.	2022-12-10 09:55:52 +00:00
github-actions[bot]	88b8c8f1c2	doc: update CONTRIBUTING.md.	2022-12-10 09:55:52 +00:00
Jefferson	f123f31449	doc: update flutter.md (#220 )	2022-12-10 17:54:32 +08:00
jaywcjlove	c0641d2898	doc: update bash.md	2022-12-10 12:56:20 +08:00
jaywcjlove	a442108e0f	chore: update workflows config.	2022-12-10 12:43:50 +08:00
jaywcjlove	2af557fa28	chore: update workflows config.	2022-12-10 12:39:29 +08:00
jaywcjlove	cb9af579f0	chore: update workflows config.	2022-12-10 12:35:20 +08:00
jaywcjlove	9a2cbcd359	doc: update css.md	2022-12-10 12:16:31 +08:00
github-actions[bot]	0c81d4815b	doc: update README.md.	2022-12-09 10:24:53 +00:00
github-actions[bot]	d3e880b6d2	doc: update CONTRIBUTING.md.	2022-12-09 10:24:52 +00:00
jaywcjlove	8b2c227f73	feat: add tailwindcss.md cheatsheet.	2022-12-09 18:22:54 +08:00
Pipecraft	545e702138	doc: update docker.md, dockerfile.md (#219 )	2022-12-09 15:58:37 +08:00
github-actions[bot]	6f61fab73d	doc: update README.md.	2022-12-09 07:05:46 +00:00
github-actions[bot]	95a03cef33	doc: update CONTRIBUTING.md.	2022-12-09 07:05:45 +00:00
kjch	c56a018d9b	doc: Update README.md (#218 )	2022-12-09 15:04:40 +08:00
jaywcjlove	a40568cc85	feat: add jquery.md cheatsheet. #217	2022-12-08 15:10:26 +08:00
jaywcjlove	768fb34db9	doc: update git.md	2022-12-08 14:30:32 +08:00
jaywcjlove	b13bb0d6b9	doc: update make.md #200	2022-12-07 22:38:58 +08:00
fw_qaq	7348140ae1	doc: update git.md (#216 )	2022-12-07 21:46:31 +08:00
fw_qaq	403838287e	doc: update make.md (#215 )	2022-12-07 20:56:56 +08:00
github-actions[bot]	b07df71f57	doc: update README.md.	2022-12-07 11:41:10 +00:00
github-actions[bot]	5e88df2994	doc: update CONTRIBUTING.md.	2022-12-07 11:41:09 +00:00
fw_qaq	58f486a9fb	doc: update make.md (#214 )	2022-12-07 19:39:50 +08:00
二丫讲梵	665b7d8ce3	doc: update README.md (#213 ) (#102 ) 发现一个镜像站更改了，故而去掉	2022-12-07 10:18:09 +08:00
jaywcjlove	0af1de43c7	doc: add intelli-j-idea.md cheatsheet.	2022-12-06 21:57:01 +08:00