博客

jQuery :even 选择器

  • Post category:jquery

以下是关于“jQuery :even 选择器”的完整攻略：

1. jQuery :even 选择器简介

jQuery :even 选择器是一种用于选择偶数元素的选择器。它可以选择所有索引为偶数的元素，包括第一个元素（索引为0）。

2. 使用jQuery :even 选择器

下面是使用jQuery :even 选择器的示例：

示例1：选择偶数行的表格行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery :even Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h2>Table with Even Rows Highlighted</h2>
  <table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Alice</td>
        <td>Johnson</td>
        <td>45</td>
      </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      $("tr:even").css("background-color", "#f2f2f2");
    });
  </script>
</body>
</html>

在上面的代码中，使用了jQuery :even 选择器来选择偶数行的表格行，并使用CSS样式将它们的背景颜色设置为灰色。

示例2：选择偶数索引的列表项

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery :even Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    li {
      margin: 5px;
      padding: 5px;
      border: 1px solid #ddd;
    }

    .even {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h2>List with Even Items Highlighted</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <script>
    $(document).ready(function() {
      $("li:even").addClass("even");
    });
  </script>
</body>
</html>

在上面的代码中，使用了jQuery :even 选择器来选择偶数索引的列表项，并使用CSS样式将它们的背景颜色设置为灰色。

3. 总结

jQuery :even 选择器是一种非常有用的选择器，可以用于选择偶数元素。它可以应用于各种场景，例如表格行、列表项等。在使用时，需要注意选择器的语法和使用方式，以确保正确选择目标元素。

Tags: