Методы доступа к параметрам тегов

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


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

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

alert($("div").attr("id"));   //  div1

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

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

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

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

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

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

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

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

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

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

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

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

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

$("а").attr("target", function() {
var pattern = /^http:\/\//i;
if (pattern.test(this.href)) {
return "_blank";
} else {
return "_self";

});

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

<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());

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

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

<script type="text/javascript">
$(document).ready(function() {

$("#btnl").click(function() { // Способ 1
var vals = $ ("#sell").val() || [] ;
var count = vals.length;

if (count > 0) {
var elem = $("#div1").empty();
for (var i=0; i<count; i++) {
elem.append(vals[i] + " => " +
$("#sell option[value='" + vals[i] + "']").text() + "<br>");
}
}
else {
$("#div1").html("Ничего не выделено");
}
});

//-----------------------------------------------------------------------------
$ ("#btn2").click(function() { // Способ 2
var sсls = $("#sell option:selected");
var count = sсls.size ();
if (count > 0) {
var elem = $("#div1").empty();
for (var i=0; i<count; i++) {
elem.append(sсls.eq(i).val() + " => " + sсls.eq(i).text() + "<br>");
}
}
else {
$("#div1").html("Ничего не выделено");
}
});

//-----------------------------------------------------------------------------

$ ("#btn3").click(function() { // Способ З
var elem = $("#div1").empty();
$("#sell option:selected").each(function() {
elem.append(this.value + " => " + this.text + "<br>");
});
if (elem.text() == "") {
elem.html("Ничего не  выделено");
}
});
});
</script>

</head>
<body>
<select id="sell" size="5" multiple>
<option value="l">Элeмeнтl</option>
<option value="2">Элeмeнт2</option>
<option value="3">ЭлeмeнтЗ</option>
<option value="4">Элeмeнт4</option>
<option value="5">Элeмeнт5</option>
</select>

<div id="div1"></div>
<input type= "button" value= "Способ 1" id="btnl"><br>
<input type= "button" value= "Способ 2" id="btn2"><br>
<input type="button" value="Способ 3" id="btn3">
</body>
</html>

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *