參考資料

#目錄

#核心屬性參考

使用 htmx 時最常見的屬性。

屬性	描述
`hx-get`	對指定的 URL 發出 `GET` 請求
`hx-post`	對指定的 URL 發出 `POST` 請求
`hx-on*`	使用元素的內嵌腳本處理事件
`hx-push-url`	將 URL 推入瀏覽器的位置欄以建立歷史記錄
`hx-select`	從回應中選擇要替換的內容
`hx-select-oob`	從回應中選擇要替換的內容，目標位置在其他地方（帶外）
`hx-swap`	控制內容如何替換 (`outerHTML`、`beforeend`、`afterend`、…)
`hx-swap-oob`	標記要從回應中替換的元素（帶外）
`hx-target`	指定要替換的目標元素
`hx-trigger`	指定觸發請求的事件
`hx-vals`	新增要與請求一起提交的值（JSON 格式）

#附加屬性參考

htmx 中所有其他可用的屬性。

屬性	描述
`hx-boost`	為連結和表單新增漸進式增強
`hx-confirm`	在發出請求之前顯示 `confirm()` 對話方塊
`hx-delete`	對指定的 URL 發出 `DELETE` 請求
`hx-disable`	停用指定節點及其任何子節點的 htmx 處理
`hx-disabled-elt`	在請求進行中時，將 `disabled` 屬性新增至指定的元素
`hx-disinherit`	控制並停用子節點的自動屬性繼承
`hx-encoding`	變更請求的編碼類型
`hx-ext`	此元素要使用的擴充功能
`hx-headers`	新增要與請求一起提交的標頭
`hx-history`	防止敏感資料儲存到歷史快取
`hx-history-elt`	在歷史導覽期間要快照和還原的元素
`hx-include`	在請求中包含其他資料
`hx-indicator`	在請求期間，要將 `htmx-request` 類別套用至的元素
`hx-inherit`	如果預設已停用，則控制並啟用子節點的自動屬性繼承
`hx-params`	篩選將與請求一起提交的參數
`hx-patch`	對指定的 URL 發出 `PATCH` 請求
`hx-preserve`	指定在請求之間保持不變的元素
`hx-prompt`	在提交請求之前顯示 `prompt()`
`hx-put`	對指定的 URL 發出 `PUT` 請求
`hx-replace-url`	取代瀏覽器位置欄中的 URL
`hx-request`	設定請求的各個方面
`hx-sync`	控制不同元素提出的請求如何同步
`hx-validate`	強制元素在請求之前自行驗證
`hx-vars`	動態地將值新增至要與請求一起提交的參數（已棄用，請使用`hx-vals`）

#CSS 類別參考

類別	描述
`htmx-added`	在替換之前套用至新內容，在完成後移除。
`htmx-indicator`	一個動態產生的類別，當存在 `htmx-request` 類別時，會切換為可見 (opacity:1)
`htmx-request`	在請求進行中時，套用至元素或使用`hx-indicator`指定的元素
`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-prompt的回應
`HX-Request`	永遠為「true」
`HX-Target`	如果目標元素存在，則為其 `id`
`HX-Trigger-Name`	如果觸發元素存在，則為其 `name`
`HX-Trigger`	如果觸發元素存在，則為其 `id`

#回應標頭參考

標頭	描述
`HX-Location`	允許您進行不會重新載入整個頁面的用戶端重新導向
`HX-Push-Url`	將新的 URL 推入歷史堆疊
`HX-Redirect`	可用於將用戶端重新導向至新的位置
`HX-Refresh`	如果設定為「true」，用戶端將會完整重新整理頁面
`HX-Replace-Url`	取代位置欄中的目前 URL
`HX-Reswap`	允許您指定如何替換回應。如需可能的值，請參閱hx-swap
`HX-Retarget`	一個 CSS 選擇器，將內容更新的目標更新為頁面上的不同元素
`HX-Reselect`	一個 CSS 選擇器，允許您選擇要用於替換的回應部分。覆寫觸發元素上現有的 `hx-select`
`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:beforeCleanupElement`	在 htmx 停用元素或從 DOM 中移除元素之前觸發
`htmx:beforeOnLoad`	在發生任何回應處理之前觸發
`htmx:beforeProcessNode`	在 htmx 初始化節點之前觸發
`htmx:beforeRequest`	在發出 AJAX 請求之前觸發
`htmx:beforeSwap`	在執行替換之前觸發，允許您設定替換
`htmx:beforeSend`	在傳送 ajax 請求之前觸發
`htmx:beforeTransition`	在發生檢視轉換包裝替換之前觸發
`htmx:configRequest`	在請求之前觸發，允許您自訂參數、標頭
`htmx:confirm`	在元素上發生觸發後觸發，允許您取消 (或延遲) 發出 AJAX 請求
`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`	當發生 HTTP 回應錯誤（非 `200` 或 `300` 回應代碼）時觸發
`htmx:sendError`	當網路錯誤阻止 HTTP 請求發生時觸發
`htmx:sseError`	當 SSE 來源發生錯誤時觸發
`htmx:sseOpen`	當開啟 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 請求期間定期觸發

#JavaScript 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.swap()`	執行 HTML 內容的交換（和安置）
`htmx.takeClass()`	從其他元素取得一個類別給給定的元素
`htmx.toggleClass()`	切換給定元素的一個類別
`htmx.trigger()`	在元素上觸發一個事件
`htmx.values()`	返回與給定元素相關聯的輸入值

