JavaScript API

虽然这不是该库的重点，但 htmx 确实提供了一小套辅助方法 API，主要用于扩展开发或处理事件。

hyperscript 项目旨在为基于 htmx 的应用程序提供更广泛的脚本支持。

方法 - htmx.addClass()

此方法向给定元素添加一个类。

参数

或

示例
  // 将类 'myClass' 添加到 ID 为 'demo' 的元素
  htmx.addClass(htmx.find('#demo'), 'myClass');

  // 在 1 秒后将类 'myClass' 添加到 ID 为 'demo' 的元素
  htmx.addClass(htmx.find('#demo'), 'myClass', 1000);

方法 - htmx.ajax()

发出 htmx 风格的 AJAX 请求。此方法返回一个 Promise，因此可以在内容插入 DOM 后执行回调。

参数

或

或

示例
    // 向 /example 发出 GET 请求，并将响应 HTML 放入 #myDiv
    htmx.ajax('GET', '/example', '#myDiv')

    // 向 /example 发出 GET 请求，并用响应替换 #myDiv
    htmx.ajax('GET', '/example', {target:'#myDiv', swap:'outerHTML'})

    // 在内容插入 DOM 后执行一些代码
    htmx.ajax('GET', '/example', '#myDiv').then(() => {
      // 此代码将在 'htmx:afterOnLoad' 事件之后执行，
      // 并且在 'htmx:xhr:loadend' 事件之前执行
      console.log('内容插入成功！');
    });

方法 - htmx.closest()

在给定元素的父级中查找最近的匹配元素，包括该元素本身

参数
示例
  // 查找 ID 为 'demo' 元素的最近的包围 div
  htmx.closest(htmx.find('#demo'), 'div');

属性 - htmx.config

一个保存 htmx 在运行时使用的配置的属性。

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

属性
示例
  // 将历史缓存大小更新为 30
  htmx.config.historyCacheSize = 30;

属性 - htmx.createEventSource

一个用于创建新的 Server Sent Event 源的属性。此属性可以更新以提供自定义 SSE 设置。

值
示例
  // 覆盖 SSE 事件源以不使用凭据
  htmx.createEventSource = function(url) {
    return new EventSource(url, {withCredentials:false});
  };

属性 - htmx.createWebSocket

一个用于创建新的 WebSocket 的属性。此属性可以更新以提供自定义 WebSocket 设置。

值
示例
  // 覆盖 WebSocket 以使用特定协议
  htmx.createWebSocket = function(url) {
    return new WebSocket(url, ['wss']);
  };

方法 - htmx.defineExtension()

定义一个新的 htmx 扩展。

参数
示例
  // 定义一个愚蠢的扩展，它仅记录所有触发事件的名称
  htmx.defineExtension("silly", {
    onEvent : function(name, evt) {
      console.log("Event " + name + " was triggered!")
    }
  });

方法 - htmx.find()

查找匹配选择器的元素

参数

或

示例
    // 查找 ID 为 my-div 的 div
    var div = htmx.find("#my-div")

    // 在该 div 中查找 ID 为 another-div 的 div
    var anotherDiv = htmx.find(div, "#another-div")

方法 - htmx.findAll()

查找所有匹配选择器的元素

参数

或

示例
    // 查找所有 div
    var allDivs = htmx.findAll("div")

    // 在给定 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()

从元素中移除事件监听器

参数

或

示例
    // 从 body 中移除此点击监听器
    htmx.off("click", myEventListener);

    // 从给定 div 中移除此点击监听器
    htmx.off("#my-div", "click", myEventListener)

方法 - htmx.on()

向元素添加事件监听器

参数

或

示例
    // 向 body 添加点击监听器
    var myEventListener = htmx.on("click", function(evt){ console.log(evt); });

    // 向给定 div 添加点击监听器
    var myEventListener = htmx.on("#my-div", "click", function(evt){ console.log(evt); });

    // 向给定 div 添加仅调用一次的点击监听器
    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

参数
示例
    // 返回 3000
    var milliseconds = htmx.parseInterval("3s");

    // 返回 3 - 注意
    var milliseconds = htmx.parseInterval("3m");

方法 - htmx.process()

处理新内容，启用 htmx 行为。如果您有在正常 htmx 请求周期之外添加到 DOM 的内容，但仍希望 htmx 属性工作，这将很有用。

参数
示例
  document.body.innerHTML = "<div hx-get='/example'>Get it!</div>"
  // 处理新添加的内容
  htmx.process(document.body);

方法 - htmx.remove()

从 DOM 中移除元素

参数

或

示例
  // 从 DOM 中移除 my-div
  htmx.remove(htmx.find("#my-div"));

  // 在 2 秒延迟后从 DOM 中移除 my-div
  htmx.remove(htmx.find("#my-div"), 2000);

方法 - htmx.removeClass()

从给定元素中移除一个类

参数

或

示例
  // 从 my-div 中移除 .myClass
  htmx.removeClass(htmx.find("#my-div"), "myClass");

  // 在 6 秒后从 my-div 中移除 .myClass
  htmx.removeClass(htmx.find("#my-div"), "myClass", 6000);

方法 - htmx.removeExtension()

从 htmx 中移除给定的扩展

参数
示例
  htmx.removeExtension("my-extension");

方法 - htmx.swap()

执行 HTML 内容的交换（和结算）

参数
示例
    // 用带有 "Swapped!" 文本的 div 元素交换 #output 元素的内部 HTML
    htmx.swap("#output", "<div>Swapped!</div>", {swapStyle: 'innerHTML'});

方法 - htmx.takeClass()

从其兄弟元素中获取给定的类，以便在其兄弟元素中，只有给定元素将具有该类。

参数
示例
  // 从 tab2 的兄弟元素中获取 selected 类
  htmx.takeClass(htmx.find("#tab2"), "selected");

方法 - htmx.toggleClass()

在元素上切换给定的类

参数
示例
  // 在 tab2 上切换 selected 类
  htmx.toggleClass(htmx.find("#tab2"), "selected");

方法 - htmx.trigger()

在元素上触发给定事件

参数
示例
  // 在 #tab2 上触发 myEvent 事件，并带有答案 42
  htmx.trigger("#tab2", "myEvent", {answer:42});

方法 - htmx.values()

返回通过 htmx 值解析机制为给定元素解析的输入值

参数
示例
  // 获取与此表单关联的值
  var values = htmx.values(htmx.find("#myForm"));