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,然后创建不符合条件的集合
});
效果: