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

На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции 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.

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

  • :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>
    

    jQuery - пример работы селектора :button

  • :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>
    

    jQuery - пример работы селектора :checkbox

  • :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>
    

    jQuery - пример работы селектора :checked

  • :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>
    

    jQuery - пример работы селектора :disabled

  • :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>
    

    jQuery - пример работы селектора :enabled

  • :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>
    

    jQuery - пример работы селектора :file

  • :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>
    

    jQuery - пример работы селектора :image

  • :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>
    

    jQuery - пример работы селектора :input

  • :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>
    

    jQuery - пример работы селектора :password

  • :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>
    

    jQuery - пример работы селектора :radio

  • :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>
    

    jQuery - пример работы селектора :reset

  • :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>
    

    jQuery - пример работы селектора :selected

  • :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>
    

    jQuery - пример работы селектора :submit

  • :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>
    

    jQuery - пример работы селектора :text



   JavaScript и jQuery 0    2210 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.