htmx.js是一款使用 HTML 属性而不是编写 JavaScript 以声明方式访问现代客户端的全部功能插件-BFW插件库

htmx.js是一款使用 HTML 属性而不是编写 JavaScript 以声明方式访问现代客户端的全部功能插件

htmx.js是一款使用 HTML 属性而不是编写 JavaScript 以声明方式访问现代客户端的全部功能插件。

htmx 让您可以使用属性直接在 HTML 中访问 AJAX、CSS 转换、 WebSockets和服务器发送事件，因此您可以使用超文本的简单性和强大功能构建现代用户界面。

谁白了就是不用写js了，直接在dom元素的属性中拓展了一套处理ajax css websocket等js对象的方法属性，先看入门教程。

入门教程

 <script src="https://unpkg.com/htmx.org@1.8.0"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

解释一下：这个按钮上的hx-postandhx-swap属性告诉 htmx：

“当用户单击此按钮时，向 /clicked 发出 AJAX 请求，并将整个按钮替换为 HTML 响应”

htmx属性大全

属性	描述
`hx-boost`	逐步增强锚点和表单以使用 AJAX 请求
`hx-confirm`	在发出请求之前显示一个 confim() 对话框
`hx-delete`	`DELETE` 向指定的 URL 发出 a
`hx-disable`	禁用给定节点和任何子节点的 htmx 处理
`hx-disinherit`	控制和禁用子节点的自动属性继承
`hx-encoding`	更改请求编码类型
`hx-ext`	用于此元素的扩展
`hx-get`	`GET` 向指定的 URL 发出 a
`hx-headers`	添加到将与请求一起提交的标头
`hx-history-elt`	在历史导航期间快照和恢复的元素
`hx-include`	在 AJAX 请求中包含附加数据
`hx-indicator`	`htmx-request` 在 AJAX 请求期间放置类的元素
`hx-params`	过滤将与请求一起提交的参数
`hx-patch`	`PATCH` 向指定的 URL 发出 a
`hx-post`	`POST` 向指定的 URL 发出 a
`hx-preserve`	在请求之间保留一个元素
`hx-prompt`	在提交请求之前显示提示
`hx-push-url`	将 URL 推送到地址栏，创建一个新的历史条目
`hx-put`	`PUT` 向指定的 URL 发出 a
`hx-replace-url`	替换地址栏中的 URL
`hx-request`	配置请求的各个方面
`hx-select`	选择要处理的服务器响应的子集
`hx-select-oob`	从服务器响应中选择一个或多个元素以通过带外交换进行交换
`hx-sse`	已移至分机。旧版本的文档
`hx-swap`	控制响应内容如何交换到 DOM（例如“outerHTML”或“beforeEnd”）
`hx-swap-oob`	将响应中的内容标记为“带外”，即在目标以外的地方交换
`hx-sync`	不同元素发出的控制请求相互同步
`hx-target`	指定要交换的目标元素
`hx-trigger`	指定触发请求的事件
`hx-vals`	将 JSON 格式的值添加到将与请求一起提交的参数中
`hx-vars`	将计算值添加到将与请求一起提交的参数（已弃用）
`hx-ws`	已移至分机。旧版本的文档

CSS 类参考

班级	描述
`htmx-indicator`	`htmx-request` 一个动态生成的类，当类存在时将切换可见（不透明度：1）
`htmx-request`	`hx-indicator` 在请求正在进行时应用于元素或指定的元素
`htmx-added`	在交换之前应用于新内容，在解决后将其删除。
`htmx-settling`	在内容交换后应用于目标，在其解决后移除。持续时间可以通过修改 `hx-swap` 。
`htmx-swapping`	在交换任何内容之前应用于目标，在交换后移除。持续时间可以通过修改 `hx-swap` 。

HTTP 标头参考请求标头参考

标题	描述
`HX-Boosted`	表示请求是通过使用 hx-boost的元素进行的
`HX-Current-URL`	浏览器的当前 URL
`HX-History-Restore-Request`	`true` 如果请求是在本地历史缓存中未命中后进行历史恢复
`HX-Prompt`	用户对 hx 提示的响应
`HX-Request`	总是 `true`
`HX-Target`	目标元素的the `id` （如果存在）
`HX-Trigger-Name`	被 `name` 触发元素的 the （如果存在）
`HX-Trigger`	被 `id` 触发元素的 the （如果存在）

