Javascript API

雖然這不是函式庫的重點，htmx 確實提供了一個小型的輔助方法 API，主要用於擴充功能開發或與事件互動。

hyperscript 專案旨在為基於 htmx 的應用程式提供更廣泛的腳本支援。

#方法 - htmx.addClass()

此方法將一個類別新增至給定的元素。

#參數

或者

#範例
  // add the class 'myClass' to the element with the id 'demo'
  htmx.addClass(htmx.find('#demo'), 'myClass');

  // add the class 'myClass' to the element with the id 'demo' after 1 second
  htmx.addClass(htmx.find('#demo'), 'myClass', 1000);

#方法 - htmx.ajax()

發出 htmx 風格的 AJAX 請求。此方法會回傳一個 Promise，因此在內容插入 DOM 後可以執行回呼函數。

#參數

或者

或者

#範例
    // issue a GET to /example and put the response HTML into #myDiv
    htmx.ajax('GET', '/example', '#myDiv')

    // issue a GET to /example and replace #myDiv with the response
    htmx.ajax('GET', '/example', {target:'#myDiv', swap:'outerHTML'})

    // execute some code after the content has been inserted into the DOM
    htmx.ajax('GET', '/example', '#myDiv').then(() => {
      // this code will be executed after the 'htmx:afterOnLoad' event,
      // and before the 'htmx:xhr:loadend' event
      console.log('Content inserted successfully!');
    });

#方法 - htmx.closest()

在給定元素的父系中找到最接近的匹配元素，包含該元素本身

#參數
#範例
  // find the closest enclosing div of the element with the id 'demo'
  htmx.closest(htmx.find('#demo'), 'div');

#屬性 - htmx.config

一個屬性，保存 htmx 在執行時使用的組態。

請注意，使用 meta 標籤是設定這些屬性的首選機制。

#屬性
#範例
  // update the history cache size to 30
  htmx.config.historyCacheSize = 30;

#屬性 - htmx.createEventSource

用於建立新的伺服器發送事件來源的屬性。可以更新此設定以提供自訂 SSE 設定。

#值
#範例
  // override SSE event sources to not use credentials
  htmx.createEventSource = function(url) {
    return new EventSource(url, {withCredentials:false});
  };

#屬性 - htmx.createWebSocket

用於建立新的WebSocket 的屬性。可以更新此設定以提供自訂 WebSocket 設定。

#值
#範例
  // override WebSocket to use a specific protocol
  htmx.createWebSocket = function(url) {
    return new WebSocket(url, ['wss']);
  };

#方法 - htmx.defineExtension()

定義新的 htmx 擴充功能。

#參數
#範例
  // defines a silly extension that just logs the name of all events triggered
  htmx.defineExtension("silly", {
    onEvent : function(name, evt) {
      console.log("Event " + name + " was triggered!")
    }
  });

#方法 - htmx.find()

尋找符合選取器的元素

#參數

或者

#範例
    // find div with id my-div
    var div = htmx.find("#my-div")

    // find div with id another-div within that div
    var anotherDiv = htmx.find(div, "#another-div")

#方法 - htmx.findAll()

尋找所有符合選擇器的元素

#參數

或者

#範例
    // find all divs
    var allDivs = htmx.findAll("div")

    // find all paragraphs within a given div
    var allParagraphsInMyDiv = htmx.findAll(htmx.find("#my-div"), "p")

#方法 - htmx.logAll()

記錄所有 htmx 事件，對於除錯很有用。

#範例
    htmx.logAll();

#方法 - htmx.logNone()

不記錄任何 htmx 事件，如果您先前已啟用除錯器，請呼叫此方法以關閉它。

#範例
    htmx.logNone();

#屬性 - htmx.logger

htmx 用於記錄的記錄器

#值
#範例
    htmx.logger = function(elt, event, data) {
        if(console) {
            console.log("INFO:", event, elt, data);
        }
    }

#方法 - htmx.off()

從元素中移除事件監聽器

#參數

或者

#範例
    // remove this click listener from the body
    htmx.off("click", myEventListener);

    // remove this click listener from the given div
    htmx.off("#my-div", "click", myEventListener)

#方法 - htmx.on()

為元素添加事件監聽器

#參數

或者

#範例
    // add a click listener to the body
    var myEventListener = htmx.on("click", function(evt){ console.log(evt); });

    // add a click listener to the given div
    var myEventListener = htmx.on("#my-div", "click", function(evt){ console.log(evt); });

    // add a click listener to the given div that should only be invoked once
    var myEventListener = htmx.on("#my-div", "click", function(evt){ console.log(evt); }, { once: true });

#方法 - htmx.onLoad()

為 htmx:load 事件添加回呼函式。這可用於處理新內容，例如使用 JavaScript 函式庫初始化內容

#參數
#範例
    htmx.onLoad(function(elt){
        MyLibrary.init(elt);
    })

#方法 - htmx.parseInterval()

解析與 htmx 一致的間隔字串。對於具有與計時相關屬性的外掛程式很有用。

注意：接受一個後面跟著 s 或 ms 的整數。所有其他值都使用 parseFloat

#參數
#範例
    // returns 3000
    var milliseconds = htmx.parseInterval("3s");

    // returns 3 - Caution
    var milliseconds = htmx.parseInterval("3m");

#方法 - htmx.process()

處理新內容，啟用 htmx 行為。如果您有在正常 htmx 請求週期之外新增到 DOM 的內容，但仍希望 htmx 屬性能夠運作，這會很有用。

#參數
#範例
  document.body.innerHTML = "<div hx-get='/example'>Get it!</div>"
  // process the newly added content
  htmx.process(document.body);

#方法 - htmx.remove()

從 DOM 中移除元素

#參數

或者

#範例
  // removes my-div from the DOM
  htmx.remove(htmx.find("#my-div"));

  // removes my-div from the DOM after a delay of 2 seconds
  htmx.remove(htmx.find("#my-div"), 2000);

#方法 - htmx.removeClass()

從給定的元素中移除一個類別

#參數

或者

#範例
  // removes .myClass from my-div
  htmx.removeClass(htmx.find("#my-div"), "myClass");

  // removes .myClass from my-div after 6 seconds
  htmx.removeClass(htmx.find("#my-div"), "myClass", 6000);

#方法 - htmx.removeExtension()

從 htmx 中移除給定的擴充功能

#參數
#範例
  htmx.removeExtension("my-extension");

#方法 - htmx.swap()

執行 HTML 內容的交換（和settle）

#參數
#範例
    // swap #output element inner HTML with div element with "Swapped!" text
    htmx.swap("#output", "<div>Swapped!</div>", {swapStyle: 'innerHTML'});

#方法 - htmx.takeClass()

從其同級元素中取得給定的類別，使其同級元素中只有給定元素具有該類別。

#參數
#範例
  // takes the selected class from tab2's siblings
  htmx.takeClass(htmx.find("#tab2"), "selected");

#方法 - htmx.toggleClass()

在元素上切換給定的類別

#參數
#範例
  // toggles the selected class on tab2
  htmx.toggleClass(htmx.find("#tab2"), "selected");

#方法 - htmx.trigger()

在元素上觸發給定的事件

#參數
#範例
  // triggers the myEvent event on #tab2 with the answer 42
  htmx.trigger("#tab2", "myEvent", {answer:42});

#方法 - htmx.values()

傳回透過 htmx 值解析機制針對給定元素解析的輸入值

#參數
#範例
  // gets the values associated with this form
  var values = htmx.values(htmx.find("#myForm"));