## jQuery选择器的简介

jQuery的选择器功能强大,以下是一些常用的元素查找方法的简要总结:

### 1. 选择具有特定ID的元素

```javascript

$("#myElement")

```

这将返回具有ID值为myElement的唯一元素。在文档中,每个元素只能有一个ID值,因此不能重复。

### 2. 选择所有的div标签元素

```javascript

$("div")

```

此选择器将返回所有div标签元素的数组。

### 3. 选择使用特定类的CSS元素

```javascript

$(".myClass")

```

此选择器将返回所有使用myClass类的CSS元素。

### 4. 选择文档中的所有元素

```javascript

$("*")

```

此选择器将返回文档中的所有元素。您还可以使用不同的选择方式进行联合选择,例如:

```javascript

$("#myElement,div,.myClass")

```

### 5. 层叠选择器

- `form input`:选择所有的form元素中的input元素。

- `#main > *`:选择id值为main的所有的子元素。

- `label + input`:选择所有label标签后面直接跟一个input标签的所有input标签元素。

- `#prev ~ div`:同胞选择器,返回id为prev的标签元素的所有属于同一个父元素的div标签。

### 6. 基本过滤选择器

- `tr:first`:选择所有tr元素的第一个。

- `tr:last`:选择所有tr元素的最后一个。

- `input:not(:checked) + span`:过滤掉checked的选择器的所有的input元素。

- `tr:even`:选择所有的tr元素的第0、2、4...等序号的元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)。

- `tr:odd`:选择所有的tr元素的第1、3、5...等序号的元素。

- `td:eq(2)`:选择所有td元素中序号为2的那个td元素。

选择器重构如下:

基础选择器:

1. 选择所有索引大于4的td元素:`$("td:gt(4)")`

2. 选择所有索引小于4的td元素:`$("td:lt(4)")`

3. 选择h1、h2、h3等标题元素:`$(":header")`

4. 选择正在执行动画效果的元素:`$("div:animated")`

5. 选择包含特定文本('John')的div元素:`$("div:contains('John')")`

6. 选择所有为空(不包括文本节点)的td元素数组:`$("td:empty")`

7. 选择所有含有p标签的div元素:`$("div:has(p)")`

8. 选择所有以td为父节点的元素数组:`$("td:parent")`

可视化过滤选择器:

1. 选择所有被隐藏的div元素:`$("div:hidden")`

2. 选择所有可见的div元素:`$("div:visible")`

属性过滤选择器:

1. 选择所有含有id属性的div元素:`$("div[id]")`

2. 选择所有name属性等于'newsletter'的input元素:`$("input[name='newsletter']")`

3. 选择所有name属性不等于'newsletter'的input元素:`$("input[name!='newsletter']")`

4. 选择所有name属性以'news'开头的input元素:`$("input[name^='news']")`

5. 选择所有name属性以'news'结尾的input元素:`$("input[name$='news']")`

选择器重构如下:

1. 选择所有name属性包含'news'的input元素:

```javascript

$("input[name*='news']")

```

2. 使用多个属性进行联合选择,得到所有含有id属性并且属性以man结尾的元素:

```javascript

$("input[id][name$='man']")

```

3. 子元素过滤选择器:

- 返回所有div元素的第一个子节点的数组:

```javascript

$("ul li:nth-child(2)")

```

- 返回所有div元素的最后一个节点的数组:

```javascript

$("ul li:nth-child(odd)")

```

- 返回所有div中只有唯一一个子节点的所有子节点的数组:

```javascript

$("div button:only-child")

```

4. 表单元素选择器:

- 选择所有的表单输入元素,包括input、textarea、select和button:

```javascript

$(":input")

```

- 选择所有的text input元素:

```javascript

$(":text")

```

- 选择所有的password input元素:

```javascript

$(":password")

```

- 选择所有的radio input元素:

```javascript

$(":radio")

```

- 选择所有的checkbox input元素:

```javascript

$(":checkbox")

```

- 选择所有的submit input元素:

```javascript

$(":submit")

```

- 选择所有的image input元素:

```javascript

$(":image")

```

- 选择所有的reset input元素:

```javascript

$(":reset")

```

请根据提供的内容完成内容重构,并保持段落结构:

选择所有的button input元素:

$(“:button”);

选择所有的file input元素:

$(“:file”);

选择所有类型为hidden的input元素或表单的隐藏域:

$(“:hidden”);

表单元素过滤选择器:

选择所有的可操作的表单元素:

$(“:enabled”);

选择所有的不可操作的表单元素:

$(“:disabled”);

选择所有的被checked的表单元素:

$(“:checked”);

选择所有的select 的子元素中被selected的元素:

$(“select option:selected”);

选取一个 name 为”S_03_22′′的input text框的上一个td的text值:

$(”input[@ name =S_03_22]“).parent().prev().text();

名字以”S_”开始,并且不是以”_R”结尾的:

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“);

一个名为 radio_01的radio所选的值:

$(”input[@ name =radio_01][@checked]“).val();

查找A元素下面的所有子节点,包括非直接子节点:

$(”A B“);

查找A元素下面的直接子节点:

$(”A>B“);

查找A元素后面的兄弟节点,包括非直接子节点:

$(”A+B“);

查找A元素后面的兄弟节点,不包括非直接子节点:

$(”A~B“);

. 请提供一个示例,说明如何使用 jQuery 选择器查找 HTML 表单中的所有 input 元素。

2. 请提供一个示例,说明如何使用 jQuery 选择器查找 HTML 表单中所有直接子节点为 input 元素的元素。

3. 请提供一个示例,说明如何使用 jQuery 选择器查找 HTML 标签中紧跟在 label 标签后面的 input 元素。

4. 请提供一个示例,说明如何使用 jQuery 选择器查找 HTML 标签中紧跟在某个标签后面的兄弟节点元素(不包括非直接子节点)。