Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Доступ к параметрам тегов
Для доступа к параметрам тегов предназначены следующие методы:
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');">
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов