什么是过滤选择器？
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。
image.png
举个例子分别？
基本过滤选择器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div>Part 1</div>
<div>Part 2</div>
<div>part 3</div>
<script>
$("div:first").css("background-color","yellow");
</script>
结果如下
image.png
内容过滤选择器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div>Part 1</div>
<div>Part 2</div>
<div>part 3</div>
<script>
$("div:contains(2)").css("background-color","yellow");
</script>
结果如下
image.png
子元素过滤选择器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div>Part 1</div>
<div>Part 2</div>
<div>part 3</div>
<script>
$("div:nth-child(odd)").css("background-color","yellow");
</script>
结果如下
image.png
属性过滤选择器
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="demo">Part 1</div>
<div id="de">Part 2</div>
<div>part 3</div>
<script>
$("div[id]").css("background-color","yellow");
</script>
结果如下，也就是选择了含有id属性的元素。
image.png
如果把其中改为
<script>
$("div[id=demo]").css("background-color","yellow");
</script>
则结果为
image.png
为何属性过滤选择器不用冒号？
避免混淆，比如说有个元素有个first属性，那么div:first就和基本过滤器中的first混淆了。另一方面，如果用不同的方式也便于一眼识别出属性选择器。
为何需要过滤选择器？
因为其他选择器难以实现，比如子元素过滤选择器中选择所有偶数行。或者选择所有是3的倍数的行。
更加详细的内容参考
详解强大的jQuery选择器之过滤选择器、表单选择器 - artwl - 博客园
