参考

核心属性参考

使用 htmx 时最常见的属性。

Attribute	Description
`hx-get`	向指定的 URL 发出 `GET` 请求
`hx-post`	向指定的 URL 发出 `POST` 请求
`hx-on*`	使用元素上的内联脚本处理事件
`hx-push-url`	将 URL 推送到浏览器位置栏以创建历史记录
`hx-select`	从响应中选择要交换的内容
`hx-select-oob`	从响应中选择要交换的内容，但位置不同于目标（带外）
`hx-swap`	控制内容交换方式（`outerHTML`、`beforeend`、`afterend` 等）
`hx-swap-oob`	标记从响应中交换的元素（带外）
`hx-target`	指定要交换的目标元素
`hx-trigger`	指定触发请求的事件
`hx-vals`	添加要随请求提交的值（JSON 格式）

附加属性参考

htmx 中可用的所有其他属性。

Attribute	Description
`hx-boost`	为链接和表单添加渐进式增强
`hx-confirm`	在发出请求前显示 `confirm()` 对话框
`hx-delete`	向指定的 URL 发出 `DELETE` 请求
`hx-disable`	禁用给定节点及其子节点的 htmx 处理
`hx-disabled-elt`	在请求进行中为指定元素添加 `disabled` 属性
`hx-disinherit`	控制并禁用子节点的自动属性继承
`hx-encoding`	更改请求编码类型
`hx-ext`	此元素要使用的扩展
`hx-headers`	添加要随请求提交的标头
`hx-history`	防止敏感数据保存到历史缓存
`hx-history-elt`	在历史导航期间要快照和恢复的元素
`hx-include`	在请求中包含额外数据
`hx-indicator`	在请求期间为其添加 `htmx-request` 类的元素
`hx-inherit`	如果默认禁用，则控制并启用子节点的自动属性继承
`hx-params`	过滤要随请求提交的参数
`hx-patch`	向指定的 URL 发出 `PATCH` 请求
`hx-preserve`	指定在请求之间保持不变的元素
`hx-prompt`	在提交请求前显示 `prompt()`
`hx-put`	向指定的 URL 发出 `PUT` 请求
`hx-replace-url`	替换浏览器位置栏中的 URL
`hx-request`	配置请求的各个方面
`hx-sync`	控制不同元素发出的请求如何同步
`hx-validate`	在请求前强制元素验证自身
`hx-vars`	动态添加要随请求提交的参数值（已弃用，请使用 `hx-vals`）

CSS 类参考

Class	Description
`htmx-added`	在内容交换前应用于新内容，在稳定后移除。
`htmx-indicator`	动态生成的类，当存在 `htmx-request` 类时，将切换为可见（opacity:1）
`htmx-request`	在请求进行中应用于元素或使用 `hx-indicator` 指定的元素
`htmx-settling`	在内容交换后应用于目标，在稳定后移除。持续时间可通过 `hx-swap` 修改。
`htmx-swapping`	在任何内容交换前应用于目标，在交换后移除。持续时间可通过 `hx-swap` 修改。

HTTP 头参考

请求头参考

Header	Description
`HX-Boosted`	表示请求是通过使用 hx-boost 的元素发出的
`HX-Current-URL`	浏览器的当前 URL
`HX-History-Restore-Request`	如果请求用于本地历史缓存未命中后的历史恢复，则为 “true”
`HX-Prompt`	对 hx-prompt 的用户响应
`HX-Request`	始终为 “true”
`HX-Target`	如果存在，则为目标元素的 `id`
`HX-Trigger-Name`	如果存在，则为触发元素的 `name`
`HX-Trigger`	如果存在，则为触发元素的 `id`

响应头参考

Header	Description
`HX-Location`	允许进行不进行完整页面重新加载的客户端重定向
`HX-Push-Url`	将新 URL 推送到历史栈
`HX-Redirect`	可用于进行客户端重定向到新位置
`HX-Refresh`	如果设置为 “true”，则客户端将进行完整页面刷新
`HX-Replace-Url`	替换位置栏中的当前 URL
`HX-Reswap`	允许指定响应交换方式。请参阅 hx-swap 以获取可能的值
`HX-Retarget`	CSS 选择器，用于将内容更新的目标更新为页面上的不同元素
`HX-Reselect`	CSS 选择器，允许选择响应中用于交换的部分。覆盖触发元素上现有的 `hx-select`
`HX-Trigger`	允许触发客户端事件
`HX-Trigger-After-Settle`	允许在稳定步骤后触发客户端事件
`HX-Trigger-After-Swap`	允许在交换步骤后触发客户端事件

