Оглавление

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

Для доступа к параметрам тегов предназначены следующие методы.
attr() — позволяет получить или установить значение отдельных параметров тегов. Метод имеет несколько форматов.
attr(<Название параметра>)
attr(<Название параметра>, <3начение>)
attr(<Oбъeкт с параметрами>)
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: "3начение1",
Параметр2: "Значение2",

...
ПараметрN: "ЗначениеN"
}
Зададим URL-адрес и текст подсказки всем ссылкам.


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

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

 

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

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

 

В качестве примера установим идентификатор для DIV в зависимости от положения на странице.


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


<div>Нулевой <span></span></div>
<div>Первый <span></span></div>
<div>Второй <span></span></div>

 Результат будет таковым:

Нулевой (ID = 'div-id0')
Первый (ID = 'div-id1')
Второй (ID = 'div-id2')

 

 

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


<input type="checkbox" checked>Флажок l<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()— позволяет получить или установить значение параметра value. Метод имеет несколько форматов.
 val()
 val(<3начение>)
 val{<Массив>)


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

 

Выведем значение текстового поля.

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

 
   <input type=text size=40 name=user value="your name">


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

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

 alert(vals.join(", "));

 

<select id="sel1" multiple="multiple">
  <option selected="selected">Пункт 1</option>
  <option>Пункт 2</option>
  <option selected="selected">Пункт 3</option>
</select>

 

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

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


<input type=radio name=age value="03">
<input type=radio name=age value="04" checked>
<input type=radio name=age value="05">


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

$(":text:first").val("Ваше имя");


<input type=text size=40 name=user value="your name">


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

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


<input type=radio name=age value="male0">
<input type=radio name=age value="male1">
<input type=radio name=age value="male2">

 

 Если найден переключатель со значением "male1", то он будет выбран.

 

Рассмотрим пример установки нескольких флажков и выделения пунктов списка с множественным выбором.

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

  $("select").val(["2", "value3"]);


<input type=checkbox name="q2" value="1" ><br>
<input type=checkbox name="q2" value="2" ><br>
<input type=checkbox name="q2" value="3" ><br>
<input type=checkbox name="q2" value="4" ><br>

<select multiple="multiple">
  <option value="1">пункт 1</option>
  <option value="2">пункт 2</option>
  <option value="value3">пункт 3</option>
</select>

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

 

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

<html>
<head>
<title>Получение значений списка с множественным
выбором</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(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 для получения значения и текста пункта соответственно.

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити