博客

jQuery中的选择器

  • Post category:jquery

jQuery中的选择器攻略

jQuery中的选择器是一种强大的工具，可以帮助我们轻松地选择和操作HTML元素。在本攻略中，我们将详细介绍jQuery中的选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器。以下是一个详细的步骤，包含两个示例说明。

步骤

  1. 基本选择器

基本选择器是最简单的选择器，可以根据元素的标签名、类名、ID等属性来选择元素。以下是一些常用的基本选择器：

  • *：选择所有元素。
  • tag：选择指定标签名的元素。
  • .class：选择指定类名的元素。
  • #id：选择指定ID的元素。

以下是一个示例：

$("p") // 选择所有<p>元素
$(".my-class") // 选择所有类名为"my-class"的元素
$("#my-id") // 选择指定ID为"my-id"的元素
  1. 层次选择器

层次选择器可以根据元素之间的关系来选择元素。以下是一些常用的层选择器：

  • ancestor descendant：选择祖先元素下的所有后代元素。
  • parent > child：选择父元素下的直接子元素。
  • prev + next：选择前一个兄弟元素后面的直接后继元素。
  • prev ~ siblings：选择前一个兄弟元素后面的所有后继元素。

以下是一个示例：

$("ul li") // 选择所有<ul>元素下的<li>元素
$("ul > li") // 选择所有<ul>元素下的直接<li>元素
$("h1 + p") // 选择紧接在<h1>元素后面的<p>元素
$("h1 ~ p") // 选择在<h1>元素后面的所有<p>元素
  1. 过滤选择器

过滤选择器可以根据元素的状态或属性来选择元素。以下是一些常用的过滤选择器：

  • :first：选择第一个元素。
  • :last：选择最后一个元素。
  • :even：选择偶数位置的元素。
  • :odd：选择奇数位置的元素。
  • :eq(index)：选择指定位置的元素。
  • :gt(index)：选择位置大于指定位置的元素。
  • :lt(index)：选择位置小于指定位置的元素。
  • :not(selector)：选择不匹配指定选择器的元素。
  • :has(selector)：选择包含指定选择器的元素。
  • `:contains(text：选择包含指定文本的元素。
  • :empty：选择没有子元素的元素。
  • :visible：选择可见的元素。
  • :hidden：选择隐藏的元素。

以下是一个示例：

$("li:first") // 选择第一个<li>元素
$("li:even") // 选择偶数位置<li>元素
$("li:contains('apple')") // 选择包含文本"apple"的<li>元素
  1. 表单选择器

表单选择器可以根据表单元素的类型、状态或属性来选择元素。以下是一些常用的表单选择器：

  • :input：选择所有表单元素。
  • :text：选择所有文本输入框。
  • :password：选择所有密码输入框。
  • :radio：选择所有单选框。
  • :checkbox：选择所有复选框。
  • :submit：选择所有提交按钮。
  • :reset：选择所有重置按钮。
  • :button：选择所有普通按钮。
  • :file：选择所有文件上传框。
  • :enabled：选择所有启用的表单元素。
  • :disabled：选择所有禁用的表单元素。
  • :checked：选择所有被选中的单选框或复选框。
  • :selected：选择所有被选中的下拉列表项。

以下是一个示例：

$(":input") // 选择所有表单元素
$(":text") // 选择所有文本输入框
$(":checked") // 选择所有被选中的单选框或复选框

示例

示例1：使用选择器操作元素

在这个示例中，我们将使用选择器来选择和操作HTML元素。以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      $("h1").css("color", "red");
      $("ul li:first").css("font-weight", "bold");
      $("ul li:even").css("background-color", "#f2f2f2");
      $("input[type='text']").val("Hello World");
    });
  </script>
</head>
<body>
  <h1>My Heading</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <input type="text" name="my-input">
</body>
</html>

在上述示例中，我们使用$("h1")选择器来选择所有<h1>元素，并使用css()方法将它们的文本颜色设置为红色。我们使用$("ul li:first")选择器来选择第一个<li>元素，并使用css()方法将其字体加粗。我们使用$("ul li:even")选择器来选择偶数位置的<li>元素，并使用css()方法将它们的背景颜色设置为灰色。我们使用$("input[type='text']")选择器来选择所有文本输入框，并使用val()方法将它们的值设置为”Hello World”。

示例：使用表单选择器操作表单元素

在这个示例中，我们将使用表单选择器来选择和操作表单元素。以下是完整的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      $(":input").css("border", "1px solid red");
      $(":text").val("Hello World");
      $(":checkbox:checked").parent().css("background-color", "#f2f2f2");
    });
  </script>
</head>
<body>
  <form>
    <label for="my-input">My Input:</label>
    <input type="text" id="my-input" name="my-input">
    <br>
    <input type="checkbox" id="my-checkbox" name="my-checkbox" checked>
    <label for="my-checkbox">My Checkbox</label>
  </form>
</body>
</html>

上述示例中，我们使用$(":input")选择器来选择所有表单元素，并使用css()方法将它们的边框设置为红色。我们使用$(":text")选择器来选择所有本输入框，并使用val()方法将它们的值设置为”Hello World”。我们使用$(":checkbox:checked")选择器来选择所有被选中的复选框，并使用parent()方法选择它们的父元素（即<label>元素），并使用css()方法将它们的背景颜色设置为灰色。

结论

通过本攻略，我们了解了如何在jQuery中使用选择器，并提供了两个示例，分别演示了如何使用选择器操作元素以及如何使用表单选择器操作表单元素。使用这些方法，我们可以轻松地选择和操作HTML元素，以满足不同的Web开发需求。

Tags: