jQuery之筛选选择器(方法)

作者：System 时间：2024年08月16日分类：所有,jquery 字数：1014

这篇文章距离上次修改已过260天，其中的内容可能已经有所变动。

在jQuery中，筛选选择器用于从已选择的元素集合中筛选出特定的子集。以下是一些常用的筛选选择器：

:first - 选取第一个元素
:last - 选取最后一个元素
:eq(index) - 选取指定索引（从0开始）的元素
:even - 选取索引为偶数的元素
:odd - 选取索引为奇数的元素
:gt(index) - 选取索引大于指定值的元素
:lt(index) - 选取索引小于指定值的元素
:header - 选取所有的标题元素，如h1, h2, h3等
:animated - 选取当前正在执行动画的元素

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 筛选选择器示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>

<script>
$(document).ready(function(){
  // 选取第一个列表项
  $("li:first").css("color", "red");

  // 选取最后一个列表项
  $("li:last").css("color", "blue");

  // 选取第二个列表项（索引为1）
  $("li:eq(1)").css("font-weight", "bold");

  // 选取索引为偶数的列表项
  $("li:even").css("background-color", "yellow");

  // 选取索引为奇数的列表项
  $("li:odd").css("background-color", "green");
});
</script>

</body>
</html>

在这个例子中，我们选取了列表中的不同元素，并对它们应用了不同的CSS样式。

jQuery之筛选选择器(方法)

评论已关闭

推荐阅读