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 在运行时使用的配置。

请注意，使用 元标记 是设置这些属性的首选机制。

#属性
#示例
  // 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 内容的交换（和结算）

#参数
#示例
    // 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"));