LOGO JQuery
jQuery API: Attributes - атрибуты
В сегодняшней статье попробуем разобраться, как библиотека jQuery работает с атрибутами элементов.
Как всегда, все будет пояснено на простых примерах...

.attr()

Возвращает или изменяет значение атрибутов у выбранных элементов страницы. Функция имеет четыре варианта использования:

.attr(attrName):string

возвращает значение атрибута attrName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.

Если элемент не имеет атрибута с таким именем, будет возвращено undefined.

.attr(attrName, value):jQuery Object

Атрибуту attrName будет присвоено значение value, у всех выбранных элементов.

.attr({attrName1:value1, attrName2:value2, ...}):jQuery Object

Группе аттрибутов attrName1, attrName2, ... будут присвоены значения value1, value2, ..., у всех выбранных элементов.

.attr(attrName, function(index, value)):jQuery Object

Атрибуту attrName будет присвоено значение, возвращенное пользовательской функцией

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

Функция вызывается отдельно, для каждого из выбранных элементов.
При вызове ей передаются следующие параметры:
index - позиция элемента в наборе,
value - текущее значение атрибута attrName у элемента.
// вернет имя класса у первого div-элемента на странице
$("div").attr("class");
// класс всех div-элементов на странице станет равным divEl
$("div").attr("class", "divEl");	
// класс div-элементов станет равен divEl, а title — "Див"
$("div").attr({"class":"divEl", "title":"Див"});	
// вернет подсказку элемента с классом rool. 
// Если таких элементов на странице несколько — вернет первого из них.
$(".rool").attr("title");
В этом примере мы ищем значение атрибута title первого элемента <em> на странице.
var title = $("em").attr("title");
$("div").text(title);
Откройте пример в новом окне и посмотрите исходный код

В этом примере мы устанавливаем значения некоторых атрибутов для всех элементов <img> на странице.
<style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
<img />
<img />
<img />
<div></div>
<script>
$("img").attr({
  src: "/up_images/5438028cf072f.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
Откройте пример в новом окне и посмотрите исходный код

В этом примере мы устанавливаем значение атрибута 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 object

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

В этом примере у элемента input изначально присутствует атрибут disabled со значением disabled.
$("#button_on").click(function () {
    $('input')
	.removeAttr("disabled")
	.focus()
	.val("Можно редактировать!");
    return false;
});
$("#button_off").click(function () {
    $('input')
	.attr("disabled","disabled")
	.focus()
	.val("Нельзя редактировать!");
   return false;
});
Откройте пример в новом окне и посмотрите исходный код

.val():string,array

Возвращает значение атрибута value у выбранного элемента формы.
Если выбрано несколько элементов, то значение будет взято у первого.

В случае, элемента формы <select multiple="multiple"> возвращается массив всех выбранных значений.

.val(newVal)

Атрибуту value будет присвоено значение newVal, у всех выбранных элементов.
// вернет значение элемента с идентификатором surname
$("#surname").val();	
// вернет значение первого элемента с классом surname
$(".surname").val();	
// вернет значение первого элемента формы с атрибутом name равным surname
$("input[name='surname']").val();
// присвоит значение "Задерищенко" всем элементам формы с классом surname	
$(".surname").val("Задерищенко");
В этом примере мы получаем выбранное значение элемента 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();
Откройте пример в новом окне и посмотрите исходный код

.prop()

JQuery 1.6+

Возвращает или изменяет значение свойств выбранных элементов страницы . Функция имеет четыре варианта использования:

.prop(propName):string

Возвращает значение атрибута propName у выбранного элемента.

.prop(propName, value):jQuery object

Во всех выбранных элементах, свойство propName примет значение value.

.prop({propName1:value1, propName2:value2, ...}):jQuery object

Во всех выбранных элементах изменит значения группы свойств propName1, propName2, ... сделав их равными value1, value2, ... соответственно.

.prop(propName, function(index, value)):jQuery object

Свойству propName будет присвоено значение, возвращенное пользовательской функцией.
// если первый input-элемент на странице не активен, вернет true. Иначе false.
$("input:first").prop("disabled");
//вернет активность всем input-элементам.	
$("input").prop("disabled", false);	
//сделает активным последний переключатель на странице и сделает его выбранным.
$("radio:last").prop({"disabled":false, "checked":true);
.prop() удобен для работы с атрибутами, не требующими указания значений:

checked и disabled в input-элементах

В большинстве других случаев, для работы с атрибутами лучше использовать .attr()


Сделаем все флажки неактивными:
$("button").click(function () {
    var disabled = ($(this).attr('id') == 'button_off');
    $('input[type=checkbox]').prop('disabled', disabled);
});
Откройте пример в новом окне и посмотрите исходный код

Class:

.addClass("clName1 clName2 ..."):jQuery Object

Добавляет классы clName1, clName2, ... всем выбранным элементам.

Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их.

.addClass(function(index, class)):jQuery Object

jQuery 1.4+

Добавляет классы, список которых возвращает заданная пользователем функция.

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

Функция вызывается отдельно для каждого из выбранных элементов.
При вызове ей передаются следующие параметры:
index — позиция элемента в наборе,
class — текущий класс(ы) элемента.
// добавит класс blackZone элементу с идентификатором content
$("#content").addClass("blackZone");	
// добавит класс blackZone всем элементам с классом content 
// То есть, у этих элементов будет два класса: class="content blackZone"
$(".content").addClass("blackZone");
Добавим всем div-элементам на странице класс dotted, для добавления точечной красной рамки:
<style>
.green{background-color: #66ff66;}
.gray{background-color: #aaa;}
.dotted{border:2px dotted red}
</style>
<div> 1 </div>
<div class="gray"> 2 </div>
<div class="green"> 3 </div>
<script>
    $("div").addClass("dotted");
</script>
Откройте пример в новом окне и посмотрите исходный код

.hasClass(className):boolean

Проверяет наличие класса className у выбранных элементов страницы.
Если хотя бы один из элементов содержит этот класс, то функция вернет true, иначе вернет false.

В примере мы ищем класс с именем 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()

Удаляет все классы у выбранных элементов.

.removeClass("class1 class2 ...")

Удаляет классы class1, class2, ... у выбранных элементов.

.removeClass(function(index, class))

Удаляет классы, список которых возвращает заданная пользователем функция.
Возвращаемое ей значение должно представлять из себя строку с перечислением классов через пробел.
// удалит все классы у элемента с идентификатором content
$("#content").removeClass();
// удалит классы clName1 и clName2 у элементов с классом content
$(".content").removeClass("clName1 clName2");
Удалим классы colored у всех элементов списка, кроме элемента, с индексом 2.
$("#list .item").not(':eq(1)').removeClass('colored');
Откройте пример в новом окне и посмотрите исходный код

.toggleClass(class):jQuery Object

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

В нашем примере мы переключаем (добавляем/удаляем) класс с именем 'highlight' для параграфа на котором был сделал клик.
$("p").click(function () {
  $(this).toggleClass("highlight");
});
Откройте пример в новом окне и посмотрите исходный код