使用jquery改变列表项的背景色

原创

mob64ca12d2dee8 2023-08-24 07:27:40 ©著作权

文章标签 jQuery HTML 背景色 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d2dee8的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 改变列表项的背景色

在 Web 开发中，我们经常需要使用 JavaScript 或其库来操作 DOM 元素。其中，jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作的过程。在本文中，我们将探讨如何使用 jQuery 来改变列表项的背景色。

准备工作

首先，我们需要在项目中引入 jQuery 库。你可以通过以下方式之一来获取 jQuery：

从 jQuery 官方网站下载 jQuery 库文件，并将其引入到你的 HTML 页面中。
使用 Content Delivery Network (CDN) 来引入 jQuery。例如，可以使用以下代码将 jQuery 引入到你的 HTML 页面中：

<script src="

一旦 jQuery 被引入到项目中，我们就可以开始使用它了。

改变列表项的背景色

假设我们有一个简单的无序列表（ul），其中包含多个列表项（li）。

<ul id="myList">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  <li>列表项 4</li>
  <li>列表项 5</li>
</ul>

我们想要通过点击列表项来改变其背景色。为此，我们可以使用 jQuery 的事件处理函数和 CSS 方法。

首先，我们需要编写一个事件处理函数，当列表项被点击时调用该函数。在函数中，我们可以通过 this 关键字获取到当前被点击的列表项，并使用 jQuery 的 css 方法来改变其背景色。

$(document).ready(function() {
  $('#myList li').click(function() {
    $(this).css('background-color', 'red');
  });
});

在上述代码中，我们使用了 jQuery 的 $ 函数来选择所有 id 为 myList 的列表项，并将事件处理函数附加到每个列表项上。在事件处理函数中，$(this) 表示当前被点击的列表项。通过调用 css 方法，我们可以改变它的背景色为红色。

完整示例

下面是一个完整的示例，演示了如何使用 jQuery 来改变列表项的背景色：

<!DOCTYPE html>
<html>
<head>
  <title>改变列表项的背景色</title>
  <script src="
  <style>
    li {
      cursor: pointer;
      padding: 5px;
      margin: 5px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <ul id="myList">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <li>列表项 4</li>
    <li>列表项 5</li>
  </ul>

  <script>
    $(document).ready(function() {
      $('#myList li').click(function() {
        $(this).css('background-color', 'red');
      });
    });
  </script>
</body>
</html>

在上述示例中，我们通过 CSS 将列表项的背景色设置为 lightgray。当我们点击任意一个列表项时，其背景色将立即变为红色。