Очередная статья по документации jQuery. Мы разберем как библиотека jQuery позволяет работать с объектной моделью документа. Узнаем как изменять набор элементов DOM с помощью фильтров или поиска, а также научимся формировать и изменять цепочки вызовов для перемещения по объектной модели документа не только вперед, но и назад.

Фильтрация:

eq(index)

возвращает: jQuery
Уменьшает набор элементов до единственного элемента. Позиция элементов в наборе считаются от 0 и до length – 1.

В примере мы задаем элементу div с индексом 2 синий цвет фона путем добавления класса с именем «blue».

$("div").eq(2).addClass("blue");

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

hasClass(class)

возвращает: Boolean
Контролирует текущий набор элементов на наличие указанного класса и возвращает true, если по крайней мере один из элементов набора имеет указанный класс. Это в общем-то альтернатива синтаксису, когда класс указывается как .class

В этом примере, если клик совершен по элементу div имеющему класс «protected», к нему применяется цепочка вызовов, которая заставляет этот элемент несколько раз сместиться влево-вправо.

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this).animate({ left: -10 }, 75)
    .animate({ left: 10 }, 75)
    .animate({ left: -10 }, 75)
    .animate({ left: 10 }, 75)
    .animate({ left: 0 }, 75);
});

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

filter(expr)

возвращает: jQuery
Удаляет все элементы из набора, которые не удовлетворяют требованиям выражения(ий). Этот метод используется, чтобы ограничить результаты поиска. Чтобы применить несколько фильтров одновременно, выражения надо отделить запятыми.

В этом примере мы выбираем все элементы div и устанавливаем им одинаковый фоновый цвет. Но только для элементов div, которые имеют класс с именем «middle» мы устанавливаем еще и рамку красного цвета.

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

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

filter(fn)

возвращает: jQuery
Удаляет все элементы из набора, которые не удовлетворяют требованиям функции. Функция вызывается в контексте каждого элемента в наборе (подобно $.each). Если функция возвращает false, элемент удаляется из набора, в случае true элемент сохраняется в наборе.

В этом примере мы изменяем цвет всех элементов div и затем добавляем двойную рамку красного цвета только тем из них, кто удовляетворяет требованиям. Т.е. элементу с индексом равным 1 и элементу, который имеет атрибут id=»fourth».

$("div").css("background", "#b4b0da")
  .filter(function (index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "3px double red");

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

is(expr)

возвращает: Boolean
Проверяет текущий набор элементов на соответствие выражению и возвращает true, если хотя бы один из элементов в наборе соответствует выражению. Если нет подходящих элементов или выражение некорректно, возвращается false.

В примере показано несколько возможных вариантов использования is() внутри обработчика события.

$("div").one('click', function () {
  if ($(this).is(":first-child")) {
    $("p").text("Это первый элемент div.");
  } else if ($(this).is(".blue,.red")) {
    $("p").text("Это синий или красный элемент div.");
  } else if ($(this).is(":contains('Петя')")) {
    $("p").text("Это Петя!");
  } else {
    $("p").html("А это ничего <em>особенного</em>.");
  }
  $("p").hide().slideDown("slow");
  $(this).css({"border-style":"inset",cursor:"default"});
});

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

map(callback)

возвращает: jQuery
Переводит набор элементов объекта jQuery в другой набор, представляя его в виде массива. Это можно использовать, чтобы создавать списки значений, атрибутов, значений css. Или даже создавать специальный, пользовательский селектор.

В этом примере мы строим список всех значений формы и добавляем его в элемент p.

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

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

not(expr)

возвращает: jQuery
Удаляет из набора элементы, соответствующие выражению.

В примере добавляем красную рамку всем элементам div, кроме div зеленого или синего цвета.

$("div").not(".green, #blueone")
              .css("border-color", "red");

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

slice(start, end)

возвращает: jQuery
Отбирает «поднабор» из набора элементов. Работает так же как и встроенный метод slice.

В этом примере часть элементов div окрашивается в желтый цвет случайным образом.

function colorEm() {
  var $div = $("div");
  var start = Math.floor(Math.random()
    * $div.length);
  var end = Math.floor(Math.random()
    * ($div.length - start)) + start + 1;
  if (end == $div.length) end = undefined;
  $div.css("background", "");
  if (end)
    $div.slice(start, end)
    .css("background", "yellow");
  else
    $div.slice(start)
    .css("background", "yellow");
  $("span").text('$("div")
  .slice(' + start + (end ? ', ' + end : '') + ')
  .css("background", "yellow");');
}
$("button").click(colorEm);

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

Поиск:

add(expr)

возвращает: jQuery
Добавляет в уже существующий набор дополнительные элементы, которые удовлетворяют выражению.
В примере мы отыскиваем все элементы div и устанавливаем им рамку красного цвета. Затем добавляем все параграфы в уже существующий объект jQuery и устанавливаем фон желтого цвета. Обратите внимание, что для параграфа красная рамка не была установлена, поскольку эта операция выполнялась ДО добавления этих элементов в набор.

$("div").css("border", "2px solid red")
  .add("p")
  .css("background", "yellow");

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

children(expr)

возвращает: jQuery
Получает набор элементов, содержащий всех уникальных непосредственных потомков для каждого элемента набора. Этот набор может быть дополнительно отфильтрован с помощью выражения (опционально). Отметьте для себя, что в то время как parents() «видит» все родительские элементы, children() «видит» только непосредственных потомков.

В этом примере мы ищем всех непосредственных потомков элемента на котором был совершен клик.

$("#container").click(function (e) {
  $("*").removeClass("hilite");
  var $kids = $(e.target).children();
  var len = $kids.addClass("hilite").length;

  $("#results span:first").text(len);
  $("#results span:last").text(e.target.tagName);

  e.preventDefault();
  return false;
});

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

contents()

возвращает: jQuery
Отыскивает все дочерние узлы в наборе элементов (включая текстовые) или в содержимом документа, если он представлен как фрейм.

В примере мы отыскиваем все текстовые узлы в параграфе и «обертываем» их в тэг b.

$("p").contents().not("[nodeType=1]").wrap("<b/>");

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

find(expr)

возвращает: jQuery
Осуществляет поиск в наборе элементов, отыскивая те из них, которые удовлетворяют выражению. Это хороший способ отыскивать дополнительные потомки среди тех элементов, которые уже содержатся в наборе. Выражение может быть записано с использованием синтаксиса селекторов CSS 1-3.

В этом примере поиск элементов span производится в наборе всех элементов p. По другому это можно записать как $(«p span»)

$("p").find("span").css('color','red');

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

next(expr)

возвращает: jQuery
Получает набор элементов, содержащий уникальные сестринские элементы, следующие непосредственно за указанным элементом. Причем для всех элементов в наборе. Обратите внимание – именно следующий непосредственно за нужным элементом.

В этом примере мы отыскиваем сестринские элементы, следующие непосредственно за элементами button, которые имеют значение атрибута disabled = disabled и изменяем текст этих (следующих за кнопками) элементов на «this button is disabled».

$("button[disabled]").next()
  .text("this button is disabled");

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

nextAll(expr)

возвращает: jQuery
Отыскивает все сестринские элементы после текущего элемента. Опционально можно использовать выражение, чтобы дополнительно отфильтровать набор элементов.

В этом примере мы определяем все элементы div после первого и назначаем им класс с именем after.

$("div:first").nextAll().addClass("after");

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

parent(expr)

возвращает: jQuery
Получает набор элементов, содержащий уникальных «родителей» для элементов набора. Опционально можно использовать выражение для дополнительной фильтрации.

В примере мы показываем «родителя» каждого элемента как (parent > child).

$("*", document.body).each(function () {
  var parentTag = $(this).parent().get(0).tagName;
  $(this).prepend(document.createTextNode(parentTag + " > "));
});

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

parents(expr)

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

В этом примере мы ищем все элементы-предки для содержимого элемента span, с помощью изученных ранее методов преобразуем эти данные в строку и добавляем к тэгу b.

var parentEls = $("b").parents()
  .map(function () {
    return this.tagName;
  }).get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");

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

prev(expr)

возвращает: jQuery
Получает набор элементов, содержащий уникальные предыдущие сестринские элементы для всех элементов существующего набора. Опционально можно использовать выражение для дополнительной фильтрации. Обратите внимание, что возвращается только непосредственно предыдущий сестринский элемент.

В этом примере мы каждый раз по клику на кнопке находим непосредственно предыдущий сестринский элемент для каждого элемента div.

var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
  $curr = $curr.prev();
  $("div").css("background", "");
  $curr.css("background", "#f99");
});

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

prevAll(expr)

возвращает: jQuery
Отыскивает все сестринские элементы до текущего элемента. Опционально можно использовать выражение, чтобы дополнительно отфильтровать набор элементов.

В этом примере мы определяем все элементы div перед последним и назначаем им класс с именем before.

$("div:last").prevAll().addClass("before");

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

siblings(expr)

возвращает: jQuery
Получает набор элементов, содержащий все уникальные сестринские элементы для всех элементов существующего набора. Опционально можно использовать выражение, чтобы дополнительно отфильтровать набор элементов.

В примере мы ищем уникальные сестринские элементы для всех элементов li желтого цвета в трех списках (т.е. включая другие элементы li, если они подходят).

var len = $(".hilite").siblings()
  .css("color", "red")
  .length;
$("b").text(len);

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

Формирование цепочки:

andSelf()

возвращает: jQuery
Добавляет предыдущий набор к текущему набору. Можно использовать при обходе элементов и затем добавлении чего-либо, что было отобрано в предыдущем обходе.

На примере будет понятнее: мы ищем все элементы div и все все элементы p внутри них, а затем назначаем им два имени класса. Но, обратите внимание, если в первой строке мы добавили к набору элементов p еще и предыдущий div (у всех появилась рамка красного цвета), то во второй строке мы добавили класс, определяющий цвет фона только для элементов p внутри div, но никак не для самого элемента div.

$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");

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

end()

возвращает: jQuery
Возвращает набор элементов к его предыдущему состоянию, до последней «деструктивной» операции над набором элементов. Если же такой операции не производилось, будет возвращен пустой набор. «Деструктивная» операция – любая операция, изменяющая существующий набор элементов. Это все Traversing функции, которые возвращают объект jQuery (add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings и slice), а также функция clone() из раздела Manipulation.

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

  • сначала мы выбираем все параграфы;
  • вызываем showTags с аргументом 0 и видим, что параграфов обнаружилось ровно 2 штуки;
  • отыскиваем все элементы span внутри параграфов;
  • вызываем showTags с аргументом 1 и видим, что span внутри p нашлось 5 штук;
  • походу зададим им css-свойство background (желтого цвета им!);
  • вот теперь и end() – вернулись к предыдущему набору (т.е. там, где p);
  • вызываем showTags с аргументом 2 и видим, что действительно вернулись – p = 2 штуки!;
  • последнее – применяем стиль italic для шрифта в параграфах – и действительно, все буквы наклонились, а не только в тэгах span, что еще раз подтверждает, что мы действительно вернулись к предыдущему набору.
jQuery.fn.showTags = function (n) {
  var tags = this.map(function () {
    return this.tagName;
  })
  .get().join(", ");
  $("b:eq(" + n + ")").text(tags);
  return this;
};
$("p").showTags(0)
  .find("span")
  .showTags(1)
  .css("background", "yellow")
  .end()
  .showTags(2)
  .css("font-style", "italic");

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

Ну, наверное на сегодня достаточно. Продолжим в следующий раз, когда будем разбирать манипуляции с объектной моделью документа.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru