---
title: jQuery Selectors
localeTitle: Селекторы jQuery
---
## Селекторы jQuery
jQuery использует селектор стиля CSS для выбора частей или элементов HTML-страницы. Затем он позволяет вам что-то делать с элементами, использующими методы или функции jQuery.
Чтобы использовать один из этих селекторов, введите знак доллара и круглые скобки после него: `$()` . Это сокращает функцию `jQuery()` . Внутри круглых скобок добавьте элемент, который вы хотите выбрать. Вы можете использовать одиночные или двойные кавычки. После этого добавьте точку после круглых скобок и метод, который вы хотите использовать.
В jQuery селектора классов и идентификаторов похожи на классы в CSS.
Ниже приведен пример метода jQuery, который выбирает все элементы абзаца и добавляет к ним класс «selected»:
```javascript
This is a paragraph selected by a jQuery method.
This is also a paragraph selected by a jQuery method.
$("p").addClass("selected");
```
В jQuery селектора классов и идентификаторов те же, что и в CSS. Если вы хотите выбрать элементы с определенным классом, используйте точку ( `.` ) И имя класса. Если вы хотите выбрать элементы с определенным идентификатором, используйте символ хеша ( `#` ) и имя идентификатора. Обратите внимание, что HTML не чувствителен к регистру, поэтому лучше придерживаться разметки HTML и CSS-селекторов в нижнем регистре.
Выбор по классам:
```javascript
Paragraph with a class.
$(".p-with-class").css("color", "blue"); // colors the text blue
```
Выбор по ID:
```javascript
List item with an ID.
$("#li-with-id").replaceWith("Socks
");
```
Вы также можете выбрать определенные элементы вместе со своими классами и идентификаторами:
### Выбор по классам
Если вы хотите выбрать элементы с определенным классом, используйте точку (.) И имя класса.
```html
Paragraph with a class.
```
```javascript
$(".pWithClass").css("color", "blue"); // colors the text blue
```
Вы также можете использовать селектор классов в сочетании с именем тега, чтобы быть более конкретным.
```html
`
```
```javascript
$("ul.wishList").append("New blender");
```
### Выбор по идентификатору
Если вы хотите выбрать элементы с определенным значением идентификатора, используйте символ хеша (#) и имя идентификатора.
```html
List item with an ID.
```
```javascript
$("#liWithID").replaceWith("Socks
");
```
Как и в случае с селектором классов, это также можно использовать в сочетании с именем тега.
```html
News Headline
```
```javascript
$("h1#headline").css("font-size", "2em");
```
### Селекторы, которые действуют как фильтры
Существуют также селекторы, которые действуют как фильтры - они обычно начинаются с двоеточий. Например, `:first` селектор выбирает элемент, который является первым дочерним элементом его родителя. Ниже приведен пример неупорядоченного списка с некоторыми элементами списка. Селектор jQuery под списком выбирает первый элемент `` в списке - элемент списка «Один», а затем использует метод `.css` чтобы превратить текст в зеленый.
```html
```
```javascript
$("li:first").css("color", "green");
```
**Примечание.** Не забывайте, что применение CSS в JavaScript не является хорошей практикой. Вы всегда должны указывать свои стили в файлах css.
Другой селектор фильтрации `:contains(text)` , выбирает элементы с определенным текстом. Поместите текст, который вы хотите совместить в круглых скобках. Вот пример с двумя параграфами. Селектор jQuery берет слово «Moto» и меняет цвет на желтый.
```html
Hello
World
```
```javascript
$("p:contains('World')").css("color", "yellow");
```
Аналогично, `:last` селектор выбирает элемент, который является последним дочерним элементом его родителя. В селекторе JQuery ниже выбирается последний элемент `` в списке - элемент списка «Три», а затем используется метод `.css` чтобы повернуть текст в желтый цвет.
`$("li:last").css("color", "yellow");`
**Примечание.** В селекторе jQuery `World` находится в одинарных кавычках, потому что он уже находится внутри пары двойных кавычек. Всегда используйте одиночные кавычки внутри двойных кавычек, чтобы избежать непреднамеренного окончания строки.
**Несколько селекторов** В jQuery вы можете использовать несколько селекторов для применения одних и тех же изменений более чем к одному элементу, используя одну строку кода. Вы делаете это, разделяя различные идентификаторы запятой. Например, если вы хотите установить цвет фона трех элементов с идентификаторами cat, dog и rat соответственно красным, просто выполните:
```
$("#cat,#dog,#rat").css("background-color","red");
```
Это лишь некоторые из селекторов, доступных для использования в jQuery. Дополнительную информацию см. В разделе «Дополнительная информация» на веб-сайте jQuery.
#### Дополнительная информация:
* [Полный список селекторов jQuery](http://api.jquery.com/category/selectors/)