如何使用 jQuery 实现高亮效果

在网页设计中，为了突出某些重要元素，常常需要实现高亮效果。jQuery 作为一款强大的 JavaScript 库，提供了便捷的方法来达成这一目的。

确保在项目中引入了 jQuery 库。可以通过 CDN 链接或者下载本地文件的方式将其引入到 HTML 文件中。

实现基本的高亮效果，例如当鼠标悬停在某个元素上时使其高亮显示。假设 HTML 中有一个列表：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

使用 jQuery 代码如下：

$(document).ready(function() {
  $('li').hover(function() {
    $(this).css('background-color', 'yellow');
  }, function() {
    $(this).css('background-color', '');
  });
});

在这段代码中，$(document).ready() 确保在文档加载完成后才执行代码。$('li') 选择了所有的列表项元素，hover() 方法绑定了两个回调函数，第一个函数在鼠标进入元素时执行，将元素的背景颜色设置为黄色，实现高亮；第二个函数在鼠标离开元素时执行，将背景颜色恢复为初始状态。

若想实现点击某个元素后使其持续高亮。可以这样编写代码：

$(document).ready(function() {
  $('li').click(function() {
    $(this).addClass('highlight');
    $('li').not(this).removeClass('highlight');
  });
});

这里需要在 CSS 中定义 highlight 类：

.highlight {
  background-color: lightblue;
  color: white;
}

当点击某个列表项时，它会添加 highlight 类，而其他列表项会移除该类，从而实现单个元素的持续高亮。

如果要对符合特定条件的元素进行高亮。比如，在一个包含多个段落的页面中，要高亮包含特定关键词的段落。

<p>这是一段包含关键词的文本</p>
<p>这是普通文本</p>

$(document).ready(function() {
  var keyword = '关键词';
  $('p').each(function() {
    if ($(this).text().indexOf(keyword)!== -1) {
      $(this).addClass('highlight');
    }
  });
});

通过以上方法，利用 jQuery 可以轻松实现各种场景下的高亮效果，提升网页的交互性和用户体验。