怎样用jquery改变一个li的背景图片

admin 2026年02月09日 11:29 102 0

jQuery轻松实现：如何改变li元素的背景图片

在网页开发中,动态调整页面元素的样式是常见需求，比如改变列表项（<li>）的背景图片以提升视觉效果或实现交互反馈，jQuery作为一款轻量级、功能强大的JavaScript库，提供了简洁的方法来操作DOM元素的CSS属性，本文将详细介绍如何使用jQuery改变<li>元素的背景图片，从基础准备到实际应用，帮助你快速掌握这一技巧。

前置准备：引入jQuery库

在使用jQuery之前,确保你的项目中已经引入了jQuery库，你可以通过以下两种方式之一引入：

CDN引入（推荐）

在HTML文件的<head>或<body>标签内，通过CDN链接引入jQuery最新版本，代码如下：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

本地引入

下载jQuery库文件（官网：https://jquery.com/），并将其放在项目目录中，然后通过相对路径引入：

<script src="js/jquery-3.7.1.min.js"></script>

提示：如果页面需要加载jQuery，建议将<script>标签放在<body>底部，这样可以避免阻塞页面渲染，提高页面加载速度。

确定目标`<li>`元素：选择器的使用

要改变<li>元素的背景图片，首先需要通过jQuery选择器定位到目标<li>元素，jQuery提供了多种选择器，常见的有以下几种：

通过ID选择器

如果<li>元素有唯一的id属性，可以使用#id选择器：

<ul>
  <li id="special-item">列表项1</li>
  <li>列表项2</li>
</ul>

jQuery选择：$("#special-item")

通过class选择器

如果多个<li>元素共享同一个class，可以使用.class选择器：

<ul>
  <li class="list-item">列表项1</li>
  <li class="list-item">列表项2</li>
</ul>

jQuery选择：$(".list-item")（会选中所有class="list-item"的<li>）

通过标签选择器

直接通过标签名选择所有<li>元素：

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

jQuery选择：$("li")（选中页面中所有<li>）

组合选择器（更精确）

如果需要选择特定父元素下的<li>，可以使用组合选择器：

<div class="container">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

jQuery选择：$(".container ul li")（选中class="container"的div下的ul下的所有<li>）

核心方法：使用`css()`方法改变背景图片

jQuery的css()方法是操作元素CSS属性的核心工具，它可以获取或设置元素的样式，要改变<li>的背景图片，需要通过css()方法设置background-image属性。

语法说明

$(selector).css("background-image", "url(图片路径)")

selector：目标<li>元素的选择器（如$("#special-item")）
"background-image"：CSS属性名，表示背景图片
"url(图片路径)"：CSS属性值，url()中的"图片路径"可以是相对路径（如"images/bg.jpg"）或绝对路径（如"https://example.com/images/bg.png"）

高级技巧：链式调用

jQuery支持链式调用,可以一次性设置多个CSS属性：

$("#item-1").css({
    "background-image": "url('images/bg.jpg')",
    "background-repeat": "no-repeat",
    "background-size": "cover"
});

实例演示：完整代码示例

下面是一个完整的HTML示例,展示如何通过jQuery改变<li>元素的背景图片：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery改变li背景图片示例</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      height: 50px;
      margin: 10px 0;
      line-height: 50px;
      text-align: center;
      background-color: #f0f0f0;
      border-radius: 5px;
      transition: all 0.3s ease;
    }
    button {
      margin: 20px 0;
      padding: 8px 15px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    .bg-changed {
      color: white;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>jQuery改变li背景图片示例</h2>
  <button id="change-btn">改变第一个li的背景图片</button>
  <button id="reset-btn">重置背景图片</button>
  <ul>
    <li id="item-1">列表项1（初始无背景图片）</li>
    <li class="list-item">列表项2</li>
    <li class="list-item">列表项3</li>
  </ul>
  <script>
    $(document).ready(function() {
      // 点击按钮时，改变id为"item-1"的li的背景图片
      $("#change-btn").click(function() {
        // 设置背景图片（使用在线图片示例）
        $("#item-1").css({
          "background-image": "url('https://picsum.photos/seed/item1/300x50.jpg')",
          "background-repeat": "no-repeat",
          "background-size": "cover",
          "background-position": "center"
        });
        // 添加类名以改变文字颜色
        $("#item-1").addClass("bg-changed");
      });
      // 重置按钮功能
      $("#reset-btn").click(function() {
        $("#item-1").css({
          "background-image": "none",
          "background-repeat": "",
          "background-size": "",
          "background-position": ""
        });
        $("#item-1").removeClass("bg-changed");
      });
      // 鼠标悬停效果
      $(".list-item").hover(
        function() {
          $(this).css("background-color", "#e9ecef");
        },
        function() {
          $(this).css("background-color", "#f0f0f0");
        }
      );
    });
  </script>
</body>
</html>