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后执行回调。

#参数

或者

或者

#示例
    // 发出一个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事件源以不使用凭据
  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); });

#方法 - 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内容的交换（和定居）

#参数

是否使用HTML过渡进行交换

#示例
    // 将#output元素的内部HTML与包含"Swapped!"文本的div元素交换
    htmx.swap("#output", "<div>Swapped!</div>", {swapStyle: 'innerHTML'});

#方法 - htmx.takeClass()

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

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

#方法 - htmx.toggleClass()

在元素上切换给定的类

#参数
#示例
  // 在tab2上切换选中的类
  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"));