EDUCBA-jQueryUI-笔记-全-

EDUCBA jQueryUI 笔记（全）

001：项目三导论

在本节课中，我们将学习如何使用 jQuery UI 来构建一个交互式的 Web 应用程序。我们将从一个简单的“待办事项列表”项目开始，逐步了解 jQuery UI 的核心概念、功能以及它与 jQuery 的区别。

课程概述

jQuery UI 是一个基于 jQuery 的开源用户界面库，它提供了丰富的交互组件、效果和工具，帮助我们轻松创建具有高度交互性的 Web 应用。与 jQuery 主要处理 JavaScript 逻辑不同，jQuery UI 专注于用户界面的构建和交互。

课程目标

完成本课程后，你将能够：

  • 创建一个使用 jQuery UI 的 Web 应用程序。
  • 理解 jQuery UI 相较于 jQuery 的优势。

你将学习的内容

以下是本课程涵盖的核心知识点：

  • jQuery UI 的功能特性。
  • jQuery 与 jQuery UI 的区别。
  • 使用 jQuery UI 创建简单的 Web 应用程序。
  • jQuery UI 带来的好处。

jQuery UI 的核心特性

jQuery UI 提供了以下关键特性，使其成为构建交互式应用的强大工具：

  • 高度交互性：便于创建交互丰富的 Web 应用。
  • 开源免费：可免费使用。
  • 强大的主题机制：支持自定义界面外观。
  • 稳定且易于维护。
  • 广泛的浏览器支持。
  • 完善的文档。

jQuery UI 的四大模块

jQuery UI 的功能主要分为四大类：

1. 交互 (Interactions)
这是一组插件，用于实现用户与 DOM 元素的交互。核心交互包括：

  • draggable：使元素可拖动。
  • droppable：创建可放置目标。
  • resizable：使元素可调整大小。
  • selectable：使元素可选择。
  • sortable：使列表可排序。

2. 部件 (Widgets)
这是一组插件，用于创建标准的用户界面组件。常用部件包括：

  • accordion：手风琴折叠面板。
  • autocomplete：自动完成输入框。
  • dialog：对话框。
  • datepicker：日期选择器。
  • progressbar：进度条。
  • tabs：选项卡。
  • slider：滑块。

3. 效果 (Effects)
jQuery UI 包含一套完整的自定义动画和 DOM 元素过渡效果。核心方法包括：

  • hide() / show()：隐藏/显示元素。
  • addClass() / removeClass()：添加/移除 CSS 类。
  • toggleClass()：切换 CSS 类。
  • effect()：应用特定效果（如爆炸、高亮）。

4. 工具 (Utilities)
这是一些模块化工具，被 jQuery UI 内部使用，例如 position 工具用于精确定位元素。

jQuery 与 jQuery UI 的区别

简单来说，两者的核心区别在于：

  • jQuery：主要处理 JavaScript 逻辑和 DOM 操作，是 JavaScript 的查询和操作库。
  • jQuery UI：构建在 jQuery 之上，专注于用户界面和用户交互，提供现成的 UI 组件和交互效果。

课程要求与先决条件

为了顺利进行本项目，你需要具备以下知识：

  • HTML
  • CSS
  • jQuery
  • jQuery UI
  • JavaScript（因为 jQuery 基于 JavaScript）

此外，你需要在系统中安装一个代码编辑器，例如：

  • Notepad++
  • Sublime Text
  • 或其他你熟悉的 IDE。

目标受众

本课程适合以下人群：

  • 希望成为或已经是 Web 开发者的参与者。
  • 希望从事或已经是 Web 设计师的参与者。
  • 希望成为或已经是前端开发者的参与者。
  • 希望成为或已经是全栈开发者的参与者。

项目案例：XYZ 公司待办事项列表

现在，让我们开始具体的项目实践。我们将基于以下案例创建一个 Web 应用：

案例描述：XYZ 公司希望创建一个应用程序，用于维护员工的每日待办事项列表。员工可以在应用中写下当天要执行的任务，并能在完成后将其移除。

项目目标：基于以上案例，使用 jQuery UI 创建一个 Web 应用程序。

项目涵盖内容

在本项目中，我们将具体学习和应用以下技术：

  • jQuery UI
  • jQuery
  • 使用 HTML 进行网页设计。
  • 使用 CSS 进行样式设计。

项目初始化与设置

上一节我们介绍了项目背景，本节中我们来看看如何搭建项目环境。以下是创建项目基础结构的步骤：

1. 创建项目文件夹结构
首先，在你的计算机上创建一个名为 project 的文件夹。在该文件夹内，创建以下子文件夹：

  • css：用于存放样式表文件。
  • js：用于存放 JavaScript 文件。
  • images：用于存放图片资源。

2. 下载 jQuery UI 库文件
为了离线工作，我们需要下载 jQuery UI 的核心文件。你可以从 jQuery UI 官网获取，或直接使用 CDN 链接。这里我们演示离线下载方式：

  • CSS 文件：下载 jQuery UI 的主题样式文件（例如 jquery-ui.css），并保存到 css 文件夹。
  • JavaScript 文件：需要两个 JS 文件：
    • jquery.js：jQuery 核心库。注意：jQuery UI 依赖于 jQuery，所以必须先引入它。
    • jquery-ui.js：jQuery UI 核心库。
      将这两个文件下载并保存到 js 文件夹。

3. 创建基础 HTML 文件
在项目根目录下，创建一个名为 index.html 的文件，并写入基本的 HTML 结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XYZ Company - Daily To-Do List</title>
</head>
<body>
    <h1>XYZ Company</h1>
    <h3>Daily To-Do List</h3>
</body>
</html>

构建第一个 jQuery UI 组件：手风琴 (Accordion)

现在，让我们开始使用 jQuery UI 构建界面。我们将创建一个手风琴组件来组织内容。

1. 添加库文件引用
在 index.html 文件的 <head> 部分，引入我们下载的 CSS 和 JS 文件。

<!-- 引入 jQuery UI CSS 主题 -->
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- 引入 jQuery 库 -->
<script src="js/jquery.js"></script>
<!-- 引入 jQuery UI 库 -->
<script src="js/jquery-ui.js"></script>

2. 编写手风琴的 HTML 结构
在 <body> 中，我们创建一个 <div> 并为其设置一个 id（例如 accordion）。内部使用 <h3> 作为标题，<div> 作为内容面板。

<div id="accordion">
    <h3>Employee Details</h3>
    <div>
        <p>Content for employee details goes here.</p>
    </div>
    <h3>Daily Tasks</h3>
    <div>
        <p>Content for daily tasks goes here.</p>
    </div>
    <h3>About XYZ Company</h3>
    <div>
        <p>Content about the company goes here.</p>
    </div>
</div>

3. 使用 jQuery 初始化手风琴
在页面底部（</body> 标签之前），添加一个 <script> 标签，并编写 jQuery 代码来将我们定义的 div 转换为手风琴组件。

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

代码解释：

  • $(function() { ... })：这是 $(document).ready() 的简写，确保在 DOM 完全加载后执行代码。
  • $("#accordion")：这是一个 jQuery 选择器，用于选取 id 为 accordion 的元素。
  • .accordion()：这是 jQuery UI 提供的方法，它将选中的元素转换成一个手风琴组件。

4. 添加简单样式
为了让页面更美观，我们可以添加一些基本的 CSS 样式。

<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
    h1 {
        text-align: center;
        color: #333;
    }
    hr {
        border: 1px solid #ccc;
    }
</style>

保存所有更改并在浏览器中打开 index.html 文件。你现在应该能看到一个功能完整、可折叠展开的手风琴组件。

总结

在本节课中，我们一起学习了 jQuery UI 的基础知识，并动手创建了第一个交互式组件。我们了解到：

  1. jQuery UI 是一个专注于用户界面交互的库，构建在 jQuery 之上。
  2. 它主要包含交互、部件、效果和工具四大模块。
  3. 我们完成了项目的环境搭建，包括文件夹结构创建和库文件引入。
  4. 我们成功使用 accordion() 方法将一个普通的 HTML 结构转换成了交互式的手风琴面板。

这只是一个开始。在接下来的课程中，我们将在这个手风琴的“Daily Tasks”面板里，继续使用 jQuery UI 的其他部件（如按钮、对话框）和交互功能来构建完整的待办事项列表应用。

002：创建员工详情选项卡

在本节课中，我们将学习如何使用jQuery UI的选项卡（Tabs）和对话框（Dialog）组件来构建一个包含员工详情和公司信息的交互式页面。我们将从创建员工详情选项卡开始，然后添加一个关于公司的选项卡，并在其中集成一个可点击按钮来弹出对话框。

创建员工详情选项卡

上一节我们设置了基本的选项卡结构。本节中，我们来看看如何填充第一个选项卡的内容。

我们将创建一个<div>元素来容纳员工详情。这个<div>需要特定的jQuery UI类来应用样式。

以下是创建员工详情容器的代码结构：

<div class="ui-widget-content">
    <div class="ui-state-highlight ui-corner-all">
        <!-- 员工详情内容将放在这里 -->
    </div>
</div>

现在，我们可以在内部的<div>中添加员工的具体信息。例如，我们可以添加员工的姓名、职位、邮箱和联系电话。

以下是员工详情的示例内容：

  • 姓名：John Smith
  • 职位：Full Stack Developer
  • 邮箱：john.s@xyz.com
  • 联系电话：1234567890

保存文件并在浏览器中查看，你将在“员工详情”选项卡中看到这些信息。其他选项卡目前是空白的。你可以根据需要添加CSS样式（如边距）来美化这个区域。

创建“关于公司”选项卡

接下来，我们填充第二个选项卡，即“关于公司”选项卡。这个选项卡将包含一段公司介绍和一个可以触发对话框的按钮。

首先，我们创建一个简单的<div>来放置文本内容。

以下是公司介绍的示例段落：

我们是一家专注于创新软件解决方案的科技公司。我们的团队致力于为客户提供高质量的产品和服务，推动行业数字化转型。

你可以在段落后面添加一个换行符<br>，然后继续添加更多内容。为了增加交互性，我们将在介绍下方添加一个按钮。

添加交互式对话框按钮

现在，我们添加一个按钮，当用户点击它时，会弹出一个对话框显示更多信息。

我们创建一个按钮，并为其添加jQuery UI的按钮类，使其具有标准样式。

以下是按钮的HTML代码：

<button id="dialog-link" class="ui-button ui-corner-all ui-widget">关于软件</button>

为了使按钮居中，我们可以将其包裹在<center>标签中。接下来，我们需要创建这个按钮将要触发的对话框。

构建对话框内容

对话框是一个隐藏的<div>，只有在被调用时才会显示。我们为它设置一个ID，以便通过JavaScript控制。

以下是对话框的HTML结构：

<div id="dialog" title="每日工作清单">
    <p>这里是关于软件日常工作和项目管理的详细信息。这个对话框展示了如何使用jQuery UI Dialog组件来显示额外内容。</p>
</div>

如果此时刷新页面，对话框内容会直接显示在页面上。为了将其初始化为一个真正的对话框并默认隐藏，我们需要使用jQuery脚本。

使用jQuery初始化对话框

我们将使用jQuery选择器选中对话框的ID，并调用.dialog()方法将其转换为对话框组件。同时，我们设置autoOpen: false，使其不会在页面加载时自动打开。

以下是初始化对话框的JavaScript代码：

