jQuery.data

« Обратно к странице внутренних функций

[редактировать]

jQuery.data( элемент )

Возвращает уникальный идентификатор элемента.
Как правило, эта функция используется внутренне. Данный метод вызывается автоматические при необходимости, когда используется метод data().
Аргументы:

элемент Элемент
Интересующий элемент DOM.
Примеры:

Получает идентификатор элемента.

    $(document.body).click(function(e) {
      var id = jQuery.data(e.target);
      $("span").text(id);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function(e) {
      var id = jQuery.data(e.target);
      $("span").text(id);
    });

  });
  </script>
  <style>

  div { margin:5px; background:yellow; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>A div</div>
  <div>Another</div>

  <p>The id of this div is <span>?</span></p>
</body>
</html>
Name Type

[редактировать]

jQuery.data( элемент, имя )

Возвращает значение , которое хранится в элементе под определенным именем.
Arguments:

элемент Элемент
Интересующий элемент DOM.
имя Строка
Имя элемента в котором хранятся данные.
Примеры:

Получение данных хранящихся в элементе под именем «blah».

    $("button").click(function(e) {
      var adiv = $("div").get(0);
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = jQuery.data(adiv, "blah");
          break;
        case 1 :
          jQuery.data(adiv, "blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          jQuery.data(adiv, "blah", 86);
          value = "Stored!";
          break;
        case 3 :
          jQuery.removeData(adiv);
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("button").click(function(e) {
      var adiv = $("div").get(0);
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = jQuery.data(adiv, "blah");
          break;
        case 1 :
          jQuery.data(adiv, "blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          jQuery.data(adiv, "blah", 86);
          value = "Stored!";
          break;
        case 3 :
          jQuery.removeData(adiv);
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });
  </script>

  <style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>A div</div>

  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>

  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>

</body>
</html>
Name Type

[редактировать]

jQuery.data( элемент, имя, значение )

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

 var obj = jQuery.data($("#target").get(0), "pluginname", {});
 obj[...] = ...
Аргументы:

элемент Элемент
Интересующий элемент DOM.
имя Строка
Имя элемента в котором хранятся данные.
значение Any
Значение.
Примеры:

Сохраняет и получает значение в/из элемента div.

    var adiv = $("div").get(0);
    jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(adiv, "test").first);
    $("span:last").text(jQuery.data(adiv, "test").last);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    var adiv = $("div").get(0);
    jQuery.data(adiv, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(adiv, "test").first);
    $("span:last").text(jQuery.data(adiv, "test").last);

  });
  </script>

  <style>
  div { color:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <div>
    The values stored were
    <span></span>

    and
    <span></span>
  </div>
</body>
</html>
Name Type