使用 htmx 时最常用的属性。
| 属性 | 描述 |
|---|---|
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 中可用的其他所有属性。
| 属性 | 描述 |
|---|---|
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) |
| 类名 | 描述 |
|---|---|
htmx-added | 在新内容交换前应用，定居后移除。 |
htmx-indicator | 动态生成的类，当存在 htmx-request 类时可见（opacity:1） |
htmx-request | 在请求进行时，应用于元素或指定的 hx-indicator 元素 |
htmx-settling | 在内容交换后应用于目标，定居后移除。持续时间可以通过 hx-swap 修改。 |
htmx-swapping | 在任何内容交换之前应用于目标，交换后移除。持续时间可以通过 hx-swap 修改。 |
| 标头 | 描述 |
|---|---|
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 |
| 标头 | 描述 |
|---|---|
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 | 允许您在交换 |
步骤后触发客户端事件
| 方法 | 描述 |
|---|---|
htmx.addClass() | 为给定元素添加一个类 |
htmx.ajax() | 发起一个 htmx 风格的 ajax 请求 |
htmx.closest() | 查找与选择器匹配的最近父元素 |
htmx.config | 保存当前 htmx 配置对象的属性 |
htmx.createEventSource | 保存创建 SSE EventSource 对象的函数的属性 |
htmx.createWebSocket | 保存创建 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 有一些配置选项，可以通过编程方式或声明方式访问。它们如下所示：
| 配置变量 | 信息 |
|---|---|
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，接收的二进制数据类型 |
htmx.config.disableSelector | 默认为 [hx-disable], [data-hx-disable]，htmx 将不会处理带有此属性的元素或其父元素 |
htmx.config.withCredentials | 默认为 false，允许跨站点使用凭据（如 cookies、授权标头或 TLS 客户端证书）进行 Access-Control 请求 |
htmx.config.timeout | 默认为 0，请求在自动终止之前可以进行的毫秒数 |
htmx.config.scrollBehavior | 默认为 ‘instant’，页面过渡中加速链接的行为。允许的值为 auto、instant 和 smooth。Instant 将在单次跳转中立即滚动，smooth 将平滑滚动，而 auto 将表现为普通链接。 |
htmx.config.defaultFocusScroll | 是否应滚动到视图中的聚焦元素，默认为 false，可以使用 focus-scroll 交换修饰符覆盖。 |
htmx.config.getCacheBusterParam | 默认为 false，如果设置为 true，htmx 将在 GET 请求中附加目标元素，格式为 org.htmx.cache-buster=targetElementId |
htmx.config.globalViewTransitions | 如果设置为 true，htmx 将在交换新内容时使用 View Transition API。 |
htmx.config.methodsThatUseUrlParams | 默认为 ["get"]，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.allowNestedOobSwaps | 默认为 true，是否处理嵌套在主响应元素内的 OOB 交换。请参阅 嵌套 OOB 交换。 |
您可以直接在 JavaScript 中设置这些选项，或者使用 meta 标签：
<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>