素材阁

htmx 速查

共 26 条 htmx 常用属性,涵盖基础、触发与参数、表单、进阶、事件与调试。 支持搜索与分类筛选,点击即可复制。

基础

用 HTML 属性发请求、换局部。

命令说明
引入(单文件,无构建)
GET 并把响应放进 #out
各方法
替换方式
目标元素
工作方式

触发与参数

何时发、发什么。

命令说明
触发事件
防抖与多事件
定时轮询
附带参数
筛选参数

表单

提交与校验。

命令说明
表单提交
自动序列化
二次确认
禁用
加载指示

进阶

历史、增强与实时。

命令说明
渐进增强整页
保留可后退
带外替换
SSE
WebSocket

事件与调试

监听生命周期。

命令说明
监听请求完成
常用事件
全局配置
响应头控制
行为配置

使用说明

htmx 常用属性速查:基础、触发与参数、表单、进阶、事件与调试;支持搜索与分类筛选,点击即可复制。

  1. 按用途点分类:基础、触发与参数、表单、进阶、事件与调试。
  2. 点「属性」列复制,替换路径与目标选择器后使用。
  3. 服务端返回 HTML 片段即可,前端只声明 hx-* 属性。
  4. 用 hx-indicator 显示加载态、hx-confirm 做二次确认。

常见问题

htmx 需要写 JS 吗?
基本不用:交互由 HTML 属性声明,请求与局部替换自动完成;只有复杂场景才写少量 JS 监听 htmx 事件。
和后端框架冲突吗?
不冲突。任意能返回 HTML 片段的后端(Django/Flask/Rails/PHP/Go…)都能配合,htmx 只负责发请求与替换 DOM。
如何做局部刷新?
用 hx-target 指定要更新的元素、hx-swap 指定替换方式;服务端只返回该片段,避免整页刷新。

延伸阅读

相关工具