事件参考

Event	Description
`htmx:abort`	向元素发送此事件以中止请求
`htmx:afterOnLoad`	在 AJAX 请求完成处理成功响应后触发
`htmx:afterProcessNode`	在 htmx 初始化节点后触发
`htmx:afterRequest`	在 AJAX 请求完成时触发
`htmx:afterSettle`	在 DOM 稳定后触发
`htmx:afterSwap`	在新内容交换后触发
`htmx:beforeCleanupElement`	在 htmx 禁用元素或从 DOM 中移除它之前触发
`htmx:beforeOnLoad`	在任何响应处理发生之前触发
`htmx:beforeProcessNode`	在 htmx 初始化节点之前触发
`htmx:beforeRequest`	在发出 AJAX 请求之前触发
`htmx:beforeSwap`	在执行交换之前触发，允许配置交换
`htmx:beforeSend`	在发送 ajax 请求之前立即触发
`htmx:beforeTransition`	在 View Transition 包装的交换发生之前触发
`htmx:configRequest`	在请求之前触发，允许自定义参数、标头
`htmx:confirm`	在元素上发生触发后触发，允许取消（或延迟）发出 AJAX 请求
`htmx:historyCacheError`	在缓存写入期间发生错误时触发
`htmx:historyCacheHit`	在历史子系统中缓存命中时触发
`htmx:historyCacheMiss`	在历史子系统中缓存未命中时触发
`htmx:historyCacheMissLoadError`	在远程检索不成功时触发
`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:replacedInHistory`	在替换历史中的 URL 后触发
`htmx:responseError`	当发生 HTTP 响应错误（非 `200` 或 `300` 响应代码）时触发
`htmx:sendAbort`	当请求中止时触发
`htmx:sendError`	当网络错误阻止 HTTP 请求发生时触发
`htmx:sseError`	当 SSE 源发生错误时触发
`htmx:sseOpen`	当打开 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 参考

Method	Description
`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`	设置为当前日志记录器的属性（默认为 `null`）
`htmx.off()`	从给定元素移除事件监听器
`htmx.on()`	在给定元素上创建事件监听器并返回它
`htmx.onLoad()`	为 `htmx:load` 事件添加回调处理程序
`htmx.parseInterval()`	将间隔声明解析为毫秒值
`htmx.process()`	处理给定元素及其子元素，连接任何 htmx 行为
`htmx.remove()`	移除给定元素
`htmx.removeClass()`	从给定元素移除类
`htmx.removeExtension()`	移除 htmx 扩展
`htmx.swap()`	执行 HTML 内容的交换（和稳定）
`htmx.takeClass()`	为给定元素从其他元素获取类
`htmx.toggleClass()`	在给定元素上切换类
`htmx.trigger()`	在元素上触发事件
`htmx.values()`	返回与给定元素关联的输入值

配置参考

Htmx 具有一些可以通过编程或声明方式访问的配置选项。它们列在下面：

