Это продолжение цикла статей по документации jQuery и в сегодняшней статье попробуем разобраться, как библиотека jQuery работает с атрибутами элементов. Как всегда, все будет пояснено на простых примерах…

Attr:

attr(name)

возвращает: Object
Обеспечивает доступ к значению указанного атрибута первого элемента в наборе. Если элемент не имеет атрибута с таким именем, будет возвращено undefined.

В этом примере мы ищем значение атрибута title первого элемента <em> на странице.

var title = $("em").attr("title");
$("div").text(title);

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

attr(properties)

возвращает: jQuery
Устанавливает атрибуты всех элементов набора, используя объект, содержащий пары ключ/значение. Это пожалуй наилучший путь для того, чтобы установить большое количество атрибутов во всех отобранных элементах. Помните, что Вы можете также использовать ‘className’ как ключ, если хотите установить значение атрибута class. Также можно использовать .addClass(class) или .removeClass(class), но об этом речь пойдет немного позже.

В этом примере мы устанавливаем значения некоторых атрибутов для всех элементов <img> на странице.

$("img").attr({
  src: "/images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));

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

attr(key, value)

возвращает: jQuery
Устанавливает значение указанного атрибута для всех отобранных элементов.

В этом примере мы устанавливаем значение disabled для атрибута disabled для второго, третьего и т.д. элементов button на странице. Если конечно они есть…

$("button:gt(1)").attr("disabled","disabled");

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

attr(key, fn)

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

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

$("div").attr("id", function (arr) {
  return "div-id" + arr;
}).each(function () {
    $("span", this).html("(ID = '<strong>" + this.id + "</strong>')");
});

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

removeAttr(name)

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

В этом примере у элемента input изначально присутствует атрибут disabled со значением disabled. По щелчку мышкой на кнопке мы выбираем следующий за кнопкой элемент (это как раз input в нашем случае) и удаляем атрибут disabled. Затем передаем фокус элементу input и вставляем в него значение «Можно редактировать!».

$("button").click(function () {
  $(this).next().removeAttr("disabled")
  .focus()
  .val("Можно редактировать!");
});

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

Class:

addClass(class)

возвращает: jQuery
Указанный(е) класс(ы) добавляются в каждый из отобранных элементов.

В примере мы добавляем класс с именем ’selected’ к последнему параграфу.

$("p:last").addClass("selected");

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

hasClass(class)

возвращает: Boolean
Возвращает true, если указанный класс присутствует как минимум в одном из элементов набора.

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

$("div#result1").append($("p:first")
  .hasClass("selected").toString());
$("div#result2").append($("p:last")
  .hasClass("selected").toString());
$("div#result3").append($("p")
  .hasClass("selected").toString());

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

removeClass(class)

возвращает: jQuery
Удаляет все, или указанный(е) класс(ы) для всех элементов набора.

В примере мы удаляем класс с именем ‘blue’ из всех четных параграфов на странице (т.е. 0-й, 2-й, 4-й и т.д.).

$("p:even").removeClass("blue");

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

toggleClass(class)

возвращает: jQuery
Добавляет указанный класс к элементам набора, если такой класс не существует и удаляет этот класс, если он присутствует.

В нашем примере мы переключаем (добавляем/удаляем) класс с именем ‘highlight’ для параграфа на котором был сделал клик.

$("p").click(function () {
  $(this).toggleClass("highlight");
});

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

HTML:

html()

возвращает: String
Получает в виде строки html-код (innerHTML) для первого элемента в наборе. Эта возможность недоступна для XML-документов (хотя это работает для XHTML-документов).

В этом примере клик мышкой на параграфе конвертирует его HTML-код в текст.

$("p").click(function () {
  var htmlStr = $(this).html();
  $(this).text(htmlStr);
});

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

html(val)

возвращает: jQuery
Устанавливает html-код для всех элементов в наборе. Эта возможность недоступна для XML-документов (хотя это работает для XHTML-документов).

В этом примере мы добавляем некоторый html-код в каждый элемент div.

$("div").html("<span class='red'>Здрасссьте <strong>еще раз!</strong></span>");

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

Text:

text()

возвращает: String
Получает в виде строки текстовое содержимое всех элементов набора. Этот метод работает как с HTML, так и с XML-документами.

В этом примере мы ищем текст первого параграфа (html внутри параграфа игнорируется), а затем вставляем его как html в последний параграф, чтобы продемонстрировать, что у нас получился чистый текст. Обратите внимание, что пропало оформление жирным шрифтом красного цвета.

var str = $("p:first").text();
$("p:last").html(str);

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

text(val)

возвращает: jQuery
Устанавливает текстовое содержимое для всех элементов набора. Очень похоже на html(), но экранирует HTML, заменяя например «< » и «>» их HTML сущностями.

В этом примере мы добавляем текст в параграф (обратите внимание, что тэги b экранируются).

$("p").text("<b>Some</b> new text.");

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

Value:

val()

возвращает: String, Array
Получает содержимое атрибута value первого элемента в наборе. Начиная с версии jQuery 1.2 содержимое атрибута value возвращается для всех элементов (в ранних версиях это не работало для элементов select, multiple select и checkbox), включая элементы select и multiple select, для которого возвращается массив значений. В старых версиях библиотеки jQuery можно использовать функцию fieldValue от плагина jQueryForm. Для элементов select и checkbox – использовать :selected и :checked селекторы.

В этом примере мы получаем выбранное значение элемента select и массив, содержащий выбранные значения элемента multiple select, ну и показываем эти выбранные значения.

function displayVals() {
  var singleValues = $("#single").val();
  var multipleValues = $("#multiple").val() || [];
  $("p").html("<strong>Single:</strong> " +
  singleValues +
  " <strong>Multiple:</strong> " +
  multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();

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

val(val)

возвращает: jQuery
Устанавливает значение атрибута value для всех элементов набора. Начиная с версии jQuery 1.2 можно также устанавливать содержимое атрибута value для элементов select (в ранних версиях это не работало для элементов select, multiple select).

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

$("button").click(function () {
  var text = $(this).text();
  $("input").val(text);
});

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

Вот и все. Но впереди нас ждет еще много интересного. Например Traversing – наверное уместнее всего будет перевести это как обход объектной модели документа. Или Manipulation – манипуляции элементами в объектной модели документа. И еще многое другое.

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