buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 12:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
f83e18ad9816bf82a02bacde4fcaed2a31a8403b
reference/docs/htmx.html
jaywcjlove f83e18ad98 doc: add badges. 51c4d2a719
2022-12-03 06:55:51 +00:00

704 lines
54 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>\&#x3C;/> htmx 备忘清单
&#x26; htmx cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="适合初学者的综合 htmx 备忘清单
<!--rehype:style=padding-top: 12px;-->
入门，为开发人员分享快速参考备忘单。">
<meta keywords="htmx,reference,Quick,Reference,cheatsheet,cheat,sheet">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/katex.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/htmx.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="-htmx-备忘清单"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
<path d="M107.946667 838.4l57.173333 23.893333v-385.28l-103.68 250.026667c-17.493333 43.52 3.413333 93.44 46.506667 111.36z m832-157.866667L728.32 169.813333a85.888 85.888 0 0 0-77.226667-52.48c-11.093333 0-22.613333 1.706667-33.706666 6.4L302.933333 253.866667a85.290667 85.290667 0 0 0-46.08 110.933333l211.626667 510.72a85.248 85.248 0 0 0 110.933333 46.08l314.026667-130.133333a85.077333 85.077333 0 0 0 46.506667-110.933334zM336.213333 373.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m-85.333333 469.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h61.866667l-147.2-355.84v270.506667z"></path>
</svg><a aria-hidden="true" tabindex="-1" href="#-htmx-备忘清单"><span class="icon icon-link"></span></a>&#x3C;/> htmx 备忘清单</h1><div class="wrap-body">
<p><a href="https://npmjs.org/package/htmx.org"><img src="https://img.shields.io/npm/v/htmx.org.svg?style=flat" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/htmx.org"><img src="https://img.shields.io/npm/dm/htmx.org.svg?style=flat" alt="Downloads"></a>
<a href="https://github.com/bigskysoftware/htmx/network/dependents"><img src="https://badgen.net/github/dependents-repo/bigskysoftware/htmx" alt="Repo Dependents"></a>
<a href="https://github.com/bigskysoftware/htmx"><img src="https://badgen.net/badge/icon/Github?icon=github&#x26;label" alt="Github repo"></a></p>
<p style="padding-top: 12px;">适合初学者的综合 <a href="https://htmx.org/">htmx</a> 备忘清单</p>
<!--rehype:style=padding-top: 12px;-->
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#快速开始">快速开始</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#点击编辑提交">点击编辑提交</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#删除行">删除行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#延迟加载">延迟加载</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#api-参考">API 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#核心属性参考">核心属性参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#附加属性参考">附加属性参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-类参考">CSS 类参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件参考">事件参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#javascript-api-参考">JavaScript API 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#请求标头参考">请求标头参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#响应标头参考">响应标头参考</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="快速开始"><a aria-hidden="true" tabindex="-1" href="#快速开始"><span class="icon icon-link"></span></a>快速开始</h3><div class="wrap-body">
<p><a href="https://htmx.org/">htmx</a> 是 <a href="http://intercoolerjs.org/">intercooler.js</a> 的继承者</p>
<pre class="wrap-text"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/htmx.org@1.8.4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!-- 有一个按钮POST，通过AJAX点击 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">hx-post</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/clicked<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> 点击我
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p><code>hx-post</code> 和 <code>hx-swap</code> 属性告诉 <code>htmx</code>：</p>
<blockquote>
<p>当用户单击此按钮时，向 <code>/clicked</code> 发出 <code>AJAX</code> 请求，并用响应替换整个按钮</p>
</blockquote>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> htmx.org
</span></code></pre>
<p>安装 <code>htmx</code> 将导入添加到您的 <code>index.js</code></p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token string">'htmx.org'</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="点击编辑提交"><a aria-hidden="true" tabindex="-1" href="#点击编辑提交"><span class="icon icon-link"></span></a>点击编辑提交</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>有一个按钮，可以从 <code>/contacts/1/edit</code> 获取联系人的编辑 UI</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">hx-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>this<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>名字<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>: Joe<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>姓<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>: Blow<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>: joe@blow.com<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">hx-get</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1/edit<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> 点击编辑
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>这将返回一个可用于编辑联系人的表单</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>form</span> <span class="token attr-name">hx-put</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1<span class="token punctuation">"</span></span> <span class="token attr-name">hx-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>this<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>名字<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>firstName<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Joe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>姓<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lastName<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Blow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>joe@blow.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span> <span class="token attr-name">hx-get</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>表单按照通常的 <code>REST-ful</code> 模式将 <code>PUT</code> 发回 <code>/contacts/1</code></p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="删除行"><a aria-hidden="true" tabindex="-1" href="#删除行"><span class="icon icon-link"></span></a>删除行</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>table delete-row-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>thead</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>th</span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>th</span><span class="token punctuation">></span></span>Status<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>th</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>thead</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tbody</span> <span class="token attr-name">hx-confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Are you sure?<span class="token punctuation">"</span></span> <span class="token attr-name">hx-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>closest tr<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML swap:1s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> ...
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tbody</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>table</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>表体有一个 <code>hx-confirm</code> 属性来确认删除动作。 它还将所有按钮的目标设置为最近的 <code>tr</code>，即最近的表格行（<code>hx-target</code> 继承自 DOM 中的父级）<code>hx-swap</code> 中的交换规范表示将整个目标换出并收到响应后等待 1 秒。最后一点是为了让我们可以使用以下 CSS：</p>
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">tr<span class="token class">.htmx-swapping</span> td</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> opacity <span class="token number">1</span><span class="token unit">s</span> ease-out<span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>在交换/删除之前淡出该行。每行都有一个带有 <code>hx-delete</code> 属性的按钮，该属性包含发出 <code>DELETE</code> 请求以从服务器中删除该行的 <code>url</code>。此请求以空内容响应，表明该行应替换为空内容</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>Angie MacDowell<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>angie@macdowell.org<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>Active<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-danger<span class="token punctuation">"</span></span> <span class="token attr-name">hx-delete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> Delete
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="延迟加载"><a aria-hidden="true" tabindex="-1" href="#延迟加载"><span class="icon icon-link"></span></a>延迟加载</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">hx-get</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/graph<span class="token punctuation">"</span></span> <span class="token attr-name">hx-trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>load<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>正在加载中...<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>htmx-indicator<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/bars.svg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>当我们加载图表时显示进度指示器。 然后通过稳定的 CSS(<code>htmx-settling</code>) 过渡加载图形并逐渐淡入视图</p>
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.htmx-settling</span> img</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token selector">img</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> opacity <span class="token number">300</span><span class="token unit">ms</span> ease-in<span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="api-参考"><a aria-hidden="true" tabindex="-1" href="#api-参考"><span class="icon icon-link"></span></a>API 参考</h2><div class="wrap-body">
<!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="核心属性参考"><a aria-hidden="true" tabindex="-1" href="#核心属性参考"><span class="icon icon-link"></span></a>核心属性参考</h3><div class="wrap-body">
<table class="left-align"><thead><tr><th align="left">属性</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>hx-boost</code></td><td>添加或删除链接和表单的<a href="https://en.wikipedia.org/wiki/Progressive_enhancement">渐进增强</a></td></tr><tr><td align="left"><code>hx-get</code></td><td>向指定的 URL 发出 <code>GET</code></td></tr><tr><td align="left"><code>hx-post</code></td><td>向指定的 URL 发出 <code>POST</code></td></tr><tr><td align="left"><code>hx-push-url</code></td><td>将 URL 推入浏览器地址栏，创建一个新的历史条目</td></tr><tr><td align="left"><code>hx-select</code></td><td>从响应中选择要换入的内容</td></tr><tr><td align="left"><code>hx-select-oob</code></td><td>从带外(目标以外的某个地方)的响应中选择要换入的内容</td></tr><tr><td align="left"><code>hx-swap</code></td><td>控制内容的交换方式(<code>outerHTML</code>、<code>beforeEnd</code>、<code>afterend</code>，...)</td></tr><tr><td align="left"><code>hx-swap-oob</code></td><td>将响应中的内容标记为带外(应该在目标以外的地方交换)</td></tr><tr><td align="left"><code>hx-target</code></td><td>指定要交换的目标元素</td></tr><tr><td align="left"><code>hx-trigger</code></td><td>指定触发请求的事件</td></tr><tr><td align="left"><code>hx-vals</code></td><td>向参数添加值以随请求一起提交(JSON 格式)</td></tr></tbody></table>
<!--rehype:className=left-align-->
<p>使用 htmx 时最常用的属性</p>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="附加属性参考"><a aria-hidden="true" tabindex="-1" href="#附加属性参考"><span class="icon icon-link"></span></a>附加属性参考</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table class="left-align"><thead><tr><th align="left">属性</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>hx-confirm</code></td><td>在发出请求之前显示一个 <code>confim()</code> 对话框</td></tr><tr><td align="left"><code>hx-delete</code></td><td>向指定的 URL 发出 <code>DELETE</code></td></tr><tr><td align="left"><code>hx-disable</code></td><td>禁用给定节点和任何子节点的 htmx 处理</td></tr><tr><td align="left"><code>hx-disinherit</code></td><td>控制和禁用子节点的自动属性继承</td></tr><tr><td align="left"><code>hx-encoding</code></td><td>更改请求编码类型</td></tr><tr><td align="left"><code>hx-ext</code></td><td>用于此元素的扩展</td></tr><tr><td align="left"><code>hx-headers</code></td><td>添加到将与请求一起提交的标头</td></tr><tr><td align="left"><code>hx-history-elt</code></td><td>在历史导航期间要快照和恢复的元素</td></tr><tr><td align="left"><code>hx-include</code></td><td>在请求中包含额外数据</td></tr><tr><td align="left"><code>hx-indicator</code></td><td>在请求期间放置 <code>htmx-request</code> 类的元素</td></tr><tr><td align="left"><code>hx-params</code></td><td>过滤将与请求一起提交的参数</td></tr><tr><td align="left"><code>hx-patch</code></td><td>向指定的 URL 发出 PATCH</td></tr><tr><td align="left"><code>hx-preserve</code></td><td>指定在请求之间保持不变的元素</td></tr><tr><td align="left"><code>hx-prompt</code></td><td>在提交请求之前显示一个 <code>prompt()</code></td></tr><tr><td align="left"><code>hx-put</code></td><td>向指定的 URL 发出 PUT</td></tr><tr><td align="left"><code>hx-replace-url</code></td><td>替换浏览器地址栏中的 URL</td></tr><tr><td align="left"><code>hx-request</code></td><td>配置请求的各个方面</td></tr><tr><td align="left"><code>hx-sse</code></td><td>已移至分机。 <a href="https://htmx.org/attributes/hx-sse">旧版本的文档</a></td></tr><tr><td align="left"><code>hx-sync</code></td><td>控制不同元素发出的请求如何同步</td></tr><tr><td align="left"><code>hx-validate</code></td><td>强制元素在请求之前验证自己</td></tr><tr><td align="left"><del><code>hx-vars</code></del></td><td>将值动态添加到参数以随请求提交(已弃用，请使用 <code>hx-vals</code>)</td></tr><tr><td align="left"><code>hx-ws</code></td><td>已移至分机。<a href="https://htmx.org/attributes/hx-ws">旧版本的文档</a></td></tr></tbody></table>
<!--rehype:className=left-align-->
<p>列出了 htmx 中可用的所有其他属性</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-类参考"><a aria-hidden="true" tabindex="-1" href="#css-类参考"><span class="icon icon-link"></span></a>CSS 类参考</h3><div class="wrap-body">
<table><thead><tr><th align="left">Class</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>htmx-added</code></td><td>在交换之前应用于新的内容，在它被解决之后移除</td></tr><tr><td align="left"><code>htmx-indicator</code></td><td>一个动态生成的类，当存在 <code>htmx-request</code> 类时将切换可见<br> <em>(不透明度：<code>1</code>)</em></td></tr><tr><td align="left"><code>htmx-request</code></td><td>在请求进行时应用于元素或使用 <code>hx-indicator</code> 指定的元素</td></tr><tr><td align="left"><code>htmx-settling</code></td><td>内容交换后应用于目标，内容确定后删除。<br> <em>可以通过 <code>hx-swap</code> 修改持续时间</em></td></tr><tr><td align="left"><code>htmx-swapping</code></td><td>在交换任何内容之前应用于目标，在交换之后移除。<br> <em>可以通过 <code>hx-swap</code> 修改持续时间</em></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="事件参考"><a aria-hidden="true" tabindex="-1" href="#事件参考"><span class="icon icon-link"></span></a>事件参考</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<table><thead><tr><th align="left">事件</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>htmx:abort</code></td><td>将此事件发送到元素以中止请求</td></tr><tr><td align="left"><code>htmx:afterOnLoad</code></td><td>AJAX 请求完成处理成功响应后触发</td></tr><tr><td align="left"><code>htmx:afterProcessNode</code></td><td>在 htmx 初始化节点后触发</td></tr><tr><td align="left"><code>htmx:afterRequest</code></td><td>AJAX 请求完成后触发</td></tr><tr><td align="left"><code>htmx:afterSettle</code></td><td>DOM 稳定后触发</td></tr><tr><td align="left"><code>htmx:afterSwap</code></td><td>换入新内容后触发</td></tr><tr><td align="left"><code>htmx:beforeOnLoad</code></td><td>在任何响应处理发生之前触发</td></tr><tr><td align="left"><code>htmx:beforeProcessNode</code></td><td>在 htmx 初始化节点之前触发</td></tr><tr><td align="left"><code>htmx:beforeRequest</code></td><td>在发出 AJAX 请求之前触发</td></tr><tr><td align="left"><code>htmx:beforeSwap</code></td><td>在交换完成之前触发，允许您配置交换</td></tr><tr><td align="left"><code>htmx:beforeSend</code></td><td>在发送 ajax 请求之前触发</td></tr><tr><td align="left"><code>htmx:configRequest</code></td><td>在请求之前触发，允许您自定义参数、标头</td></tr><tr><td align="left"><code>htmx:confirm</code></td><td>在元素上发生触发器后触发<br> <em>允许您取消(或延迟)发出 AJAX 请求</em></td></tr><tr><td align="left"><code>htmx:historyCacheError</code></td><td>在缓存写入期间因错误而触发</td></tr><tr><td align="left"><code>htmx:historyCacheMiss</code></td><td>在历史子系统中的缓存未命中时触发</td></tr><tr><td align="left"><code>htmx:historyCacheMissError</code></td><td>远程检索不成功时触发</td></tr><tr><td align="left"><code>htmx:historyCacheMissLoad</code></td><td>在成功的远程检索时触发</td></tr><tr><td align="left"><code>htmx:historyRestore</code></td><td>当 htmx 处理历史恢复操作时触发</td></tr><tr><td align="left"><code>htmx:beforeHistorySave</code></td><td>在内容保存到历史缓存之前触发</td></tr><tr><td align="left"><code>htmx:load</code></td><td>当新内容添加到 DOM 时触发</td></tr><tr><td align="left"><code>htmx:noSSESourceError</code></td><td>当元素在其触发器中引用 SSE 事件<br> <em>但未定义父 SSE 源时触发</em></td></tr><tr><td align="left"><code>htmx:onLoadError</code></td><td>htmx中onLoad处理异常时触发</td></tr><tr><td align="left"><code>htmx:oobAfterSwap</code></td><td>在交换了一个带元素之后触发</td></tr><tr><td align="left"><code>htmx:oobBeforeSwap</code></td><td>在带外元素交换完成之前触发，允许您配置交换</td></tr><tr><td align="left"><code>htmx:oobErrorNoTarget</code></td><td>当带外元素在当前 DOM 中没有匹配的 ID 时触发</td></tr><tr><td align="left"><code>htmx:prompt</code></td><td>显示提示后触发</td></tr><tr><td align="left"><code>htmx:pushedIntoHistory</code></td><td>在 url 被推送到历史记录后触发</td></tr><tr><td align="left"><code>htmx:responseError</code></td><td>当发生 HTTP 响应错误<br> <em>(非 200 或 300 响应代码)时触发</em></td></tr><tr><td align="left"><code>htmx:sendError</code></td><td>当网络错误阻止 HTTP 请求发生时触发</td></tr><tr><td align="left"><code>htmx:sseError</code></td><td>当 SSE 源发生错误时触发</td></tr><tr><td align="left"><code>htmx:swapError</code></td><td>在交换阶段发生错误时触发</td></tr><tr><td align="left"><code>htmx:targetError</code></td><td>指定无效目标时触发</td></tr><tr><td align="left"><code>htmx:timeout</code></td><td>发生请求超时时触发</td></tr><tr><td align="left"><code>htmx:validation:validate</code></td><td>在验证元素之前触发</td></tr><tr><td align="left"><code>htmx:validation:failed</code></td><td>当元素验证失败时触发</td></tr><tr><td align="left"><code>htmx:validation:halted</code></td><td>当请求由于验证错误而停止时触发</td></tr><tr><td align="left"><code>htmx:xhr:abort</code></td><td>当 <code>ajax</code> 请求中止时触发</td></tr><tr><td align="left"><code>htmx:xhr:loadend</code></td><td><code>ajax</code> 请求结束时触发</td></tr><tr><td align="left"><code>htmx:xhr:loadstart</code></td><td><code>ajax</code> 请求开始时触发</td></tr><tr><td align="left"><code>htmx:xhr:progress</code></td><td>在支持进度事件的 <code>ajax</code> 请求期间定期触发</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="javascript-api-参考"><a aria-hidden="true" tabindex="-1" href="#javascript-api-参考"><span class="icon icon-link"></span></a>JavaScript API 参考</h3><div class="wrap-body">
<table><thead><tr><th align="left">方法</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>htmx.addClass()</code></td><td>向给定元素添加一个类</td></tr><tr><td align="left"><code>htmx.ajax()</code></td><td>发出一个 htmx 风格的 ajax 请求</td></tr><tr><td align="left"><code>htmx.closest()</code></td><td>找到与选择器匹配的给定元素的最近父级</td></tr><tr><td align="left"><code>htmx.config</code></td><td>保存当前 htmx 配置对象的属性</td></tr><tr><td align="left"><code>htmx.createEventSource</code></td><td>包含为 htmx 创建 SSE EventSource 对象的函数的属性</td></tr><tr><td align="left"><code>htmx.createWebSocket</code></td><td>包含为 htmx 创建 WebSocket 对象的函数的属性</td></tr><tr><td align="left"><code>htmx.defineExtension()</code></td><td>定义一个 htmx 扩展</td></tr><tr><td align="left"><code>htmx.find()</code></td><td>查找与选择器匹配的单个元素</td></tr><tr><td align="left"><code>htmx.findAll()</code> | <code>htmx.findAll(elt, selector)</code></td><td>查找与给定选择器匹配的所有元素</td></tr><tr><td align="left"><code>htmx.logAll()</code></td><td>安装将记录所有 htmx 事件的记录器</td></tr><tr><td align="left"><code>htmx.logger</code></td><td>设置为当前记录器的属性（默认为空）</td></tr><tr><td align="left"><code>htmx.off()</code></td><td>从给定元素中删除事件侦听器</td></tr><tr><td align="left"><code>htmx.on()</code></td><td>在给定元素上创建事件侦听器，并返回它</td></tr><tr><td align="left"><code>htmx.onLoad()</code></td><td>为 htmx:load 事件添加回调处理程序</td></tr><tr><td align="left"><code>htmx.parseInterval()</code></td><td>将间隔声明解析为毫秒值</td></tr><tr><td align="left"><code>htmx.process()</code></td><td>处理给定元素及其子元素，连接任何 htmx 行为</td></tr><tr><td align="left"><code>htmx.remove()</code></td><td>删除给定的元素</td></tr><tr><td align="left"><code>htmx.removeClass()</code></td><td>从给定元素中删除一个类</td></tr><tr><td align="left"><code>htmx.removeExtension()</code></td><td>删除一个 htmx 扩展</td></tr><tr><td align="left"><code>htmx.takeClass()</code></td><td>从给定元素的其他元素中获取一个类</td></tr><tr><td align="left"><code>htmx.toggleClass()</code></td><td>从给定元素切换一个类</td></tr><tr><td align="left"><code>htmx.trigger()</code></td><td>在元素上触发事件</td></tr><tr><td align="left"><code>htmx.values()</code></td><td>返回与给定元素关联的输入值</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="请求标头参考"><a aria-hidden="true" tabindex="-1" href="#请求标头参考"><span class="icon icon-link"></span></a>请求标头参考</h3><div class="wrap-body">
<table><thead><tr><th align="left">标头</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>HX-Boosted</code></td><td>表示请求是通过使用 <code>hx-boost</code> 的元素发出的</td></tr><tr><td align="left"><code>HX-Current-URL</code></td><td>浏览器的当前 <code>URL</code></td></tr><tr><td align="left"><code>HX-History-Restore-Request</code></td><td>如果请求是在本地历史缓存未命中后进行历史恢复，则为 <code>true</code></td></tr><tr><td align="left"><code>HX-Prompt</code></td><td>用户对 <code>hx</code> 提示的响应</td></tr><tr><td align="left"><code>HX-Request</code></td><td>总是 <code>true</code></td></tr><tr><td align="left"><code>HX-Target</code></td><td>目标元素的 id(如果存在)</td></tr><tr><td align="left"><code>HX-Trigger-Name</code></td><td>触发元素的名称(如果存在)</td></tr><tr><td align="left"><code>HX-Trigger</code></td><td>触发元素的 id(如果存在)</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="响应标头参考"><a aria-hidden="true" tabindex="-1" href="#响应标头参考"><span class="icon icon-link"></span></a>响应标头参考</h3><div class="wrap-body">
<table><thead><tr><th align="left">标头</th><th>说明</th></tr></thead><tbody><tr><td align="left"><a href="https://htmx.org/headers/hx-location"><code>HX-Location</code></a></td><td>允许您执行不执行整页重新加载的客户端重定向</td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-push-url"><code>HX-Push-Url</code></a></td><td>将一个新的 <code>url</code> 推入历史堆栈</td></tr><tr><td align="left"><code>HX-Redirect</code></td><td>可用于将客户端重定向到新位置</td></tr><tr><td align="left"><code>HX-Refresh</code></td><td>如果设置为 <code>true</code>，客户端将完全刷新页面</td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-replace-url"><code>HX-Replace-Url</code></a></td><td>替换地址栏中的当前 <code>URL</code></td></tr><tr><td align="left"><code>HX-Reswap</code></td><td>允许您指定如何交换响应<br> <em>有关可能的值，请参阅 <a href="https://htmx.org/attributes/hx-swap"><code>hx-swap</code></a></em></td></tr><tr><td align="left"><code>HX-Retarget</code></td><td>将内容更新的目标更新为页面上不同元素的 CSS 选择器</td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-trigger"><code>HX-Trigger</code></a></td><td>允许您触发客户端事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-trigger"><code>HX-Trigger-After-Settle</code></a></td><td>允许您触发客户端事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-trigger"><code>HX-Trigger-After-Swap</code></a></td><td>允许您触发客户端事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr></tbody></table>
</div></div></div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang.</footer></footer><script src="../data.js" defer></script><script src="../js/fuse.min.js" defer></script><script src="../js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
Reference in New Issue View Git Blame Copy Permalink