jQuery UI 教程
jQuery UI 是基于 jQuery JavaScript 库构建的一套用户界面交互、特效、小部件（Widgets）和主题工具库。它可以帮助你快速创建高度交互的 Web 应用程序，比如添加日期选择器、对话框、拖拽排序等功能，而无需从零编写复杂代码。
注意：jQuery UI 的最后稳定版本是 1.13.x（2022 年左右），目前处于维护模式（maintenance-only），不再添加新功能。官方推荐在新项目中使用现代框架（如 React、Vue），但对于遗留项目或简单增强，它仍然非常有用。
推荐学习资源（中文优先）
- 菜鸟教程（runooob.com） – 最推荐的中文教程
内容全面、实例丰富、代码可在线运行。
- 主页：https://www.runoob.com/jqueryui/jqueryui-tutorial.html
包括：简介、下载、使用、定制、工作原理、API 文档和大量实例（如拖拽、日期选择器、标签页等）。
- w3cschool 中文版
详细解释了所有组件，适合初学者。
- https://www.w3cschool.cn/jqueryui/
- 官方英文站点（带演示和 API）
- 主页：https://jqueryui.com/
- 演示和下载：https://jqueryui.com/demos/
- API 文档：https://api.jqueryui.com/
快速入门：基本使用步骤
- 引入文件（推荐使用 CDN，避免本地下载）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 示例</title>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
<!-- jQuery 核心（必须先引入） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQuery UI JS -->
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>
</head>
<body>
<!-- 你的内容 -->
</body>
</html>- 常见小部件示例：日期选择器（Datepicker）
<input type="text" id="datepicker">
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd", // 日期格式
changeMonth: true, // 可选月份
changeYear: true // 可选年份
});
});
</script>这会将输入框变成一个可点击的日历选择器。
- 标签页（Tabs）示例：
<div id="tabs">
<ul>
<li><a href="#tab1">标签1</a></li>
<li><a href="#tab2">标签2</a></li>
</ul>
<div id="tab1">内容1</div>
<div id="tab2">内容2</div>
</div>
<script>
$(function() {
$("#tabs").tabs();
});
</script>- 其他热门组件：
- Accordion（折叠面板）：用于可折叠的内容区。
- Dialog（对话框）：弹出模态窗口。
- Draggable & Droppable：拖拽和放置。
- Autocomplete：输入自动完成。
- Slider & Progressbar：滑块和进度条。
学习建议
- 从菜鸟教程的实例开始，一个一个组件练习。
- 使用 ThemeRoller 自定义主题：https://jqueryui.com/themeroller/
- 如果需要中文 API 参考，可以搜索 “jQuery UI 中文手册”。
如果您有特定组件的问题（如 Datepicker 的中文本地化），或者想看某个示例的完整代码，请告诉我，我可以提供更多细节！
