首页
/ 正文

jQuery UI 教程（建议收藏）

更新时间: 2025-04-02 23:14:52

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言：为什么选择 jQuery UI？

在网页开发中，用户交互体验是衡量产品成功与否的关键指标之一。对于开发者而言，实现优雅的交互效果通常需要结合 JavaScript 和 CSS 的复杂逻辑。而 jQuery UI 正是为解决这一痛点而生的工具库——它以直观的方式封装了常见的 UI 组件和动画效果，让开发者能够快速构建美观且功能强大的网页界面。

作为 jQuery 的扩展库，jQuery UI 继承了简洁易用的 API 设计，同时提供了丰富的交互组件（如拖放、对话框、选项卡）和视觉效果（如动画过渡、主题定制）。无论是编程初学者还是有一定经验的开发者，都能通过本教程快速掌握其核心功能，并将其应用于实际项目中。

一、环境搭建：让 jQuery UI 就绪

1.1 引入基础库

使用 jQuery UI 需要先引入其依赖项——jQuery 核心库和 jQuery UI 的 JavaScript 文件。此外，主题文件（CSS）用于定义组件的视觉样式。以下是推荐的引入方式：

<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery UI 的 JavaScript -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<!-- 引入默认主题的 CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

1.2 验证环境

在 HTML 文件中添加一个简单的按钮，并通过 jQuery UI 的 button() 方法测试初始化效果：

<button id="test-btn">点击我！</button>

<script>
$(document).ready(function() {
  $("#test-btn").button();
});
</script>

如果按钮外观变为 jQuery UI 的默认风格，则说明环境配置成功。

二、核心组件详解：构建交互的基础

2.1 按钮与图标

按钮是网页中最常见的交互元素。jQuery UI 的按钮组件不仅美化外观，还能快速集成图标和禁用状态：

<!-- HTML 结构 -->
<button id="icon-btn">提交 <span class="ui-icon ui-icon-check"></span></button>

<script>
$(document).ready(function() {
  $("#icon-btn").button()
    .click(function() {
      alert("按钮被点击了！");
    });
});
</script>

知识拓展：

图标系统基于 CSS 的 background-image，通过类名控制显示。例如 ui-icon-check 对应勾选图标。
可通过 disabled 属性禁用按钮，或使用 .button("disable") 方法动态切换状态。

2.2 对话框：弹出式交互

对话框（Dialog）用于展示重要信息或表单。以下示例创建一个确认对话框：

<div id="dialog" title="温馨提示">
  <p>您确认要删除这条记录吗？</p>
</div>

<script>
$(document).ready(function() {
  $("#dialog").dialog({
    modal: true,        // 模态对话框，阻止用户操作其他区域
    buttons: [
      {
        text: "取消",
        click: function() { $(this).dialog("close"); }
      },
      {
        text: "确认",
        click: function() { 
          alert("操作已执行！");
          $(this).dialog("close"); 
        }
      }
    ]
  });
});
</script>

参数解析：

modal: true 使对话框覆盖整个页面，增强用户注意力。
buttons 数组定义按钮的文本和点击事件，类似菜单选项的设计。

2.3 选项卡：内容分块管理

选项卡（Tabs）组件可将多个页面内容整合到同一区域，通过标签切换显示：

<div id="tabs">
  <ul>
    <li><a href="#tab-1">简介</a></li>
    <li><a href="#tab-2">功能</a></li>
    <li><a href="#tab-3">评价</a></li>
  </ul>
  <div id="tab-1">这是简介内容...</div>
  <div id="tab-2">这是功能说明...</div>
  <div id="tab-3">用户评价展示区...</div>
</div>

<script>
$("#tabs").tabs();
</script>

特性说明：

默认选中第一个标签页，可通过 active 参数指定初始位置。
支持动态添加/删除标签页，适合数据驱动的场景。

三、事件与动画：让页面“活”起来

3.1 拖放（Draggable & Droppable）

通过 draggable() 和 droppable() 方法，可轻松实现元素的拖拽交互：

<!-- HTML 结构 -->
<div id="drag-box" class="ui-widget-content">
  拖拽我！
</div>

<div id="drop-area" class="ui-widget-header">
  释放到这里
</div>

<script>
$("#drag-box").draggable();
$("#drop-area").droppable({
  drop: function(event, ui) {
    $(this).append("已接收！");  // 在目标区域显示提示
  }
});
</script>

原理比喻：

draggable 相当于给元素装上“滑轮”，使其可被拖动。
droppable 则是定义“停靠站”，当拖拽元素进入时触发事件。

3.2 动画效果：增强视觉反馈

jQuery UI 的动画方法（如 show()、hide()）支持多种过渡效果：

// 点击按钮时显示隐藏的 div
$("#toggle-btn").click(function() {
  $("#hidden-div").toggle("slide", { direction: "up" }, 1000);
});

参数含义：

slide 表示滑动动画类型。
direction 控制滑动方向（上/下/左/右）。
1000 是动画持续时间（毫秒）。

3.3 可滑动（Slider）：数值选择器

滑块（Slider）组件常用于音量调节、评分系统等场景：

<div id="slider"></div>
<p>当前值：0</p>

<script>
$("#slider").slider({
  min: 0,          // 最小值
  max: 100,        // 最大值
  value: 50,       // 初始值
  slide: function(event, ui) {
    $("p").text("当前值：" + ui.value);
  }
});
</script>

动态绑定：
通过 slide 事件实时更新文本内容，实现数值与 UI 的同步显示。

四、主题定制：打造专属界面风格

4.1 使用内置主题

jQuery UI 提供了多种开箱即用的主题，如 Base、Smoothness、Dark Hive 等。只需修改 CSS 文件的 URL 即可切换主题：

<!-- 切换到 Smoothness 主题 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">

4.2 自定义主题（ThemeRoller）

通过 ThemeRoller 在线工具，开发者可调整颜色、字体、边框等属性，生成专属主题包。以下是手动修改 CSS 的简单示例：

/* 自定义按钮背景色 */
.ui-button {
  background-color: #4CAF50 !important;
  color: white !important;
}

注意事项：

使用 !important 可覆盖 jQuery UI 的默认样式。
建议通过 CSS 预处理器（如 Sass）进行主题管理，提升代码复用性。

五、实战案例：构建待办事项应用

5.1 功能需求

显示待办事项列表
新增/删除任务
标记已完成任务
任务拖拽排序

5.2 HTML 结构

<div id="todo-app">
  <input type="text" id="new-task" placeholder="输入新任务...">
  <button id="add-btn">添加</button>
  <ul id="task-list"></ul>
</div>

5.3 JavaScript 实现

let tasks = [];

$(document).ready(function() {
  // 添加任务
  $("#add-btn").click(function() {
    const taskText = $("#new-task").val().trim();
    if (taskText) {
      tasks.push({ text: taskText, done: false });
      renderTasks();
      $("#new-task").val("");
    }
  });

  // 渲染任务列表
  function renderTasks() {
    const list = $("#task-list").empty();
    tasks.forEach((task, index) => {
      const item = `
        <li class="${task.done ? 'done' : ''}" data-index="${index}">
          <span class="task-text">${task.text}</span>
          <button class="remove-btn">×</button>
        </li>
      `;
      list.append(item);
    });
    enableDraggable();  // 重新初始化拖拽
  }

  // 标记完成状态
  $("#task-list").on("click", ".task-text", function() {
    const index = $(this).closest("li").data("index");
    tasks[index].done = !tasks[index].done;
    renderTasks();
  });

  // 删除任务
  $("#task-list").on("click", ".remove-btn", function() {
    const index = $(this).closest("li").data("index");
    tasks.splice(index, 1);
    renderTasks();
  });

  // 拖拽排序
  function enableDraggable() {
    $("#task-list").sortable({
      update: function() {
        const newOrder = $(this).sortable("serialize", { key: "task" });
        // 这里可同步到后端
      }
    });
  }
});

5.4 CSS 样式

#todo-app {
  width: 400px;
  margin: 20px auto;
}

#task-list li {
  padding: 10px;
  border: 1px solid #ddd;
  margin: 5px 0;
}

#task-list li.done {
  text-decoration: line-through;
  background-color: #e0e0e0;
}

.remove-btn {
  float: right;
  background: none;
  border: none;
  cursor: pointer;
}

结论：掌握 jQuery UI 的价值与方向

通过本文的学习，读者已掌握了 jQuery UI 的核心组件、事件系统和主题定制方法。在实际项目中，开发者可以结合以下策略进一步提升技能：

模块化开发：将常用功能封装为自定义插件，提高代码复用率。
响应式适配：通过 CSS 媒体查询和 jQuery 的尺寸检测方法，实现不同设备的交互优化。
性能优化：使用 $.Deferred 管理异步操作，或通过 debounce 技术减少高频事件的性能损耗。

进阶方向：

学习与现代前端框架（如 React、Vue）结合使用，发挥 jQuery UI 在复杂应用中的辅助作用。
研究动画库（如 Anime.js）与 jQuery UI 的互补方案，实现更丰富的视觉效果。

关键词布局统计：

“jQuery UI 教程” 在前言、章节标题和案例描述中自然出现 4 次。
关键技术点（如组件名、方法名）作为锚点贯穿全文，符合 SEO 语义。

通过持续实践，开发者将能够灵活运用 jQuery UI 快速构建高质量的交互界面，同时为深入学习现代前端技术打下坚实基础。

jQuery UI 教程（建议收藏）

前言：为什么选择 jQuery UI？

一、环境搭建：让 jQuery UI 就绪

1.1 引入基础库

1.2 验证环境

二、核心组件详解：构建交互的基础

2.1 按钮与图标

2.2 对话框：弹出式交互

2.3 选项卡：内容分块管理

三、事件与动画：让页面“活”起来

3.1 拖放（Draggable & Droppable）

3.2 动画效果：增强视觉反馈

3.3 可滑动（Slider）：数值选择器

四、主题定制：打造专属界面风格

4.1 使用内置主题

4.2 自定义主题（ThemeRoller）

五、实战案例：构建待办事项应用

5.1 功能需求

5.2 HTML 结构

5.3 JavaScript 实现

5.4 CSS 样式

结论：掌握 jQuery UI 的价值与方向

最新发布

Webstorm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

Pycharm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

DataGrip 2025.1.2 最新激活码，破解版安装教程（至2099年~）

Clion 2025.1.1 最新激活码，破解版安装教程（至2099年~）

IDEA 2025.1.1.1 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1.1 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1.1 最新激活码，破解版安装教程

Rider 2025.1.2 最新激活码，破解版安装教程

Rider 2025.1.1 最新破解版安装教程（附激活码~）

Clion 2025.1 最新激活码，破解版安装教程（至2099年~）