Config Variable	Info
`htmx.config.historyEnabled`	默认为 `true`，仅用于测试
`htmx.config.historyCacheSize`	默认为 10
`htmx.config.refreshOnHistoryMiss`	默认为 `false`，如果设置为 `true`，htmx 将在历史未命中时发出完整页面刷新，而不是使用 AJAX 请求
`htmx.config.defaultSwapStyle`	默认为 `innerHTML`
`htmx.config.defaultSwapDelay`	默认为 0
`htmx.config.defaultSettleDelay`	默认为 20
`htmx.config.includeIndicatorStyles`	默认为 `true`（决定是否加载指示器样式）
`htmx.config.indicatorClass`	默认为 `htmx-indicator`
`htmx.config.requestClass`	默认为 `htmx-request`
`htmx.config.addedClass`	默认为 `htmx-added`
`htmx.config.settlingClass`	默认为 `htmx-settling`
`htmx.config.swappingClass`	默认为 `htmx-swapping`
`htmx.config.allowEval`	默认为 `true`，可用于禁用 htmx 对某些功能（例如触发器过滤器）的 eval 使用
`htmx.config.allowScriptTags`	默认为 `true`，决定 htmx 是否处理在新内容中找到的脚本标签
`htmx.config.inlineScriptNonce`	默认为 `''`，表示不会为内联脚本添加 nonce
`htmx.config.inlineStyleNonce`	默认为 `''`，表示不会为内联样式添加 nonce
`htmx.config.attributesToSettle`	默认为 `["class", "style", "width", "height"]`，在稳定阶段要稳定的属性
`htmx.config.wsReconnectDelay`	默认为 `full-jitter`
`htmx.config.wsBinaryType`	默认为 `blob`，通过 WebSocket 连接接收的二进制数据类型
`htmx.config.disableSelector`	默认为 `[hx-disable], [data-hx-disable]`，htmx 不会处理具有此属性或父级上的元素的元素
`htmx.config.disableInheritance`	默认为 `false`。如果设置为 `true`，则完全禁用属性继承，您可以使用 hx-inherit 属性显式指定继承。
`htmx.config.withCredentials`	默认为 `false`，允许使用凭据（如 Cookie、授权标头或 TLS 客户端证书）进行跨站 Access-Control 请求
`htmx.config.timeout`	默认为 0，请求在自动终止前的毫秒数
`htmx.config.scrollBehavior`	默认为 ‘instant’，使用 `hx-swap` 的 show 修饰符时的滚动行为。允许的值为 `instant`（滚动应立即在一次跳跃中发生）、`smooth`（滚动应平滑动画）和 `auto`（滚动行为由 scroll-behavior 的计算值决定）。
`htmx.config.defaultFocusScroll`	如果焦点元素应滚动到视图中，默认为 false，可使用 focus-scroll 交换修饰符覆盖。
`htmx.config.getCacheBusterParam`	默认为 false，如果设置为 true，htmx 将以 `org.htmx.cache-buster=targetElementId` 格式将目标元素附加到 `GET` 请求
`htmx.config.globalViewTransitions`	如果设置为 `true`，htmx 将在交换新内容时使用 View Transition API。
`htmx.config.methodsThatUseUrlParams`	默认为 `["get", "delete"]`，htmx 将通过在 URL 中编码这些方法的参数（而非请求体）来格式化请求
`htmx.config.selfRequestsOnly`	默认为 `true`，是否仅允许对当前文档相同域的 AJAX 请求
`htmx.config.ignoreTitle`	默认为 `false`，如果设置为 `true`，htmx 在新内容中找到 `title` 标签时不会更新文档标题
`htmx.config.scrollIntoViewOnBoost`	默认为 `true`，是否将提升元素的靶向滚动到视口。如果提升元素上省略 `hx-target`，则目标默认为 `body`，导致页面滚动到顶部。
`htmx.config.triggerSpecsCache`	默认为 `null`，用于存储已评估触发器规范的缓存，以提高解析性能，但代价是更多内存使用。您可以定义一个简单对象来使用永不清除的缓存，或使用代理对象实现自己的系统
`htmx.config.responseHandling`	默认的响应处理行为可在此配置为交换或错误，以处理响应状态代码
`htmx.config.allowNestedOobSwaps`	默认为 `true`，是否处理主响应元素内嵌套元素的 OOB 交换。请参阅嵌套 OOB 交换。
`htmx.config.historyRestoreAsHxRequest`	默认为 `true`，是否将历史缓存未命中完整页面重新加载请求视为 “HX-Request”，通过返回此响应头。此选项在使用 HX-Request 头可选返回部分响应时应始终禁用
`htmx.config.reportValidityOfForms`	默认为 `false`，是否向最终用户报告输入验证错误并将焦点更新到第一个验证失败的输入。此选项应始终启用，因为这匹配默认浏览器表单提交行为

您可以在 JavaScript 中直接设置它们，或者使用 meta 标签：

<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>