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>

4. 典型生态项目

4.1 jQuery

jQuery UI 是基于 jQuery 构建的，因此 jQuery 是它的核心依赖。jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

4.2 jQuery Mobile

jQuery Mobile 是一个基于 jQuery 的移动端 UI 框架，提供了丰富的移动端组件和主题，适用于构建跨平台的移动应用程序。

4.3 Bootstrap

Bootstrap 是一个流行的前端框架，提供了丰富的 CSS 和 JavaScript 组件。虽然 Bootstrap 本身不依赖 jQuery UI，但你可以结合使用它们来增强你的项目。

通过以上教程，你应该能够快速上手 jQuery UI，并将其应用到你的项目中。

jquery-ui

项目地址：https://gitcode.com/gh_mirrors/jq/jquery-ui

登录后查看全文