🎨 前端开发
HTMX
HTMX Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。
📂 分类 · 前端开发🧭 Markdown 速查🏷️ 1 个标签
#htmx
向下滚动查看内容
Getting Started
CDN Import
HTML
滚动查看更多
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
Basic Usage
HTML
滚动查看更多
<button hx-get="/hello" hx-target="#result">Say Hi</button>
<div id="result"></div>
Server Response
HTML
滚动查看更多
<!-- /hello response -->
<p>Hello from server</p>
Core Attributes
`hx-get`, `hx-post`, etc.
HTML
滚动查看更多
<a hx-get="/page">Load Page</a>
<form hx-post="/submit"></form>
`hx-target`
HTML
滚动查看更多
<button hx-get="/data" hx-target="#box"></button>
<div id="box"></div>
`hx-trigger`
HTML
滚动查看更多
<input hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results" />
Swap & Out of Band
`hx-swap`
HTML
滚动查看更多
<div hx-get="/frag" hx-swap="innerHTML"></div>
outerHTMLinnerHTMLbeforebegin,afterbegin, etc.
`hx-swap-oob`
HTML
滚动查看更多
<div hx-swap-oob="true" id="msg"></div>
Useful for global updates from partials.
Swap Modifiers
HTML
滚动查看更多
hx-swap="outerHTML transition:true swap:1s"
Forms & Events
Auto POST on Submit
HTML
滚动查看更多
<form hx-post="/submit" hx-target="#status">
<input name="name" />
<button type="submit">Send</button>
</form>
<div id="status"></div>
`hx-include`
HTML
滚动查看更多
<input id="user-id" name="id" /> <button hx-post="/update" hx-include="#user-id">Update</button>
`hx-vals`
HTML
滚动查看更多
<button hx-post="/save" hx-vals='{"id": 42, "active": true}'>Save</button>
Advanced Features
Loading Indicator
HTML
滚动查看更多
<button hx-get="/load" hx-indicator="#spinner">Load</button>
<div id="spinner" class="htmx-indicator">Loading...</div>
`hx-push-url`
HTML
滚动查看更多
<a hx-get="/page" hx-push-url="true">Go</a>
Polling
HTML
滚动查看更多
<div hx-get="/time" hx-trigger="every 5s"></div>
Events & Extensions
Listen to Events
JS
滚动查看更多
document.body.addEventListener('htmx:afterSwap', e => {
console.log('Swap complete');
});
Event Hooks
htmx:beforeRequesthtmx:afterSwaphtmx:responseError
Extensions
HTML
滚动查看更多
<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
<form hx-post="/api" hx-ext="json-enc"></form>
Example Use Case
Python Backend (Flask)
PYTHON
滚动查看更多
@app.route("/hello")
def hello():
return "<p>Hello, HTMX!</p>"
HTML Client
HTML
滚动查看更多
<button hx-get="/hello" hx-target="#msg">Click</button>
<div id="msg"></div>