使用 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 | 一个包含用于创建 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 有一些配置选项，可以通过编程方式或声明方式访问。它们列在下面
| 配置变量 | 信息 |
|---|---|
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.withCredentials | 默认为 false，允许跨站点访问控制请求使用凭据，如 cookie、授权标头或 TLS 客户端证书 |
htmx.config.timeout | 默认为 0，请求在自动终止之前可以持续的毫秒数 |
htmx.config.scrollBehavior | 默认为 ‘instant’，使用 show 修饰符与 hx-swap 时滚动的行为。允许的值为 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 将在交换新内容时使用 视图过渡 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 交换. |
您可以直接在 javascript 中设置它们，也可以使用 meta 标记
<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>