选择器是 jQuery 的基础,它在 jQuery 中被广泛用于事件处理、DOM 遍历和 Ajax 操作。jQuery 选择器具有以下优点:简洁的写法和完善的事件处理机制。

基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器。它通过元素的 id、class 和标记名来查找 DOM 元素。例如:

```javascript

// 通过 id 选择元素并修改其背景色为红色

$("#one").css("backgroundColor", "red");

// 通过 class 选择元素并修改其样式

$("p").css({ color: "red", backgroundColor: "#bbffaa" });

// 通过标签名选择元素并修改其背景色为红色

$("p").eq(0).css("backgroundColor", "red");

```

层次选择器用于通过 DOM 元素之间的层次关系获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等。需要注意的是,jQuery 中的 `prev ~ div` 选择器只能选择 `#prev` 元素后面的同辈元素;而 jQuery 中的方法 `siblings()` 与前后位置无关,只要是同辈节点就可以选取。示例如下:

```javascript

// 通过 body 下的 div 元素设置背景色为 #bbffaa

$("body div").css("backgroundColor", "#bbffaa");

// 通过 body 下的所有 div 元素设置背景色为 #bbffaa

$("body>div").css("backgroundColor", "#bbffaa");

// 通过 id 为 two 的元素后面的所有兄弟元素设置背景色为 #bbffaa

$("#one+div").css("backgroundColor", "#bbffaa");

```

重构后的内容如下:

基本过滤选择器:

```javascript

// 获取第一个div元素并设置背景颜色为#bbffaa

$("div:first").css("backgroundColor", "#bbffaa");

// 获取所有不包含id为'one'的p元素,并设置背景颜色为#bbffaa

$("p:not('#one')").css("backgroundColor", "#bbffaa");

// 获取所有偶数行的tr元素,并设置背景颜色为#bbffaa

$("tr:even").css("backgroundColor", "#bbffaa");

// 获取索引大于3且为奇数的p元素,并设置背景颜色为#bbffaa

$("p:gt(3):odd").css("backgroundColor", "#bbffaa");

// 获取表头元素,并设置背景颜色为#bbffaa

$(":header").css("backgroundColor", "#bbffaa");

```

内容过滤选择器:

```javascript

// 改变含有文本 'di' 的 p元素的背景色为 #bbffaa

$("p:contains(di)").css("backgroundColor", "#bbffaa");

// 改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa

$("p.mini").css("backgroundColor", "#bbffaa");

```

可见性过滤选择器是一种根据元素的可见和不可见状态来选择相应元素的方法。其中,隐藏选择器不仅包含样式属性`display`为`none`的元素,还包括文本隐藏域和`visible:hidden`之类的元素。

另外,属性过滤选择器也是通过元素的属性来获取相应的元素。它的过滤规则有以下几种形式:

- `Element[attribute]`:选取具有指定属性的元素;

- `Element[attribute=value]`:选取具有指定属性且属性值等于给定值的元素;

- `Element[attribute!=value]`:选取具有指定属性且属性值不等于给定值的元素;

- `Element[attribute^=value]`:选取具有指定属性且属性值以给定值开头的元素;

- `Element[attribute$=value]`:选取具有指定属性且属性值以给定值结尾的元素;

- `Element[attribute*=value]`:选取具有指定属性且属性值包含给定值的元素。

此外,还有表单选择器和子元素选择器可以用来定位特定的HTML元素。表单选择器包括`input`,`text`,`password`,`radio`,`checkbox`等类型。子元素选择器则使用`nth-child()`伪类来选取父元素下的特定索引的子节点。

需要注意的是,不同的子元素选择器有不同的用法。例如,`:nth-child(even/odd)`可以选择父元素下索引值为偶数或奇数的子节点;而`:nth-child(3n)`则可以选择父元素下索引值是3的倍数的子节点。

最后,表单对象属性过滤选择器可以通过选择表单内的特定属性来筛选元素。这种选择器通常用于对所选表单元素进行进一步的操作和处理。