На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции 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"><!--Этот элемент будет выбран, т.к. он является элементом input и имеет атрибут type="checkbox"--> <form><!--Этот элемент не будет выбран, т.к. он является элементом input--> <input type="button" value="Введите значение"><!--Этот элемент не будет выбран, т.к. он не имеет атрибут type="checkbox"--> <input type="checkbox"><!--Этот элемент будет выбран, т.к. он является элементом 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>
Комментарии ()