使用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.disableInheritance | 默认为false。如果设置为true，将完全禁用属性继承，此时可以使用hx-inherit属性手动控制继承。 |
htmx.config.withCredentials | 默认为false，允许跨域请求携带凭据（如cookies、授权头或TLS客户端证书） |
htmx.config.timeout | 默认为0，表示请求自动终止前的超时毫秒数 |
htmx.config.scrollBehavior | 默认为'instant'，在使用show修饰符时的滚动行为。可选值有instant（立即跳转）、smooth（平滑滚动）和auto（由scroll-behavior的CSS计算值决定）。 |
htmx.config.defaultFocusScroll | 聚焦元素是否自动滚动到视图中，默认为false，可通过focus-scroll交换修饰符覆盖 |
htmx.config.getCacheBusterParam | 默认为false，若设为true，htmx会在GET请求后追加org.htmx.cache-buster=targetElementId格式的目标元素参数 |
htmx.config.globalViewTransitions | 若设为true，htmx将在内容交换时使用视图过渡API |
htmx.config.methodsThatUseUrlParams | 默认为["get", "delete"]，这些方法的请求参数将被编码在URL中而非请求体 |
htmx.config.selfRequestsOnly | 默认为true，是否仅允许向当前文档同域的AJAX请求 |
htmx.config.ignoreTitle | 默认为false，若设为true，当发现新内容中有title标签时htmx不会更新文档标题 |
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头选择性返回部分响应时，应始终禁用此选项 |
您可以直接在JavaScript中设置这些配置，或使用meta标签：
<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>