jQuery и другое... » Selectors

jQuery API: Selectors – селекторы jQuery: селекторы форм и фильтры форм.

Gennady — Mon, 05 May 2008 21:15:43 +0000

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

Формы

:input

возвращает: Array
Выбираются все элементы 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
Выбираются все элементы 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
Выбираются все элементы 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
Выбираются все элементы input типа radio. См. пример.

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

:checkbox

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

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

:submit

возвращает: Array
Выбираются все элементы 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
Выбираются все элементы 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
Выбираются все элементы 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
Выбираются все элементы 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
Выбираются все элементы 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
Выбираются все скрытые элементы или элементы 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
Выбираются все элементы, имеющие активное состояние (enabled). См. пример.

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

:disabled

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

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

:checked

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

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

:selected

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

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

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

jQuery API: Selectors – селекторы jQuery: фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры.

Gennady — Sun, 04 May 2008 21:10:53 +0000

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

Фильтры контента

:contains(text)

возвращает: Array
Выбираются элементы, которые содержат переданный текст.
Ищем все элементы DIV, содержащие подстроку «John» и подчеркиваем их.

$("div:contains('John')")
    .css("text-decoration", "underline");

:empty

возвращает: Array
Выбираются все элементы, которые не содержат потомков (в том числе и текстовых узлов).
Ищем все пустые элементы – они не должны содержать элементов-потомков или текст, вставляем в них текст «Пустой!» и устанавливаем фоновый цвет.

$("td:empty").text("Пустой!")
    .css('background', 'rgb(255,220,200)');

:has(selector)

возвращает: Array
Выбираются элементы, которые содержат по крайней мере один элемент, указанный в селекторе.
В примере добавляем класс «test» ко всем элементам div, которые содержат внутри себя как минимум один элемент p.

$("div:has(p)").addClass("test");

:parent

возвращает: Array
Выбираются все элементы, которые являются родительскими – т.е. имеют элементы-потомки, в том числе и текст.
Ищем все элементы td, имеющие потомков, включая текст. Если кликнуть на таком элементе мышкой, цвет его фона изменит прозрачность.

$("td:parent").click(function () {
  $(this).fadeTo(1500, 0.3);
});

Visibility-фильтры

:hidden

возвращает: Array
Выбираются все скрытые элементы или элементы input, имеющие тип «hidden».
Выбираем все скрытые элементы div (их можно будет увидеть, кликнув мышкой по кнопке) и подсчитываем элементы input с типом «hidden».

// в некоторых браузерах в набор будут включены
// элементы head, title, script и т.д.,
// но как правило набор ограничивается элементом body.
$("span:first").text("Всего найдено " +
  $(":hidden", document.body).length +
  " скрытых элементов.");
$("#showHidden").click(function () {
  $("div:hidden").show(3000);
});

:visible

возвращает: Array
Выбираются все видимые элементы.
В примере: все видимые элементы div можно сделать желтыми, кликнув по ним мышкой. Невидимые элементы можно показать щелкнув по кнопке, но свой цвет изменять они не смогут.

$("div:visible").click(function () {
  $(this).css("background", "yellow");
});
$("button").click(function () {
  $("div:hidden").show("fast");
});

Фильтры атрибутов

[attribute]

возвращает: Array
Выбираются все элементы, имеющие указанный атрибут.
Клик мышкой по элементам div, которые имеют атрибут id, добавит значение этого атрибута в виде текста в соответствующий элемент div.

$("div[id]").one("click", function(){
  var idString = $(this).text() +
 " = " + $(this).attr("id");
  $(this).text(idString);
});

[attribute=value]

возвращает: Array
Выбираются элементы с атрибутом, значение которого соответствует указанному.
В примере мы ищем элемент input, атрибут name которого имеет значение newsletter и изменяем текст в следующем непосредственно за ним элементе span.

$("input[name='newsletter']").click(function(){
  $(this).next().text(" атрибут name = newsletter");
});

[attribute!=value]

возвращает: Array
Выбираются элементы с атрибутом, значение которого не соответствует указанному.
Например ищем все элементы input атрибут name которых не соответствует значению newsletter и изменяем текст в следующем непосредственно за ним элементе span.

$("input[name!='newsletter']").next()
    .text(" is not newsletter");

[attribute^=value]

возвращает: Array
Выбираются все элементы, соответствующий атрибут которых начинается с указанного значения.
В примере мы ищем все элементы input, значение атрибута name которых начинается с news и затем вставляем в них значение «Это news!».

$("input[name^='news']").val("Это news!");

[attribute$=value]

возвращает: Array
Выбираются все элементы, соответствующий атрибут которых заканчивается указанным значением.
В примере мы ищем все элементы input, значение атрибута name которых заканчивается на letter и затем вставляем в них значение «Это letter!».

$("input[name$='letter']").val("Это letter!");

[attribute*=value]

возвращает: Array
Выбираются все элементы, соответствующий атрибут которых содержит в качестве подстроки указанное значение.
В примере мы ищем все элементы input, значение атрибута name которых содержит подстроку man и затем вставляем в них значение «Найдена подстрока man!».

$("input[name*='man']").val("Найдена подстрока man!");

[selector1][selector2]…[selectorN]

возвращает: Array
Выбираются все элементы, которые имеют указанные атрибуты и соответствующие значения.
Ищем все элементы input, которые имеют атрибут id, а также атрибут name, значение которого заканчивается подстрой «man». Вставляем в найденные элементы значение «найдено».

$("input[id][name$='man']").val("найдено");

Child-фильтры

:nth-child(index/even/odd/equation)

возвращает: Array
В качестве аргумента принимает число или строку. Число может представлять индекс элемента (обратите внимание, что здесь отсчет ведется с 1), строка – even, odd, или equation. Выбираются все элементы, которые являются n-нными потомками своего родителя или четными/нечетными потомками.
В примере мы ищем каждый второй элемент li во всех отобранных элементах ul, ну и отмечаем их.

$("ul li:nth-child(2)").append(" - 2-ой!");

:first-child

возвращает: Array
Выбираются все элементы, которые являются первыми потомками своих родителей.
В примере мы выбираем первый элемент span в каждом найденном элементе div и подчеркиваем их текст. Да, и еще при наведении курсора мыши добавляем класс, который сделает текст жирным и зеленого цвета.

$("div span:first-child")
  .css("text-decoration", "underline")
  .hover(function () {
    $(this).addClass("sogreen");
  }, function () {
    $(this).removeClass("sogreen");
  });

:last-child

возвращает: Array
Выбираются все элементы, которые являются последними потомками своих родителей.
В примере мы выбираем последний элемент span в каждом найденном элементе div и делаем их текст красного цвета. Уменьшаем размер шрифта до 80%. При наведении курсора мыши добавляем класс, который зачеркнет текст.

$("div span:last-child")
  .css({color:"red", fontSize:"80%"})
  .hover(function () {
    $(this).addClass("solast");
  }, function () {
    $(this).removeClass("solast");
  });

:оnly-child

возвращает: Array
Выбираются все элементы, которые являются единственными потомками своего родителя. Если родитель имеет других потомков – ничего не будет выбрано.
В этом примере в каждом отобранном элементе div ищем кнопку не имеющую сестринских элементов. Ну и немного ее модифицируем, устанавливая для нее текст «Alone» и синюю рамку шириной 2 пиксела.

$("div button:only-child")
    .text("Alone").css("border", "2px blue solid");

В следующей статье мы продолжим знакомиться с селекторами jQuery…

jQuery API: Selectors – селекторы jQuery: базовые и иерархические селекторы, базовые фильтры.

Gennady — Sat, 03 May 2008 21:01:28 +0000

В первой статье по документации jQuery мы знакомились с функциями ядра библиотеки. В этой статье мы продолжим знакомиться с API jQuery, и постараемся разобраться с селекторами jQuery. Тема довольно большая, поэтому в этой статье будут приведены сведения по базовым и иерархическим селекторам, а также базовым фильтрам.

Базовые селекторы

#id

возвращает: Array
Выбирает единственный элемент с переданным атрибутом id. Если id содержит специальные символы, их необходимо экранировать с помощью обратного слэша.

Выбираем элемент с id «myDiv» (затем устанавливаем ему красную рамку шириной 3 пиксела).

$("#myDiv").css("border","3px solid red");

Выбираем элемент с id «myID.entry[1]» (затем устанавливаем ему красную рамку шириной 3 пиксела). Посмотрите каким образом некоторые символы должны быть экранированы с помощью обратного слэша.

$("#myID\\.entry\\[1\\]").css("border","3px solid red");

element

возвращает: Array
Выбирает все элементы с переданным именем.
Ищем все элементы DIV (затем устанавливаем ему красную рамку шириной 3 пиксела). Аргументом является строка с названием элемента, которые необходимо выбрать. Ссылается на tagName узлов DOM.

$("div").css("border","3px solid red");

.class

возвращает: Array
Выбирает все элементы с переданным именем класса. Аргументом является строка с именем класса. Если элемент имеет несколько имен классов, по одному из них он будет выбран.
Выбираем элементы с классом «myClass» (затем устанавливаем ему красную рамку шириной 3 пиксела).

$(".myClass").css("border","3px solid red");

*

возвращает: Array
Выбирает все элементы. В примере выбираем все элементы (включая head, body, и т.д.), затем устанавливаем им (всем) красную рамку шириной 3 пиксела.

$("*").css("border","3px solid red");

А вот простой путь, чтобы отыскать все элементы в контексте document.body.

$("*", document.body).css("border","3px solid red");

Таким образом элементы head, script, и т.д. не включаются в набор. Да, и конечно красная рамка шириной 3 пиксела…

selector1, selector2, selectorN

возвращает: Array
Собирает набор из всех элементов переданных в селекторах. Вы можете определить любое количество селекторов для объединения в единый результат. Заметьте, что порядок следования элементов в DOM и объекте jQuery не обязательно будет идентичным.
Ищем элементы, которые соответствуют любым элементам div, span и p с именем класса myClass и для всех их устанавливаем красную рамку шириной 3 пикселаааааа…

$("div,span,p.myClass").css("border","3px solid red");

А вот так можно показать порядок следования элементов в объекте jQuery (заметьте, не в HTML-коде страницы!).

var list = $("div,p,span").map(function () {
  return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));

Иерархические селекторы

ancestor descendant

возвращает: Array
Выбираются все элементы потомки элемента, определенного как предок. В общем лучше конечно на простом примере.
Ищем все элементы input, являющиеся потомками элемента form (и устанавливаем синюю рамку из точек, шириной 2 пиксела).

$("form input").css("border", "2px dotted blue");

parent > child

возвращает: Array
Выбираются все прямые наследники элемента-родителя. Опять же, лучше показать на примере.
Ищем все прямые наследники элемента с идентификатором «main» (в примере #main с желтым бэкграундом) и устанавливаем им двойную рамку красного цвета шириной в 3 пиксела.

$("#main > *").css("border", "3px double red");

prev + next

возвращает: Array
Выбираются все элементы, которые являются следующими (next) за элементом, определенным как предыдущий (prev). Смотрим на примере.
Ищем все элементы input, которые следуют непосредственно за элементом label, устанавливаем текст синего цвета и вставляем значение Labeled!

$("label + input").css("color", "blue").val("Labeled!")

prev ~ siblings

возвращает: Array
Выбираются все сестринские элементы, которые следую сразу за элементом prev. Также разберем на примере.
Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.

$("#prev ~ div").css("border", "3px groove blue");

Базовые фильтры

:first

возвращает: Array
Выбирается первый элемент соответствующего селектора.
Ищем первую строку в таблице и устанавливаем для нее наклонное начертание шрифта.

$("tr:first").css("font-style", "italic");

:last

возвращает: Array
Выбирается последний элемент соответствующего селектора.
Ищем последнюю строку в таблице, устанавливаем для нее желтый фон и жирный шрифт.

$("tr:last").css({
  backgroundColor: "yellow",
  fontWeight: "bolder"
});

:not(selector)

возвращает: Array
Отфильтровывает выбранные элементы, используя условие отрицания. На примере будет намного понятнее…
Ищем все элементы input, которые НЕ отмечены флажками выбора, а также элементы span, следующие непосредственно за ними.
Обратите внимание, что никаких изменений по клику на чекбоксах не происходит, но это вполне понятно, поскольку в пример не включена обработка событий.

$("input:not(:checked) + span")
.css("background-color", "yellow");

:even

возвращает: Array
Выбираются четные элементы. Отсчет начинается от 0.
Ищем четные строки таблицы, выбирая первую, третью и так далее. Обратите внимание еще раз: четные – потому что отбор производится по индексам, соответственно отбираются строки с индексами 0, 2, 4 и т.д.).

$("tr:even").css("background-color", "#bbbbff");

:оdd

возвращает: Array
Выбираются нечетные элементы. Отсчет начинается от 0.
Ищем нечетные строки таблицы, выбирая вторую, четвертую и так далее. Обратите внимание еще раз: нечетные – потому что отбор производится по индексам, соответственно отбираются строки с индексами 1, 3, 5 и т.д.).

$("tr:odd").css("background-color", "#bbbbff");

:eq(index)

возвращает: Array
Выбирается единственный элемент по его индексу.
Например, ищем третий элемент TD. Не забывайте, что отсчет ведется от 0.

$("td:eq(2)").css("color", "red");

:gt(index)

возвращает: Array
Выбираются все элементы с индексом больше указанного в селекторе.
В примере будут выбраны все элементы TD с индексом более 4, т.е. от 5 и более. Отсчет ведется от 0.

$("td:gt(4)").css("text-decoration", "line-through");

:lt(index)

возвращает: Array
Выбираются все элементы с индексом меньше, чем указан в селекторе.
Например ищем все элементы TD, с индексом меньше 4. Отсчет ведется от 0.

$("td:lt(4)").css("color", "red");

:header

возвращает: Array
Выбираются все элементы, которые являются заголовками, например h1, h2, h3 и так далее.
В примере мы устанавливаем серый цвет для бэкграунда и синий для текста для всех заголовков (т.е. элементов h) на странице.

$(":header")
.css({ background:'#CCC', color:'blue' });

:animated

возвращает: Array
Выбираются все элементы, которые в настоящий момент являются анимированными.
В приведенном ниже примере мы щелчком мыши по кнопке меняем цвет анимированного элемента DIV. Элементы DIV, не являющиеся в этот момент анимированными, свой цвет не изменяют.

$("#run").click(function(){
  $("div:animated").toggleClass("colored");
});
function animateIt() {
  $("#mover").slideToggle("slow", animateIt);
}
animateIt();