Доступ к параметрам тегов

Для доступа к параметрам тегов предназначены следующие методы:

• attr() — позволяет получить или установить значение отдельных параметров тегов. Метод имеет несколько форматов:

attr(<Название параметра>)
attr(<Название параметра>, <Значение>)
attr(<Объект с параметрами>)
attr(<Название параметра>, <Функция обратного вызова>)

Первый формат метода позволяет получить значение указанного параметра для первого элемента коллекции. Если параметр не найден, то возвращается значение undefined. Получим значение параметра id первого тега <div>:

<div id="div1">Текст</div>
<div id="div2">Текст</div>

console.log( $('div').attr('id') ); // div1

Следует учитывать, что метод attr() возвращает начальное значение, заданное параметром, а не текущее значение свойства. Выведем значение параметра value текстового поля при нажатии кнопки:

<input type="text" id="txt" value="Значение по умолчанию">
<input type="button" id="btn" value="Проверить">

$('#btn').click( function() {
   console.log( 'value = ' + $('#txt').attr('value') );
});

В этом примере при нажатии кнопки мы всегда будем получать сообщение:

value = Значение по умолчанию

даже, если изменим текст внутри поля. По существу мы получаем значение свойства defaultValue, а не свойства value. Чтобы получить текущее значение свойства нужно использовать метод prop():

$('#btn').click( function() {
   console.log( 'value = ' + $('#txt').prop('value') );
});

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

Второй формат метода attr() позволяет задать значение указанному параметру для всех элементов коллекции. Можно указать строку, число или значение null. Если параметра не было, то он будет добавлен. Если указано значение null, то параметр будет удален.

Опять-таки, метод задает начальное значение параметра, а не меняет значение свойства. Чтобы изменить текущее значение свойства, следует использовать метод prop(). В качестве примера создадим текстовое поле, в котором по умолчанию будет подсказка пользователю. Если поле получит фокус ввода, то подсказка должна исчезнуть. Если в поле не было введено значение, то при потере фокуса подсказка должна опять появиться в поле:

<input type="text" id="txt" value="[Введите текст]">

$('#txt').focus( function() {
   var elem = $(this);
   if (elem.prop('value') === '[Введите текст]') {
      elem.prop('value', '');
   }
});
$('#txt').blur( function() {
   var elem = $(this);
   if (elem.prop('value') === '') {
      elem.prop('value', '[Введите текст]');
   }
});

Задать значение параметрам, которые в HTML указываются без значений (например, checked, selected или disabled), можно одним из двух способов:

<input type="button" id="btn1" value="Кнопка 1">
<input type="button" id="btn2" value="Кнопка 2">

$('#btn1').attr('disabled', 'disabled');
$('#btn2').prop('disabled', true);

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

{
   Параметр1: 'Значение1',
   Параметр2: 'Значение2',
   ...
   ПараметрN: 'ЗначениеN'
}

Зададим URL-адрес и текст подсказки всем ссылкам:

$('a').attr({
   href: 'link1.html',
   title: 'Нажми меня'
});

Четвертый формат метода attr() позволяет выборочно задать значение указанного параметра, в зависимости от каких-либо условий. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

На каждой итерации в функцию передается указатель this на текущий DOM-элемент. Чтобы задать значение параметра, необходимо внутри функции обратного вызова вернуть новое значение. Если в первом параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции. Через второй параметр доступно текущее значение параметра. В качестве примера сделаем так, чтобы все ссылки, имеющие абсолютный URL-адрес, открывались в новом окне:

$('a').attr('target', function() {
   var pattern = /^(http|https):\/\//i;
   if ( pattern.test(this.href) ) {
      return '_blank';
   }
});

• removeAttr(<Название параметра>) — удаляет указанный параметр у всех элементов коллекции. Можно указать сразу несколько параметров через пробел. В качестве примера реализуем возможность установки и снятия всех флажков при щелчках на соответствующих кнопках:

<input type="checkbox" checked> Флажок 1<br>
<input type="checkbox" checked> Флажок 2<br>
<input type="button" value="Снять все флажки"
   onclick="$(':checkbox:checked').removeAttr('checked');">
<input type="button" value="Установить все флажки"
   onclick="$(':checkbox').attr('checked', 'checked');">

Учебник по jQuery и AJAX в формате PDF