JavaScript API

虽然这不是库的主要关注点，但htmx提供了一个小型辅助方法API，主要用于扩展开发或处理事件。

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

方法 - htmx.addClass()

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

参数

或

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

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

方法 - htmx.ajax()

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

参数

或

或

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

    // 发起GET请求到/example，替换#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

用于创建新服务器发送事件(SSE)源的属性。可更新以提供自定义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("事件 " + name + " 已触发!")
    }
  });

方法 - 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("信息:", 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'>获取!</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内容的交换（和稳定）

参数
示例
    // 将#output元素的内部HTML与包含"已交换!"文本的div元素交换
    htmx.swap("#output", "<div>已交换!</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上触发带有答案42的myEvent事件
  htmx.trigger("#tab2", "myEvent", {answer:42});

方法 - htmx.values()

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

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