PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

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

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

• attr () — позволяет получить или установить значение отдельных параметров тегов. Метод имеет несколько форматов.
attr(Название параметра)
attr(Название параметрам 3начение)
attr(Объект с параметрами)
attr(Название параметрам Функция обратного вызова)

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

alert($("div").attr("id"));  // divl
<div id="divl">TeKCT</div><br> 
<div id="div2">TeKCT</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",
Параметры: "ЗначениеЫ"
}

Зададим URL-адрес и текст подсказки всем ссылкам.
$("a").attr( {
href: "linkl.html", title: "Нажми меня"
}
) ;

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

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

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

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

<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 = $ ( "#sell") .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. Получение значений списка с множественным выбором

<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() {
   $("#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] + " => " +
            $("#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() + " => " +
            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 + " => " + 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 = $ ("#sell") .val() || [] ; мы получаем все значения выделенных пунктов списка. Если ни один пункт не выбран, то присваиваем переменной пустой массив. Далее получаем количество элементов мас-сива и перебираем его с помощью цикла for. На каждой итерации цикла находим эле-мент, значение которого совпадает со значением выбранного пункта списка, и получаем текст этого пункта. У этого способа есть свой недостаток. Если внутри списка сущест-вуют пункты с повторяющимися значениями, то можно получить текст другого пункта. Однако повторяющееся значение — редко встречающееся явление, практически всегда значения пунктов являются уникальными.

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

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

 
Предыдущая   На главную   Следующая          

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru