В предыдущих двух статьях мы уже познакомились с базовыми и иерархическими селекторами, узнали многое про базовые фильтры, фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры. Теперь заключительная статья, посвященная селекторам jQuery, в которой мы познакомимся с селекторами и фильтрами форм.

Формы

:input

возвращает: Array<Element(s)>
Выбираются все элементы input, textarea, select и button.
В приведенном примере выбираются все элементы input.

var allInputs = $(":input");
var formChildren = $("form > *");
$("div").text("Найдено " + allInputs.length +
    " элементов input и " +
    formChildren.length + " потомков form.")
    .css("color", "red");
$("form").submit(function () {
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

:text

возвращает: Array<Element(s)>
Выбираются все элементы input типа text. См. пример.

var input = $(":text")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=text " + input.length + ".")
    .css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:password

возвращает: Array<Element(s)>
Выбираются все элементы input типа password. См. пример.

var input = $(":password")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=password " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:radio

возвращает: Array<Element(s)>
Выбираются все элементы input типа radio. См. пример.

var input = $(":radio").attr("checked", "checked");
$("div").text("Найдено type=radio " + input.length + ".")
    .css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:checkbox

возвращает: Array<Element(s)>
Выбираются все элементы input типа checkbox. См. пример.

var input = $(":checkbox").attr("checked","checked");
$("div").text("Найдено type=checkbox " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:submit

возвращает: Array<Element(s)>
Выбираются все элементы input типа submit. См. пример.

var input = $(":submit")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=submit " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:image

возвращает: Array<Element(s)>
Выбираются все элементы input типа image. См. пример.

var input = $(":image")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=image " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:reset

возвращает: Array<Element(s)>
Выбираются все элементы input типа reset. См. пример.

var input = $(":reset")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=reset " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:button

возвращает: Array<Element(s)>
Выбираются все элементы input типа button. См. пример.

var input = $(":button")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=button " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:file

возвращает: Array<Element(s)>
Выбираются все элементы input типа file. См. пример.

var input = $(":file")
    .css({background:"yellow", border:"3px red solid"});
$("div").text("Найдено type=file " +
    input.length + ".").css("color", "red");
$("form").submit(function () { return false; });

Откройте пример в отдельном окне и посмотрите исходный код.

:hidden

возвращает: Array<Element(s)>
Выбираются все скрытые элементы или элементы input, имеющие тип «hidden». C этим фильтром мы уже знакомились в разделе Visibility-фильтры. Но поскольку повторение – мать учения, посмотрим на пример еще раз.

// в некоторых браузерах в набор будут включены
//элементы head, title, script и т.д.,
// но как правило набор ограничивается элементом body.
$("span:first").text("Found " +
    $(":hidden", document.body).length +
    " hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " +
    $("input:hidden").length +
    " hidden inputs.");

Откройте пример в отдельном окне и посмотрите исходный код.

Фильтры форм

:enabled

возвращает: Array<Element(s)>
Выбираются все элементы, имеющие активное состояние (enabled). См. пример.

$("input:enabled").val("Этот элемент активен!");

Откройте пример в отдельном окне и посмотрите исходный код.

:disabled

возвращает: Array<Element(s)>
Выбираются все элементы, имеющие запрещенное состояние (disabled). См. пример.

$("input:disabled").val("Запрещен к использованию!");

Откройте пример в отдельном окне и посмотрите исходный код.

:checked

возвращает: Array<Element(s)>
Выбираются все отмеченные элементы (checked). См. пример.

function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n == 1 ? " is" : " are") +
  " checked!");
}
countChecked();
$(":checkbox").click(countChecked);

Откройте пример в отдельном окне и посмотрите исходный код.

:selected

возвращает: Array<Element(s)>
Выбираются все выбранные элементы (selected). В примере при изменении выбора мы получаем текст каждой выбранной опции и записываем его в элемент div.

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
    str += $(this).text() + " ";
  });
  $("div").text(str);
}).trigger('change');

Откройте пример в отдельном окне и посмотрите исходный код.

Этой статьей мы заканчиваем знакомство с селекторами с jQuery, но в следующих статьях продолжим знакомиться с API этой библиотеки…

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal