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

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

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

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

alert($("div").attr("id")); // div1
<div id="div1">Текст</div><br>
<div id="div2">Текст</div>

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

$("#txt1").focus(function() {
   var elem = $(this);
   if (elem.attr("value") == "[Введите текст]") {
      elem.attr("value", "");
   }
});
$("#txt1").blur(function() {
   var elem = $(this);
   if (elem.attr("value") == "") {
      elem.attr("value", "[Введите текст]");
   }
});
<input type="text" id="txt1" value="[Введите текст]">

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

$("#btn1").attr("disabled", true);
$("#btn1").attr("disabled", "disabled");

Третий формат метода 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:\/\//i;
   if (pattern.test(this.href)) {
      return "_blank";
   }
   else {
      return "_self";
   }
});
<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', true);">
val()
val(<Значение>)
val(<Массив>)

Первый формат метода позволяет получить значение параметра value для первого элемента коллекции. Выведем значение текстового поля.

alert($(":text").val());

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

var vals = $("#sel1").val() || [];
alert(vals.join(", "));

Следует заметить, что метод val() не дает представления, какой из флажков или переключателей установлен, так как возвращает значение первого элемента. Чтобы получить значение выбранного переключателя или установленного флажка, необходимо воспользоваться селектором :checked. Если элемент не найден, то возвращается значение undefined.

alert($(":radio:checked").val());

Второй формат метода val() позволяет задать значение всем элементам коллекции. Выведем текст в первом текстовом поле.

$(":text:first").val("Новое значение");

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

$(":radio").val(["male"]);

Если найден переключатель со значением "male", то он будет выбран. Рассмотрим пример установки нескольких флажков и выделения пунктов списка с множественным выбором.

$(":checkbox").val(["1", "3", "4"]);
$("select").val(["2", "value3"]);

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

Листинг 5.3. Получение значений списка с множественным выбором

<!doctype html>
<html>
<head>
<title>Получение значений списка с множественным выбором</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#btn1").click(function() { // Способ 1
      var vals = $("#sel1").val() || [];
      var count = vals.length;
      if (count > 0) {
         var elem = $("#div1").empty();
         for (var i=0; i<count; i++) {
            elem.append(vals[i] + " =&gt; " +
            $("#sel1 option[value='" + vals[i] + "']").text() +
            "<br>");
         }
      }
      else {
         $("#div1").html("Ничего не выделено");
      }
   });
   $("#btn2").click(function() { // Способ 2
      var sels = $("#sel1 option:selected");
      var count = sels.size();
      if (count > 0) {
         var elem = $("#div1").empty();
         for (var i=0; i<count; i++) {
            elem.append(sels.eq(i).val() + " =&gt; " +
            sels.eq(i).text() + "<br>");
         }
      }
      else {
         $("#div1").html("Ничего не выделено");
      }
   });
   $("#btn3").click(function() { // Способ 3
      var elem = $("#div1").empty();
      $("#sel1 option:selected").each(function() {
         elem.append(this.value + " =&gt; " + this.text + "<br>");
      });
      if (elem.text() == "") {
         elem.html("Ничего не выделено");
      }
   });
});
</script>
</head>
<body>
<select id="sel1" size="5" multiple>
<option value="1">Элемент1</option>
<option value="2">Элемент2</option>
<option value="3">Элемент3</option>
<option value="4">Элемент4</option>
<option value="5">Элемент5</option>
</select>
<div id="div1"></div>
<input type="button" value="Способ 1" id="btn1"><br>
<input type="button" value="Способ 2" id="btn2"><br>
<input type="button" value="Способ 3" id="btn3">
</body>
</html>

Итак, в этом примере представлено три способа получения значений. После щелчка на первой кнопке запустится соответствующий обработчик. С помощью строки

var vals = $("#sel1").val() || [];

мы получаем все значения выделенных пунктов списка. Если ни один пункт не выбран, то присваиваем переменной пустой массив. Далее получаем количество элементов массива и перебираем его с помощью цикла for. На каждой итерации цикла находим элемент, значение которого совпадает со значением выбранного пункта списка, и получаем текст этого пункта. У этого способа есть свой недостаток. Если внутри списка существуют пункты с повторяющимися значениями, то можно получить текст другого пункта. Однако повторяющееся значение — редко встречающееся явление, практически всегда значения пунктов являются уникальными.

Второй способ демонстрирует применение селектора :selected, а также возможность перебора элементов коллекции с помощью цикла for и метода eq(). На каждой итерации мы передаем в метод eq() индекс элемента в коллекции и получаем значение и текст пункта.

Наконец, последний способ позволяет полностью обойтись без циклов. Перебор всех элементов осуществляется с помощью метода each(). На каждой итерации внутри функции обратного вызова доступна ссылка (this) на текущий DOM-элемент. По этой причине мы можем воспользоваться свойствами value и text для получения значения и текста пункта соответственно.

Предыдущая статья Все статьи Следующая статья