jQuery UI 使用教程

2026-01-22 04:51:12作者：胡易黎Nicole

1. 项目介绍

jQuery UI 是一个基于 jQuery 的用户界面库，提供了丰富的交互效果、小部件和主题。它适用于构建高度交互的 Web 应用程序，或者为表单控件添加简单的日期选择器等功能。jQuery UI 是官方维护的项目，目前处于维护模式，但仍然是一个非常强大和流行的工具。

2. 项目快速启动

2.1 安装

你可以通过多种方式安装 jQuery UI，以下是使用 npm 安装的示例：

npm install jquery-ui

2.2 引入

在你的 HTML 文件中引入 jQuery 和 jQuery UI：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery UI 示例</title>
    <link rel="stylesheet" href="node_modules/jquery-ui/themes/base/all.css">
</head>
<body>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
</body>
</html>

2.3 使用示例

以下是一个简单的日期选择器示例：

<input type="text" id="datepicker">

<script>
    $(function() {
        $("#datepicker").datepicker();
    });
</script>

3. 应用案例和最佳实践

3.1 日期选择器

日期选择器是 jQuery UI 中最常用的组件之一。它可以轻松地为表单添加日期选择功能，提升用户体验。

<input type="text" id="datepicker">

<script>
    $(function() {
        $("#datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            showButtonPanel: true
        });
    });
</script>

3.2 对话框

对话框组件可以用于显示模态窗口，常用于确认操作或显示提示信息。

<div id="dialog" title="基本对话框">
    <p>这是一个基本的对话框示例。</p>
</div>

<script>
    $(function() {
        $("#dialog").dialog();
    });
</script>

3.3 拖放功能

jQuery UI 提供了强大的拖放功能，可以用于创建可拖动的元素或列表。

<ul id="sortable">
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ul>

<script>
    $(function() {
        $("#sortable").sortable();
    });
</script>