news 2026/2/19 9:11:04

jQuery UI API 类别 - 方法(Methods)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery UI API 类别 - 方法(Methods)

jQuery UI API 类别 - 方法(Methods)

Methods是 jQuery UI API 文档中一个汇总类别,它列出了所有小部件(Widgets)共有的通用方法。由于 jQuery UI 的所有小部件都基于Widget Factory(部件工厂)构建,因此它们继承了一套完全统一的公共方法。这些方法在每个小部件的 API 文档中都会出现(例如 Datepicker、Dialog、Tabs 等)。

官方文档地址:https://api.jqueryui.com/category/methods/(适用于最新版本 1.14.1)

通用方法列表(所有小部件均支持)
方法描述用法示例
destroy()完全销毁小部件,移除所有添加的类、事件绑定、DOM 修改,恢复原始元素。$("#datepicker").datepicker("destroy");
disable()禁用小部件(交互无效,通常添加ui-state-disabled类)。$("#button").button("disable");
enable()启用小部件(恢复交互)。$("#button").button("enable");
instance()返回小部件的实例对象(存储在元素 data 中的对象)。var inst = $("#dialog").dialog("instance");
option()获取或设置小部件的选项。
- 无参数:返回所有选项对象。
- 一个参数:获取指定选项值。
- 两个/多个参数:设置选项。
$("#slider").slider("option", "value", 50);
var val = $("#slider").slider("option", "value");
widget()返回小部件生成的最外层元素(通常是原元素或包装器)。var elem = $("#tabs").tabs("widget");
详细说明与示例
  1. option()– 最常用方法

    // 设置单个选项$("#datepicker").datepicker("option","dateFormat","dd/mm/yy");// 设置多个选项$("#datepicker").datepicker("option",{changeMonth:true,changeYear:true,yearRange:"1900:2030"});// 获取选项值varformat=$("#datepicker").datepicker("option","dateFormat");// 获取所有选项(对象)varoptions=$("#datepicker").datepicker("option");
  2. destroy()

    • 彻底清理小部件,常用于动态移除组件。
    $("#myDialog").dialog("destroy");// 移除所有 dialog 添加的 DOM 和事件
  3. widget()

    • 返回小部件实际操作的 DOM 元素(有些小部件会在原元素外包裹一层)。
    var$widget=$("#tabs").tabs("widget");// 返回包含 ul 和 panels 的外层 div
  4. instance()(高级用法)

    • 直接访问内部实例对象,可操作私有属性/方法(不推荐日常使用)。
    vardialogInstance=$("#myDialog").dialog("instance");console.log(dialogInstance.uuid);// 内部唯一 ID
为什么这些方法是“通用”的?

因为 Widget Factory 为所有小部件提供了统一的生命周期和状态管理:

  • 选项变更时自动调用_setOption()
  • 销毁时自动调用_destroy()
  • 禁用/启用有标准处理逻辑。

因此,无论你是用 Datepicker、Accordion、Slider 还是自定义小部件,这些方法的行为都完全一致。

小贴士

  • 这些通用方法之外,每个小部件还有自己的专属方法(如open()close()value()等),在各自的 API 页面中列出。
  • 在自定义小部件时,你可以重写这些通用方法的行为(例如重写_setOption来响应特定选项变化)。

如果您想了解某个小部件(如 Dialog 或 Tabs)的专属方法列表,或这些通用方法在实际项目中的高级用法,欢迎继续提问!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/18 15:01:38

华为网络设备基本配置命令

1、恢复出出厂设置<Huawei>reset saved-configuration This will delete the configuration in the flash memory.The device configuratio ns will be erased to reconfigure.Are you sure? (y/n)[n]:yClear the configuration in the device successfully. <Huawe…

作者头像 李华
网站建设 2026/2/16 9:37:00

志同道合交友网站毕业论文+PPT(附源代码+演示视频)

文章目录志同道合交友网站一、项目简介&#xff08;源代码在文末&#xff09;1.运行视频2.&#x1f680; 项目技术栈3.✅ 环境要求说明4.包含的文件列表&#xff08;含论文&#xff09;数据库结构与测试用例系统功能结构后台运行截图项目部署源码下载志同道合交友网站 如需其他…

作者头像 李华
网站建设 2026/2/16 2:11:03

【Java 25 LTS六大核心特性】

Java 25 LTS 深度拆解&#xff1a;改变开发范式的六大核心特性 基本类型模式匹配&#xff08;JEP 507&#xff09; 模式匹配简化了类型检查和转换&#xff0c;减少冗余代码。例如&#xff1a; if (obj instanceof String s) { System.out.println(s.toLowerCase()); } 基…

作者头像 李华
网站建设 2026/2/15 22:40:58

Langchain-Chatchat助力医疗文档智能检索与问答

Langchain-Chatchat助力医疗文档智能检索与问答 在一家三甲医院的早交班会议上&#xff0c;一位年轻医生急切地翻找《KDIGO慢性肾病临床实践指南》第47页的内容——关于三期患者使用ACEI类药物的禁忌证。他花了七分钟才从PDF目录中定位到相关章节。而就在同一时刻&#xff0c;…

作者头像 李华
网站建设 2026/2/17 2:13:36

Langchain-Chatchat如何实现文档相似度比对?查重与去重依据

Langchain-Chatchat 如何实现文档相似度比对&#xff1f;查重与去重依据 在企业知识库日益膨胀的今天&#xff0c;一个看似简单却影响深远的问题浮出水面&#xff1a;为什么我上传了十份几乎一模一样的项目报告&#xff0c;系统还在一遍遍地索引、存储、检索&#xff1f; 这不仅…

作者头像 李华
网站建设 2026/2/18 0:20:37

java学习--String和StringBuffer互转

在 Java 中&#xff0c;String 是不可变字符串&#xff0c;StringBuffer 是可变字符串&#xff08;线程安全&#xff09;&#xff0c;两者的相互转换是开发中常见操作&#xff0c;以下是具体实现方式、示例及注意事项&#xff1a;一、String 转 StringBuffer有两种核心方式&…

作者头像 李华