jQuery - Селекторы элементов формы

Александр Мальцев

20.08.2015

8.4K

На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.

Селекторы элементов формы предназначены для выбора элементов в зависимости от:

их типа (значения атрибута type) - :button, :checkbox, :file, :image, :password, :radio, :reset, :submit, :text.
того, является ли их тег input, textarea, select или button - :input.
того, находится ли элемент в фокусе или нет - :focus.
того, находятся ли элементы в активном состоянии (:enabled) или не активном (:disabled).
того, находятся ли элементы option в состоянии selected или нет - :selected.
того, находятся ли элементы checkbox, select и radio в состоянии selected или нет - :checked.

:button - выбирает все элементы button и элементы с type="button". Селектор $(":button") эквивалентен $("button, input[type='button']").

Селектор :button не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:

$("селектор").filter(":button");

Например, выбрать все элементы button или элементы с type="button", которые расположены внутри формы:

<input type="button" value="Введите имя"><!--Этот элемент не будет выбран, т.к. он не расположен в элементе form-->
<form><!--Этот элемент не будет выбран, т.к. он не является элементом button и не является элементом с type="button"-->
  <input type="button" value="Введите значение"><!--Этот элемент будет выбран, т.к. он расположен в элементе form и является элементом с type="button"-->
  <button>Обновить данные</button><!--Этот элемент будет выбран, т.к. он расположен в элементе form и является элементом button-->
  <input type="file"><!--Этот элемент не будет выбран, т.к. он не является элементом button и не является элементом с type="button"-->
</form>

<script>
  $("form :button");
  //или с помощью метода filter
  $("form *").filter(":button");
</script>

:checkbox - выбирает все элементы с type="checkbox". Селектор $(":checkbox") эквивалентен $("[type=checkbox]").

Перед селектором :checkbox как и перед селекторами псевдоклассов (т.е. теми которые начинаются со знака ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если перед знаком ":" ничего не указывать, то подразумевается использование универсального селектора (*). Другими словами, $(":checkbox") эквивалент $("*:checkbox"). Но более правильно в этом случае вместо * использовать тег input: $("input:checkbox").
Селектор :checkbox не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:
```
$('input[type="checkbox"]');
```
Например, выбрать все элементы input, которые имеют атрибут type="checkbox", т.е. являются флаговыми кнопками:
```
<input type="checkbox">
<form>
  <input type="button" value="Введите значение">
  <input type="checkbox">
</form>

<script>
  $("input:checkbox");
  //или с помощью селектора атрибута
  $('input[type="checkbox"]');
</script>
```

:checked - выбирает все элементы с состоянием checked или selected. Селектор :checked предназначен для элементов checkbox, select и кнопок radio.

<input type="checkbox" checked="checked">Linux<!--Этот элемент будет выбран, т.к. он находится в состоянии checked-->
<input type="checkbox">Windows<!--Этот элемент не будет выбран, т.к. он не находится в состоянии checked-->

<input type="radio" name="radio">Chrome<!--Этот элемент не будет выбран, т.к. он не находится в состоянии checked-->
<input type="radio" name="radio" checked="checked">Firefox<!--Этот элемент будет выбран, т.к. он находится в состоянии checked-->

<select name="select"><!--Этот элемент не будет выбран, т.к. он не находится в состоянии checked-->
  <option value="value1">Значение 1</option><!--Этот элемент не будет выбран, т.к. он не находится в состоянии checked-->
  <option value="value2" selected="selected">Значение 2</option><!--Этот элемент будет выбран, т.к. он находится в состоянии selected-->
  <option value="value3">Значение 3</option><!--Этот элемент не будет выбран, т.к. он не находится в состоянии checked-->
</select>

:disabled - выбирает все элементы, которые отключены (disabled).

Перед селектором :disabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":disabled") эквивалентен $("*:disabled"). Но в этом случае более правильно вместо "*" использовать тега input: $("input:disabled").

Селектор :disabled отличается от селектора атрибута [disabled]. Селектор :disabled проверяет логическое значение (истина/ложь) свойства disabled элемента, в то время как селектор атрибута [disabled] просто проверяет наличие атрибута disabled у элемента.

Селектор :disabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: <button>, <input>, <optgroup>, <option>, <select> и <textarea>.
```
<form>
  <input name="id">
  <input name="email" disabled="disabled">
</form>

<script>
  $("input:disabled");
</script>
```
:enabled - выбирает все элементы, которые включены (enabled).

Перед селектором :enabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":enabled") эквивалентен $("*:enabled"). Но более правильно в этом случае вместо "*" использовать тег input: $("input:enabled").

Селектор :enabled отличается от :not([disabled]). Селектор :enabled выбирает элементы, у которых логическое свойство disabled имеет значение false. В то время как :not([disabled]) выбирает элементы, у которых атрибут disabled не установлен.

Селектор :enabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: <button>, <input>, <optgroup>, <option>, <select>, и <textarea>.
```
<form>
  <input name="id">
  <input name="email" disabled="disabled">
</form>

<script>
  $("input:enabled");
</script>
```
:file - выбирает все элементы с type="file". Селектор :file эквивалентен [type="file"].

Перед селектором :file как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":file") эквивалент $("*:file"). Но более правильно в таких случаях вместо "*" использовать тег input: $("input:file").

