jQuery—过滤器（filter）_jquery的filter-优快云博客

本文介绍了一个使用HTML和jQuery的示例，展示了如何通过jQuery选择网页上的元素并改变其样式。具体包括选择第一个、最后一个及特定条件下的元素，并应用颜色和背景色更改。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="filterText.js"></script>
</head>
<body>
      <div>
          <p>炉石传说</p>
      </div>
      <div>
          <p id="pName" class="className">真好玩</p>
      </div>
      <div>
          <p>欢迎来到我的旅店</p>
      </div>
      <div>
          <h3>快来！说说你的故事吧</h3>
      </div>
</body>
</html>

JS代码：

$(document).ready(function () {
   $("div p").first().css({color:"red"});
   //指定第一个同名元素
   $("div p").last().css({color:"blue"});
   //指定最后一个同名元素
   $("div p").eq(1).css({color: "blueviolet"});
   //指定第二个同名元素，跟数组一样从0开始计
   $("div p").filter(id=pName).css ({backgroundColor:"aqua"});
   //filter里面指定选择的条件，创建符合条件的集合
   $("div p").not(".className").css({background:"firebrick"});
   //not里面添加条件，上面id=pname，这里不能写成class=className，然后创建不符合条件的集合
});

效果：