简述JQuery有几种选择器?

八股文_JQuery面试题 0 32

jQuery提供了多种选择器，用于在文档中查找元素。常见的jQuery选择器可以分为以下几类：

基本选择器：
- ID选择器：通过ID选择元素，使用#符号。
- 类选择器：通过类名选择元素，使用.符号。
- 标签选择器：通过标签名称选择元素。
层级选择器：
- 子元素选择器：选择某个元素的直接子元素。
- 后代元素选择器：选择某个元素的所有后代元素（包括子元素、孙元素等）。
- 兄弟元素选择器：选择同一父元素下的兄弟元素。
属性选择器：
- 选择具有指定属性或特定属性值的元素。
伪类选择器：
- 选择特定状态的元素，如:first、:last、:nth-child()等。
内容选择器：
- 选择包含特定文本的元素。

ID选择器：通过元素的ID属性选择元素。选择器语法是$('#id')。
```
$('#myDiv');  // 选择ID为'myDiv'的元素
```
类选择器：通过元素的类名选择元素。选择器语法是$('.className')。
```
$('.myClass');  // 选择所有类名为'myClass'的元素
```
标签选择器：通过元素的标签名称选择元素。选择器语法是$('tagName')。
```
$('div');  // 选择所有<div>元素
```

子元素选择器：选择某个元素的直接子元素，使用>符号。
```
$('#parent > div');  // 选择ID为'parent'元素的直接子元素<div>
```
后代元素选择器：选择某个元素的所有后代元素（包括子元素、孙元素等），使用空格来表示。
```
$('#parent div');  // 选择ID为'parent'元素内的所有<div>元素
```
兄弟元素选择器：
- 紧邻兄弟元素：选择某个元素的紧邻兄弟元素，使用+符号。
```
$('#first + p');  // 选择ID为'first'元素后面的第一个<p>元素
```
- 所有兄弟元素：选择某个元素的所有兄弟元素，使用~符号。
```
$('#first ~ p');  // 选择ID为'first'元素后的所有<p>元素
```

选择具有特定属性或特定属性值的元素。语法为[attribute]或[attribute="value"]。

选择具有指定属性的元素：

$('[type]');  // 选择所有具有'type'属性的元素

选择具有指定属性值的元素：

$('[type="text"]');  // 选择所有'type'属性值为'text'的元素

伪类选择器用于选择特定状态的元素。

:first：选择第一个匹配的元素。

$('ul li:first');  // 选择第一个<li>元素

:last：选择最后一个匹配的元素。

$('ul li:last');  // 选择最后一个<li>元素

:nth-child()：选择匹配的第N个子元素。

$('ul li:nth-child(2)');  // 选择第二个<li>元素

:not()：选择不符合某个条件的元素。

$('div:not(.active)');  // 选择所有不具有'class="active"'的<div>元素

选择包含特定文本的元素。

:contains()：选择包含指定文本的元素。

$('p:contains("hello")');  // 选择所有包含"hello"文本的<p>元素

jQuery提供了多种选择器，用于方便地选择页面上的DOM元素，包括基本选择器（ID、类、标签）、层级选择器（子元素、后代元素、兄弟元素）、属性选择器、伪类选择器和内容选择器等。通过这些选择器，你可以高效地选择和操作页面中的元素，简化了DOM操作的复杂性。