Селектор :file не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте селектор атрибута [type="file"].
```
<form>
  <input type="button" value="Обновить информацию">
  <input type="checkbox">
  <input type="file">
</form>

<script>
  $("input:file");
  //
  $('input[type="file"]');
</script>
```
:focus - выбирает элемент, находящийся в фокусе.

Перед селектором :focus как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":focus") эквивалентен $("*:focus"). Если Вам необходимо получить текущий элемент, находящийся в фокусе, то воспользуйтесь следующим кодом: $(document.activeElement). Данный способ получает элемент, минуя его поиск в DOM-дереве.
:image - выбирает все элементы с type="image". Селектор :image эквивалентен [type="image"].

Селектор :image не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте [type="image"].
```
<form>
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
</form>

<script>
  $("input:image");
  //
  $('input[type="image"]');
</script>
```
:input - выбирает все элементы input, textarea, select и button в документе. Т.е. он выбирает все элементы управления формы.
Селектор :input не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:
```
$("селектор").filter(":input");
```
```
<form>
  <input type="text">
  <textarea></textarea>
  <select>
    <option>Параметр 1</option>
    <option>Параметр 2</option>
  </select>
  <input type="reset">
  <input type="submit">
</form>

<script>
  $("*:input");
  //
  $("form *).filter(":input");
</script>
```
:password - выбирает все элементы с type="password". Селектор :password" эквивалентен [type=password].

Перед селектором :password как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":password") эквивалентен $("*:password"). Но более правильно в таких случаях вместо "*" использовать тега input: $("input:password").

Селектор :password не является частью спецификации CSS. Он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте [type="password"].
```
<form>
  <input type="file">
  <input type="password">
  <input type="text">
  <input type="submit">
</form>

<script>
  $("*:password");
  //
  $('[type="password"]');
</script>
```
:radio - выбирает все элементы с type="radio". Селектор :radio эквивалентен [type=radio].

Перед селектором :radio как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":radio") эквивалентен $("*:radio"). Но более правильно этом случае вместо "*" использовать тег input: $("input:radio").

Селектор :radio не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте [type="radio"].
```
<form>
  <input type="text">
  <input type="image">
  <input type="radio" name="myradio">
  <input type="radio" name="myradio">
  <input type="reset">
  <input type="submit">
</form>

<script>
  $(":radio");
  //
  $('[type="radio"]');
</script>
```
:reset - выбирает все элементы с type="reset". Селектор :reset эквивалентен [type="reset"].

Селектор :reset не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте [type="reset"].
```
<form>
  <input type="text">
  <input type="image">
  <input type="radio" name="myradio">
  <input type="radio" name="myradio">
  <input type="reset">
  <input type="submit">
</form>

<script>
  $(":reset");
  //
  $('[type="reset"]');
</script>
```
:selected - выбирает все элементы, которые находятся в состоянии selected. Селектор :selected работает только с элементами option и не работает с элементами checkbox и radio. Для работы с последними используйте селектор :checked.
Селектор :selected не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll() получена не будет. Для увеличения производительности запроса в современных браузерах, используйте следующую конструкцию:
```
$("селектор").filter(":selected");
```
```
<select name="garden" multiple="multiple">
  <option>Цветы</option>
  <option selected="selected">Кустарники</option>
  <option>Деревья</option>
  <option selected="selected">Земля</option>
  <option>Трава</option>
</select>

<script>
  $(":selected");
  //
  $("*").filter(":selected");
</script>
```
:submit - выбирает все элементы с type="submit". Селектор :submit предназначен для элементов button или input.

Селектор :submit не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте input[type="submit"], button[type="submit"]
```
<form>
  <input type="text">
  <input type="image">
  <input type="radio" name="myradio">
  <input type="radio" name="myradio">
  <input type="reset">
  <input type="submit">
</form>

<script>
  $(":submit");
  //
  $('input[type="submit"],button[type="submit"]');
</script>
```
:text - выбирает все элементы с type="text".

jQuery функция $(":text") позволяет нам выбрать элементы <input type="text">. Перед селектором :text как и перед селекторами псевдоклассов (т.е. теми которые начинаются с ":") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком ":" ничего не указываете, то подразумевается использование универсального селектора ("*"). Другими словами, $(":text") эквивалентен $("*:text"). Но более правильно этом случае вместо "*" использовать тег input: $("input:text").

Начиная с версии jQuery 1.5.2, селектор :input также выбирает элементы input, у которых не указан атрибут type (в этом случае подразумевается, что элемент имеет type="text").

Разницу между $(":text") и $("[type=text]" ) продемонстрируем на следующем примере:
```
$("<input>").is("[type=text]"); // false
$("<input>").is(":text"); // true
```
Селектор :text не является частью спецификации CSS, он реализован исключительно в jQuery. Поэтому когда Вы используете его в селекторе для фильтрации элементов, увеличение производительности, которая обеспечивается нативным DOM-методом querySelectorAll(), получена не будет. Для увеличения производительности запроса в современных браузерах, используйте [type="text"].
```
<form>
  <input type="text">
  <input type="image">
  <input type="radio" name="myradio">
  <input type="radio" name="myradio">
  <input type="reset">
  <input type="submit">
</form>

<script>
  $(":text");
  //
  $('input[type="text"]');
</script>
```