* 戳上方蓝字“开源先锋”关注我
推荐阅读：
《5.6K star！再见了DocSend，这款开源项目更不错！》
《9.1K star！国外大神1:1复刻Win11系统，开源牛逼！》
《14.5K star！一款开源的工作流编排调度项目，无限可扩展！！》
大家好，我是开源君！
在前端开发的汪洋大海中，我们时常会被各种框架和工具搞得晕头转向。有时候，我们只是想要一个简单的功能，比如点击按钮后加载一些数据，却不得不引入一个庞大的框架，编写大量的JavaScript代码。
今天开源君给大家分享一个让前端开发者大呼过瘾的开源项目 - htmx，不仅简单易用，还能大幅提升HTML开发的效率和灵活性。
项目简介
htmx是由Big Sky Software推出的一个强大的HTML增强工具。它的核心理念是将原本需要大量JavaScript实现的动态交互功能，通过扩展HTML的属性和标签轻松实现。简单来说，htmx就是HTML的超级助力器，让普通的HTML网页焕发出新的生命力。
目前在Github上收获了42.1K star！
性能特色
轻量级：htmx的核心库只有不到14KB，压缩后更是轻巧，这在如今这个“瘦身”为王的时代，简直是一股清流。
无需依赖：htmx不依赖任何其他框架或库，这意味着你可以在任何项目中自由使用它，不用担心兼容性问题。
易于集成：无论你使用的是React、Vue还是其他前端技术栈，htmx都可以轻松集成。
丰富的文档和社区支持：htmx拥有详细的文档和活跃的社区，遇到问题？不怕，有大把的同好在社区里等着你。
快速安装使用
如何快速上手使用htmx呢？首先需要在你的HTML页面中引入htmx的库：
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
然后，你就可以开始使用htmx提供的自定义HTML属性了。比如，你可以用hx-get属性来发起一个GET请求：
<button hx-get="/my-endpoint" hx-target="#my-element">Click me!</button>
这个按钮点击后，会向/my-endpoint发起一个GET请求，并将响应内容更新到#my-element这个元素中。
项目体验展示
让我们来看两个实际的例子：点击编辑（Click to Edit）和批量更新（Bulk Update）。
通过这两个例子展示htmx如何在不刷新页面的情况下，实现动态的内容编辑和批量更新。htmx通过扩展HTML的属性，使得这些复杂的交互变得简单而直观。这就是htmx的魅力所在，它让前端开发变得更加高效和有趣。
1、点击编辑（Click to Edit）
这个示例展示了如何使用htmx将文本转换为可编辑的输入框。以下是实现这个功能的代码：
<!-- 引入htmx -->
<script src="https://unpkg.com/htmx.org"></script>
<!-- 可编辑的元素 -->
<span id="editable-text" hx-get="/api/edit" hx-target="this" hx-swap="outerHTML" style="border: 1px solid #ccc; padding: 5px;">Edit Me</span>
在这个例子中，我们有一个<span>元素，当用户点击它时，会触发一个GET请求到/api/edit。响应返回后，htmx会替换整个<span>元素的内容（hx-swap="outerHTML"），并且更新到页面上。这个过程中，用户不需要离开当前页面，也不需要刷新，就能实现内容的编辑。
2、批量更新（Bulk Update）
这个示例展示了如何使用htmx同时更新页面上的多个元素。以下是实现这个功能的代码：
<!-- 引入htmx -->
<script src="https://unpkg.com/htmx.org"></script>
<!-- 批量更新的按钮 -->
<button hx-post="/api/update-all" hx-target="#all-targets" hx-swap="outerHTML">Update All</button>
<!-- 多个更新目标 -->
<div id="all-targets">
<div hx-get="/api/data1" hx-target="this" hx-swap="outerHTML">Loading...</div>
<div hx-get="/api/data2" hx-target="this" hx-swap="outerHTML">Loading...</div>
<div hx-get="/api/data3" hx-target="this" hx-swap="outerHTML">Loading...</div>
</div>
在这个例子中，我们有一个按钮，当点击这个按钮时，会触发一个POST请求到/api/update-all。这个请求会更新所有在#all-targets下的子元素。每个子元素都通过hx-get属性独立地从服务器获取数据，并更新自己的内容。这样，我们就可以实现批量更新页面上的多个部分，而不需要单独操作每一个元素。
htmx是一个轻量级、易于集成的HTML增强工具，它让我们可以用更少的代码实现更丰富的交互效果。如果你厌倦了复杂的前端框架，或者是想要提升你的HTML页面的交互性，htmx绝对是你的不二之选
更多细节功能，感兴趣的可以到项目地址查看：
项目地址：
https://github.com/bigskysoftware/htmx
