📅 最后修改于: 2023-12-03 15:02:13.062000 🧑 作者: Mango
jQuery UI 是一个流行的 JavaScript 库，它扩展了 jQuery，并为开发人员提供了一系列用户界面组件和工具函数。其中一个组件是高亮效果，它可以使网站或应用程序中的元素在被悬停或选中时变得明显。
要使用 jQuery UI，需要先安装它。可以通过三种方式之一来获取库：
以下是使用 npm 安装的步骤：
npm install jquery-ui
安装完 jQuery UI 后，需要在网站或应用程序中添加这两个库。以下是加载 jQuery 和 jQuery UI 库的步骤：
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI 高亮效果演示</title>
<!-- 加载 jQuery-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 加载 jQuery UI-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
<!-- 在这里添加代码片段-->
</body>
</html>
已经加载了所需的库，可以添加高亮效果了。以下是添加 CSS 和 JavaScript 的步骤：
添加下面的 CSS 代码，以实现高亮效果：
.highlight {
background-color: yellow;
}
添加下面的 JavaScript 代码，以启用高亮效果：
$(document).ready(function() {
// 针对鼠标悬停的高亮效果
$('.highlight-on-hover').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
// 针对点击事件的高亮效果
$('.highlight-on-click').click(function() {
$(this).toggleClass('highlight');
});
});
现在，可以在网站或应用程序中添加高亮效果了。以下是演示如何在 HTML 中应用高亮效果：
这个示例演示如何添加针对鼠标悬停的高亮效果。将鼠标悬停在裸露的文本上，文本的背景颜色将变为黄色。
<p class="highlight-on-hover">这是裸露的文本。将鼠标悬停在这里以查看高亮效果。</p>
这个示例演示如何添加针对点击事件的高亮效果。单击下面的文本，文本的背景颜色将从白色变为黄色。
<p class="highlight-on-click">单击这里以查看高亮效果。</p>