#組態參考

Htmx 有一些組態選項可以透過程式或宣告方式存取。它們列在下面

組態變數	資訊
`htmx.config.historyEnabled`	預設為 `true`，實際上只對測試有用
`htmx.config.historyCacheSize`	預設為 10
`htmx.config.refreshOnHistoryMiss`	預設為 `false`，如果設定為 `true`，htmx 將在歷史記錄遺失時發出完整頁面重新整理，而不是使用 AJAX 請求
`htmx.config.defaultSwapStyle`	預設為 `innerHTML`
`htmx.config.defaultSwapDelay`	預設為 0
`htmx.config.defaultSettleDelay`	預設為 20
`htmx.config.includeIndicatorStyles`	預設為 `true`（決定是否載入指示器樣式）
`htmx.config.indicatorClass`	預設為 `htmx-indicator`
`htmx.config.requestClass`	預設為 `htmx-request`
`htmx.config.addedClass`	預設為 `htmx-added`
`htmx.config.settlingClass`	預設為 `htmx-settling`
`htmx.config.swappingClass`	預設為 `htmx-swapping`
`htmx.config.allowEval`	預設為 `true`，可用於禁用 htmx 對某些功能使用 eval（例如，觸發器篩選器）
`htmx.config.allowScriptTags`	預設為 `true`，決定 htmx 是否會處理新內容中找到的 script 標籤
`htmx.config.inlineScriptNonce`	預設為 `''`，表示不會將 nonce 新增至內嵌腳本
`htmx.config.inlineStyleNonce`	預設為 `''`，表示不會將 nonce 新增至內嵌樣式
`htmx.config.attributesToSettle`	預設為 `["class", "style", "width", "height"]`，安置階段要安置的屬性
`htmx.config.wsReconnectDelay`	預設為 `full-jitter`
`htmx.config.wsBinaryType`	預設為 `blob`，透過 WebSocket 連線接收的二進位資料類型
`htmx.config.disableSelector`	預設為 `[hx-disable], [data-hx-disable]`，htmx 將不會處理具有此屬性或父元素的元素
`htmx.config.withCredentials`	預設為 `false`，允許使用憑證（例如 Cookie、授權標頭或 TLS 用戶端憑證）的跨站點 Access-Control 請求
`htmx.config.timeout`	預設為 0，請求在自動終止之前可以持續的毫秒數
`htmx.config.scrollBehavior`	預設為 ‘instant’，使用 `hx-swap` 的 show 修飾符時的滾動行為。允許的值為 `instant`（滾動應立即發生在單次跳躍中）、`smooth`（滾動應平滑動畫）和 `auto`（滾動行為由 scroll-behavior 的計算值決定）。
`htmx.config.defaultFocusScroll`	如果應將焦點元素滾動到可見位置，則預設為 false，可以使用 focus-scroll 交換修飾符覆寫。
`htmx.config.getCacheBusterParam`	預設為 false，如果設定為 true，htmx 會以 `org.htmx.cache-buster=targetElementId` 的格式將目標元素附加到 `GET` 請求
`htmx.config.globalViewTransitions`	如果設定為 `true`，htmx 會在交換新內容時使用 View Transition API。
`htmx.config.methodsThatUseUrlParams`	預設為 `["get", "delete"]`，htmx 會透過將參數編碼在 URL 中而非請求主體中，格式化具有這些方法的請求
`htmx.config.selfRequestsOnly`	預設為 `true`，是否僅允許 AJAX 請求與目前文件相同的網域
`htmx.config.ignoreTitle`	預設為 `false`，如果設定為 `true`，當在新內容中找到 `title` 標籤時，htmx 將不會更新文件的標題
`htmx.config.scrollIntoViewOnBoost`	預設為 `true`，是否將增強元素的目標滾動到可視區中。如果增強元素省略了 `hx-target`，則目標預設為 `body`，導致頁面滾動到頂部。
`htmx.config.triggerSpecsCache`	預設為 `null`，將評估的觸發器規格儲存到其中的快取，在犧牲更多記憶體使用量的情況下提高解析效能。您可以定義一個簡單的物件來使用永不清空的快取，或使用 proxy object 實作您自己的系統
`htmx.config.responseHandling`	可以在此處設定回應狀態碼的預設回應處理行為，以交換或錯誤
`htmx.config.allowNestedOobSwaps`	預設為 `true`，是否處理主要回應元素中巢狀元素的 OOB 交換。請參閱巢狀 OOB 交換。

您可以直接在 javascript 中設定它們，也可以使用 meta 標籤

<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>