$("#dialog").dialog({
    autoOpen: false,
    width: 400,
    buttons: [
        {
            text: "确定",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            text: "取消",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

这段代码创建了一个宽度为400像素的对话框，并添加了“确定”和“取消”两个按钮，点击任意按钮都会关闭对话框。

绑定按钮点击事件

最后一步是将之前创建的按钮与对话框的打开动作绑定起来。我们为按钮的点击事件编写一个处理函数。

以下是绑定点击事件的JavaScript代码：

$("#dialog-link").click(function(event) {
    $("#dialog").dialog("open");
    event.preventDefault(); // 防止按钮的默认行为（如表单提交）
});

现在，当你点击“关于软件”按钮时，将会弹出一个包含公司详细信息的对话框。你可以通过对话框上的按钮或标题栏的关闭图标来关闭它。

总结

本节课中我们一起学习了如何使用jQuery UI构建一个交互式选项卡页面。我们完成了以下步骤：

  1. 在“员工详情”选项卡中展示了结构化的员工信息。
  2. 在“关于公司”选项卡中添加了公司介绍文本。
  3. 创建了一个具有jQuery UI样式的按钮。
  4. 构建了一个默认隐藏的对话框组件，并为其配置了操作按钮。
  5. 编写JavaScript代码，将按钮的点击事件与对话框的打开功能绑定起来。

通过这些步骤，我们实现了一个基本的、包含弹窗交互的Web应用界面。你可以在此基础上，进一步添加CSS样式或更多选项卡内容来丰富页面。

003：创建每日任务选项卡 📝

在本节课中，我们将学习如何创建一个每日任务列表页面。我们将构建一个允许用户查看、添加和标记任务完成状态的交互式界面。

上一节我们介绍了员工详情选项卡的创建，本节中我们来看看如何构建一个功能性的每日任务列表。

概述与结构搭建

首先，我们创建一个简单的<div>容器来承载整个任务列表模块。

<div id="dailyTask">
  <div class="header">
    <h2>每日任务列表</h2>
    <input type="text" id="myInput" placeholder="添加新任务...">
    <span class="addBtn" onclick="addNewTask()">添加</span>
  </div>
</div>

上述代码创建了一个标题为“每日任务列表”的区域，包含一个文本输入框和一个“添加”按钮。用户可以在输入框中填写新任务，点击按钮将其加入列表。

接下来，我们创建一个无序列表来展示预设的每日任务。

<ul id="myUL">
  <li>考勤</li>
  <li>登录系统</li>
  <li>午餐</li>
  <li>茶歇</li>
  <li>登出系统</li>
</ul>

这个列表包含了员工每日需要完成的基本任务项。

应用基础样式

为了使列表更美观和实用，我们需要添加一些CSS样式。以下是核心的样式定义：

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  list-style-type: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

这些样式移除了列表的默认样式，为列表项设置了背景、内边距，并禁止了文本选择，提升了交互体验。

设计列表交互视觉效果

为了增强可读性和交互反馈，我们为列表项设置斑马纹效果，并为已完成的任务添加视觉标记。

以下是实现斑马纹和完成状态的样式：

/* 斑马纹效果 */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-jqui/img/c82e331d340ebac9eb7b45e695374be2_18.png)

/* 任务完成时的样式 */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-jqui/img/c82e331d340ebac9eb7b45e695374be2_20.png)

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-jqui/img/c82e331d340ebac9eb7b45e695374be2_22.png)

/* 任务完成时的勾选标记 */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

当用户点击一个任务项时，通过JavaScript为其添加.checked类，该任务项的背景会变暗，文字会加上删除线，并在左侧显示一个勾选图标，清晰地表明任务已完成。

添加删除功能与输入区域样式

每个任务项都需要一个删除按钮，同时输入区域的样式也需要优化以提升用户体验。

以下是删除按钮和输入区域的样式代码：

/* 关闭（删除）按钮 */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-jqui/img/c82e331d340ebac9eb7b45e695374be2_35.png)

.close:hover {
  background-color: #f44336;
  color: white;
}

/* 头部输入区域样式 */
.header {
  background-color: #4CAF50;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-jqui/img/c82e331d340ebac9eb7b45e695374be2_37.png)

.header:after {
  content: "";
  display: table;
  clear: both;
}

![](https://github.com/OpenDocCN/cs-notes-pt1-zh/raw/master/docs/educba-jqui/img/c82e331d340ebac9eb7b45e695374be2_39.png)

/* 输入框样式 */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* 添加按钮样式 */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}

删除按钮位于每个任务项的右上角，悬停时会变为红色。输入框和添加按钮并排排列，宽度比例为3:1，按钮在悬停时有背景色变化反馈。

功能实现与整合

目前，我们已经完成了静态结构和样式的构建。完整的交互功能（如点击添加任务、点击标记完成、点击删除任务）需要通过JavaScript来实现，这将是后续课程的内容。

至此，我们创建了一个包含以下元素的每日任务列表界面：

  • 一个清晰的标题。
  • 一个用于添加新任务的输入框和按钮。
  • 一个带有预设任务的列表。
  • 为列表项设计了斑马纹和完成状态的高亮显示。
  • 为每个任务项预留了删除按钮的位置。

本节课中我们一起学习了如何使用HTML和CSS构建一个每日任务列表的静态界面，并为其设计了完整的视觉样式和交互状态。在接下来的课程中，我们将使用jQuery为这个列表添加动态交互功能。

004：编写日常任务脚本 📝

在本节课中，我们将为之前创建的日常任务列表编写脚本，实现添加新任务、标记完成和删除任务的功能。

概述

上一节我们已经创建了日常任务列表的HTML结构。本节中，我们将通过JavaScript脚本为列表添加交互功能，包括为每个任务项添加关闭按钮、实现点击删除和标记完成的效果，以及通过输入框添加新任务。

为列表项添加关闭按钮

首先，我们需要为每个已存在的列表项动态创建一个关闭按钮。

以下是实现步骤：

  1. 获取页面中所有的列表项（<li>元素）。
  2. 遍历这些列表项。
  3. 为每个列表项创建一个<span>元素作为关闭按钮。
  4. 为这个<span>元素添加文本内容（如“×”）和特定的类名（如“close”）。
  5. 将这个关闭按钮追加到对应的列表项中。

实现代码如下：

var myNodeList = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodeList.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodeList[i].appendChild(span);
}

执行这段代码后，每个任务项的右侧都会出现一个关闭按钮。

实现关闭按钮的点击删除功能

现在，我们需要让关闭按钮在被点击时，能够隐藏或删除其所在的整个列表项。

以下是实现步骤：

  1. 获取所有类名为“close”的关闭按钮元素。
  2. 遍历这些按钮。
  3. 为每个按钮添加一个点击事件监听器。
  4. 在事件处理函数中，找到被点击按钮的父元素（即列表项<li>），并将其显示样式设置为“none”，从而隐藏它。

实现代码如下：

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

现在，点击任意一个任务的关闭按钮，该任务就会从列表中消失。

实现点击标记任务完成

为了让用户能够标记任务已完成，我们实现一个功能：点击列表项时，为其切换一个“checked”类，从而通过CSS改变其外观（例如添加删除线）。

以下是实现步骤：

  1. 获取整个任务列表（<ul>）元素。
  2. 为其添加一个点击事件监听器。
  3. 在事件处理函数中，检查被点击的元素是否是列表项（<li>）。
  4. 如果是，则使用classList.toggle()方法为这个列表项添加或移除“checked”类。

实现代码如下：

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

现在，点击任意一个任务，它就会被标记为完成样式，再次点击则取消标记。

实现添加新任务功能

最后，我们需要实现通过输入框和“Add”按钮来添加新任务。

以下是实现步骤：

  1. 创建一个名为newElement的函数，该函数将由“Add”按钮的onclick事件触发。
  2. 在函数内部，创建一个新的列表项（<li>）元素。
  3. 获取输入框中的值。
  4. 创建一个文本节点，内容为输入框的值，并将其追加到新建的列表项中。
  5. 进行输入验证：如果输入值为空，则弹出警告。
  6. 如果输入有效，则将新建的列表项追加到任务列表（<ul>）中。
  7. 清空输入框。
  8. 最后，不要忘记为这个新建的列表项也动态添加上关闭按钮，并为其绑定点击删除事件。

实现代码如下：

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("Data cannot be null");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

现在，在输入框中键入新任务（例如“Meeting with ABC”），点击“Add”按钮，新任务就会出现在列表底部，并且自带关闭按钮功能。

项目总结与jQuery UI优势

本节课中我们一起学习了如何为静态任务列表添加完整的交互逻辑。我们实现了三个核心功能：

  1. 动态添加关闭按钮：为每个任务项创建删除入口。
  2. 交互响应：使关闭按钮能删除任务，点击任务能标记完成。
  3. 数据新增：通过表单输入和添加新任务。

通过这个练习可以看到，jQuery UI 的一大优势在于它提供了丰富的预制样式和交互组件。我们无需从头编写大量CSS来美化按钮、列表或对话框，只需引入jQuery UI的库文件并正确使用其定义的类名，即可获得一套风格统一、视觉效果良好的界面。这相比纯jQuery或原生JavaScript开发，能显著提升开发效率，尤其适合快速构建原型或对UI一致性要求较高的项目。

posted @ 2026-03-29 09:13  绝不原创的飞龙  阅读(2)  评论(0)    收藏  举报