标题	描述
`HX-Boosted`	表示请求是通过使用 hx-boost的元素进行的
`HX-Current-URL`	浏览器的当前 URL
`HX-History-Restore-Request`	`true` 如果请求是在本地历史缓存中未命中后进行历史恢复
`HX-Prompt`	用户对 hx 提示的响应
`HX-Request`	总是 `true`
`HX-Target`	目标元素的the `id` （如果存在）
`HX-Trigger-Name`	被 `name` 触发元素的 the （如果存在）
`HX-Trigger`	被 `id` 触发元素的 the （如果存在）

响应标头参考

标题	描述
`HX-Push-Url`	将新的 url 推入历史堆栈
`HX-Replace-Url`	替换地址栏中的当前 URL
`HX-Redirect`	可用于将客户端重定向到新位置
`HX-Location`	允许您执行不执行完整页面重新加载的客户端重定向
`HX-Refresh`	如果设置为“true”，客户端将完全刷新页面
`HX-Retarget`	将内容更新的目标更新为页面上不同元素的 CSS 选择器
`HX-Reswap`	允许您指定如何交换响应。有关可能的值，请参见 hx-swap
`HX-Trigger`	允许您触发客户端事件，请参阅文档了解更多信息
`HX-Trigger-After-Settle`	允许您触发客户端事件，请参阅文档了解更多信息
`HX-Trigger-After-Swap`	允许您触发客户端事件，请参阅文档了解更多信息

事件参考

事件	描述
`htmx:abort`	将此事件发送到元素以中止请求
`htmx:afterOnLoad`	在 AJAX 请求完成处理成功响应后触发
`htmx:afterProcessNode`	在 htmx 初始化节点后触发
`htmx:afterRequest`	AJAX 请求完成后触发
`htmx:afterSettle`	在 DOM 稳定后触发
`htmx:afterSwap`	换入新内容后触发
`htmx:beforeOnLoad`	在任何响应处理发生之前触发
`htmx:beforeProcessNode`	在 htmx 初始化节点之前触发
`htmx:beforeRequest`	在发出 AJAX 请求之前触发
`htmx:beforeSwap`	在交换完成之前触发，允许您配置交换
`htmx:beforeSend`	在发送 ajax 请求之前触发
`htmx:configRequest`	在请求之前触发，允许您自定义参数、标头
`htmx:historyCacheError`	在缓存写入期间因错误触发
`htmx:historyCacheMiss`	在历史子系统中的缓存未命中时触发
`htmx:historyCacheMissError`	远程检索不成功时触发
`htmx:historyCacheMissLoad`	在成功的远程检索时触发
`htmx:historyRestore`	当 htmx 处理历史恢复操作时触发
`htmx:beforeHistorySave`	在内容保存到历史缓存之前触发
`htmx:load`	当新内容添加到 DOM 时触发
`htmx:noSSESourceError`	当元素在其触发器中引用 SSE 事件但未定义父 SSE 源时触发
`htmx:onLoadError`	在 htmx 中的 onLoad 处理过程中发生异常时触发
`htmx:oobAfterSwap`	在一个带元素被交换后触发
`htmx:oobBeforeSwap`	在带外元素交换完成之前触发，允许您配置交换
`htmx:oobErrorNoTarget`	当带外元素在当前 DOM 中没有匹配的 ID 时触发
`htmx:prompt`	显示提示后触发
`htmx:pushedIntoHistory`	将 url 推送到历史记录后触发
`htmx:responseError`	`200` 发生 HTTP 响应错误（非或 `300` 响应代码）时触发
`htmx:sendError`	当网络错误阻止 HTTP 请求发生时触发
`htmx:sseError`	当 SSE 源发生错误时触发
`htmx:swapError`	在交换阶段发生错误时触发
`htmx:targetError`	指定无效目标时触发
`htmx:timeout`	发生请求超时时触发
`htmx:validation:validate`	在验证元素之前触发
`htmx:validation:failed`	当元素验证失败时触发
`htmx:validation:halted`	当请求因验证错误而暂停时触发
`htmx:xhr:abort`	当 ajax 请求中止时触发
`htmx:xhr:loadend`	ajax 请求结束时触发
`htmx:xhr:loadstart`	ajax 请求开始时触发
`htmx:xhr:progress`	在支持进度事件的 ajax 请求期间定期触发

JS API 参考

方法	描述
`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.takeClass()`	从给定元素的其他元素中获取一个类
`htmx.toggleClass()`	从给定元素切换类
`htmx.trigger()`	在元素上触发事件
`htmx.values()`	返回与给定元素关联的输入值