HTMX

精选 HTMX 常用指令与核心速查备忘单，涵盖高频用法、配置参数与实用技巧。HTMX 是一个现代、极简的 JavaScript 库，允许你使用 HTML 属性创建动态 Web 界面。

Star 项目
关注 X (Twitter)
赞赏饮咖啡

#入门指南

#CDN 引入 (CDN Import)

<script src="https://unpkg.com/[email protected]"></script>

#基础用法

<button hx-get="/hello" hx-target="#result">Say Hi</button>
<div id="result"></div>

#服务器响应 (Server Response)

<!-- /hello 响应内容 -->
<p>Hello from server</p>

#核心属性

#HTTP 请求方法 (hx-get, hx-post, etc.)

<a hx-get="/page">Load Page</a>
<form hx-post="/submit"></form>

#目标元素 (hx-target)

<button hx-get="/data" hx-target="#box"></button>
<div id="box"></div>

#触发事件 (hx-trigger)

<input
  hx-get="/search"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#results"
/>

#交换策略与带外更新

#内容交换 (hx-swap)

<div hx-get="/frag" hx-swap="innerHTML"></div>
  • outerHTML
  • innerHTML
  • beforebegin、afterbegin 等

#带外交换 (hx-swap-oob)

<div hx-swap-oob="true" id="msg"></div>

适用于从局部视图进行全局更新。

#交换修饰符 (Swap Modifiers)

hx-swap="outerHTML transition:true swap:1s"

#表单与事件

#自动 POST 提交 (Auto POST on Submit)

<form hx-post="/submit" hx-target="#status">
  <input name="name" />
  <button type="submit">Send</button>
</form>
<div id="status"></div>

#包含元素 (hx-include)

<input id="user-id" name="id" />
<button hx-post="/update" hx-include="#user-id">Update</button>

#额外值 (hx-vals)

<button hx-post="/save" hx-vals='{"id": 42, "active": true}'>Save</button>

#高级特性与技巧

#加载指示器 (Loading Indicator)

<button hx-get="/load" hx-indicator="#spinner">Load</button>
<div id="spinner" class="htmx-indicator">Loading...</div>

#URL 推送 (hx-push-url)

<a hx-get="/page" hx-push-url="true">Go</a>

#轮询 (Polling)

<div hx-get="/time" hx-trigger="every 5s"></div>

#事件与扩展

#监听事件 (Listen to Events)

document.body.addEventListener('htmx:afterSwap', (e) => {
  console.log('Swap complete');
});

#事件钩子 (Event Hooks)

  • htmx:beforeRequest
  • htmx:afterSwap
  • htmx:responseError

#扩展功能 (Extensions)

<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
<form hx-post="/api" hx-ext="json-enc"></form>

#实用示例

#Python 后端（Flask）(Python Backend Flask)

@app.route("/hello")
def hello():
    return "<p>Hello, HTMX!</p>"

#HTML 客户端 (HTML Client)

<button hx-get="/hello" hx-target="#msg">Click</button>
<div id="msg"></div>