From ca803554776a3a7befb3b1a9cf96512efc1ce3a5 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sat, 3 Dec 2022 11:30:26 +0800
Subject: [PATCH] feat: add htmx.md cheatsheet.
---
README.md | 1 +
docs/htmx.md | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 308 insertions(+)
create mode 100644 docs/htmx.md
diff --git a/README.md b/README.md
index 85da5c4..616c591 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ Quick Reference
[TypeScript](./docs/typescript.md)
[Vue 2](./docs/vue2.md)
[Vue 3](./docs/vue.md)
+[ htmx](./docs/htmx.md)
## Nodejs
diff --git a/docs/htmx.md b/docs/htmx.md
new file mode 100644
index 0000000..1c1757d
--- /dev/null
+++ b/docs/htmx.md
@@ -0,0 +1,307 @@
+\ htmx 备忘清单
+===
+
+适合初学者的综合 [htmx](https://htmx.org/) 备忘清单
+
+入门
+---
+
+### 快速开始
+
+[htmx](https://htmx.org/) 是 [intercooler.js](http://intercoolerjs.org/) 的继承者
+
+```html
+
+
+
+```
+
+`hx-post` 和 `hx-swap` 属性告诉 `htmx`：
+
+> 当用户单击此按钮时，向 `/clicked` 发出 `AJAX` 请求，并用响应替换整个按钮
+
+---
+
+[](https://npmjs.org/package/htmx.org)
+[](https://www.npmjs.com/package/htmx.org)
+[](https://github.com/bigskysoftware/htmx/network/dependents)
+
+```bash
+$ npm install htmx.org
+```
+
+安装 `htmx` 将导入添加到您的 `index.js`
+
+```js
+import 'htmx.org';
+```
+
+### 点击编辑提交
+
+
+有一个按钮，可以从 `/contacts/1/edit` 获取联系人的编辑 UI
+
+```html
+
+
: Joe
+
: Blow
+
: joe@blow.com
+
+
+
+
+ | Name | Email | Status | |
+
+
+
+ ...
+
+
+```
+
+表体有一个 `hx-confirm` 属性来确认删除动作。 它还将所有按钮的目标设置为最近的 `tr`，即最近的表格行（`hx-target` 继承自 DOM 中的父级）`hx-swap` 中的交换规范表示将整个目标换出并收到响应后等待 1 秒。最后一点是为了让我们可以使用以下 CSS：
+
+```css
+tr.htmx-swapping td {
+ opacity: 0;
+ transition: opacity 1s ease-out;
+}
+```
+
+在交换/删除之前淡出该行。每行都有一个带有 `hx-delete` 属性的按钮，该属性包含发出 `DELETE` 请求以从服务器中删除该行的 `url`。此请求以空内容响应，表明该行应替换为空内容
+
+```html
+
+ | Angie MacDowell |
+ angie@macdowell.org |
+ Active |
+
+
+ |
+
+```
+
+### 延迟加载
+
+```html
+
+
+
_(不透明度：`1`)_
+`htmx-request` | 在请求进行时应用于元素或使用 `hx-indicator` 指定的元素
+`htmx-settling` | 内容交换后应用于目标，内容确定后删除。
_可以通过 `hx-swap` 修改持续时间_
+`htmx-swapping` | 在交换任何内容之前应用于目标，在交换之后移除。
_可以通过 `hx-swap` 修改持续时间_
+
+### 事件参考
+
+
+事件 | 说明
+:- | --
+`htmx:abort` | 将此事件发送到元素以中止请求
+`htmx:afterOnLoad` | AJAX 请求完成处理成功响应后触发
+`htmx:afterProcessNode` | 在 htmx 初始化节点后触发
+`htmx:afterRequest` | AJAX 请求完成后触发
+`htmx:afterSettle` | DOM 稳定后触发
+`htmx:afterSwap` | 换入新内容后触发
+`htmx:beforeOnLoad` | 在任何响应处理发生之前触发
+`htmx:beforeProcessNode` | 在 htmx 初始化节点之前触发
+`htmx:beforeRequest` | 在发出 AJAX 请求之前触发
+`htmx:beforeSwap` | 在交换完成之前触发，允许您配置交换
+`htmx:beforeSend` | 在发送 ajax 请求之前触发
+`htmx:configRequest` | 在请求之前触发，允许您自定义参数、标头
+`htmx:confirm` | 在元素上发生触发器后触发
_允许您取消(或延迟)发出 AJAX 请求_
+`htmx:historyCacheError` | 在缓存写入期间因错误而触发
+`htmx:historyCacheMiss` | 在历史子系统中的缓存未命中时触发
+`htmx:historyCacheMissError` | 远程检索不成功时触发
+`htmx:historyCacheMissLoad` | 在成功的远程检索时触发
+`htmx:historyRestore` | 当 htmx 处理历史恢复操作时触发
+`htmx:beforeHistorySave` | 在内容保存到历史缓存之前触发
+`htmx:load` | 当新内容添加到 DOM 时触发
+`htmx:noSSESourceError` | 当元素在其触发器中引用 SSE 事件
_但未定义父 SSE 源时触发_
+`htmx:onLoadError` | htmx中onLoad处理异常时触发
+`htmx:oobAfterSwap` | 在交换了一个带元素之后触发
+`htmx:oobBeforeSwap` | 在带外元素交换完成之前触发，允许您配置交换
+`htmx:oobErrorNoTarget` | 当带外元素在当前 DOM 中没有匹配的 ID 时触发
+`htmx:prompt` | 显示提示后触发
+`htmx:pushedIntoHistory` | 在 url 被推送到历史记录后触发
+`htmx:responseError` | 当发生 HTTP 响应错误
_(非 200 或 300 响应代码)时触发_
+`htmx:sendError` | 当网络错误阻止 HTTP 请求发生时触发
+`htmx:sseError` | 当 SSE 源发生错误时触发
+`htmx:swapError` | 在交换阶段发生错误时触发
+`htmx:targetError` | 指定无效目标时触发
+`htmx:timeout` | 发生请求超时时触发
+`htmx:validation:validate` | 在验证元素之前触发
+`htmx:validation:failed` | 当元素验证失败时触发
+`htmx:validation:halted` | 当请求由于验证错误而停止时触发
+`htmx:xhr:abort` | 当 `ajax` 请求中止时触发
+`htmx:xhr:loadend` | `ajax` 请求结束时触发
+`htmx:xhr:loadstart` | `ajax` 请求开始时触发
+`htmx:xhr:progress` | 在支持进度事件的 `ajax` 请求期间定期触发
+
+### JavaScript API 参考
+
+方法 | 说明
+:- | --
+`htmx.addClass()` | 向给定元素添加一个类
+`htmx.ajax()` | 发出一个 htmx 风格的 ajax 请求
+`htmx.closest()` | 找到与选择器匹配的给定元素的最近父级
+`htmx.config` | 保存当前 htmx 配置对象的属性
+`htmx.createEventSource` | 包含为 htmx 创建 SSE EventSource 对象的函数的属性
+`htmx.createWebSocket` | 包含为 htmx 创建 WebSocket 对象的函数的属性
+`htmx.defineExtension()` | 定义一个 htmx 扩展
+`htmx.find()` | 查找与选择器匹配的单个元素
+`htmx.findAll()` \| `htmx.findAll(elt, selector)` | 查找与给定选择器匹配的所有元素
+`htmx.logAll()` | 安装将记录所有 htmx 事件的记录器
+`htmx.logger` | 设置为当前记录器的属性（默认为空）
+`htmx.off()` | 从给定元素中删除事件侦听器
+`htmx.on()` | 在给定元素上创建事件侦听器，并返回它
+`htmx.onLoad()` | 为 htmx:load 事件添加回调处理程序
+`htmx.parseInterval()` | 将间隔声明解析为毫秒值
+`htmx.process()` | 处理给定元素及其子元素，连接任何 htmx 行为
+`htmx.remove()` | 删除给定的元素
+`htmx.removeClass()` | 从给定元素中删除一个类
+`htmx.removeExtension()` | 删除一个 htmx 扩展
+`htmx.takeClass()` | 从给定元素的其他元素中获取一个类
+`htmx.toggleClass()` | 从给定元素切换一个类
+`htmx.trigger()` | 在元素上触发事件
+`htmx.values()` | 返回与给定元素关联的输入值
+
+### 请求标头参考
+
+标头 | 说明
+:- | --
+`HX-Boosted` | 表示请求是通过使用 `hx-boost` 的元素发出的
+`HX-Current-URL` | 浏览器的当前 `URL`
+`HX-History-Restore-Request` | 如果请求是在本地历史缓存未命中后进行历史恢复，则为 `true`
+`HX-Prompt` | 用户对 `hx` 提示的响应
+`HX-Request` | 总是 `true`
+`HX-Target` | 目标元素的 id(如果存在)
+`HX-Trigger-Name` | 触发元素的名称(如果存在)
+`HX-Trigger` | 触发元素的 id(如果存在)
+
+### 响应标头参考
+
+标头 | 说明
+:- | --
+[`HX-Location`](https://htmx.org/headers/hx-location) | 允许您执行不执行整页重新加载的客户端重定向
+[`HX-Push-Url`](https://htmx.org/headers/hx-push-url) | 将一个新的 `url` 推入历史堆栈
+`HX-Redirect` | 可用于将客户端重定向到新位置
+`HX-Refresh` | 如果设置为 `true`，客户端将完全刷新页面
+[`HX-Replace-Url`](https://htmx.org/headers/hx-replace-url) | 替换地址栏中的当前 `URL`
+`HX-Reswap` | 允许您指定如何交换响应
_有关可能的值，请参阅 [`hx-swap`](https://htmx.org/attributes/hx-swap)_
+`HX-Retarget` | 将内容更新的目标更新为页面上不同元素的 CSS 选择器
+[`HX-Trigger`](https://htmx.org/headers/hx-trigger) | 允许您触发客户端事件
_请[参阅文档](https://htmx.org/headers/hx-trigger)以获取更多信息_
+[`HX-Trigger-After-Settle`](https://htmx.org/headers/hx-trigger) | 允许您触发客户端事件
_请[参阅文档](https://htmx.org/headers/hx-trigger)以获取更多信息_
+[`HX-Trigger-After-Swap`](https://htmx.org/headers/hx-trigger) | 允许您触发客户端事件
_请[参阅文档](https://htmx.org/headers/hx-trigger)以获取更多信息_