Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
20-03-2016, 14:46
Метод data в jQuery - «Учебник CSS»
Рейтинг:
Категория: Самоучитель CSS

Метод data в jQuery даёт нам возможность связать произвольные данные с любым объектом документа или javascript, что позволяет сделать ваш код более кратким и читаемым. Начиная с версии jQuery 1.4.3 появилась возможность использовать этот метод для объектов javascript, а также отслеживать изменения этих данных.


Основы


Начнём с того, что вы можете вызвать метод data для jQuery объекта, а также использовать функцию $.data() напрямую.


// Использование метода:
$("#myDiv").data("key","произвольное значение");
// Использование функции напрямую:
$.data($("#myDiv").get(0),"key","произвольное значение");

Функция data – это низкоуровневая реализация, которая в действительности используется при вызове метода. Метод объекта jQuery гораздо удобнее, он также позволяет включать себя в какчестве цепочки вызовов.


Также, обратите внимание, что в качестве первого параметра в функцию $.data вам необходимо передавать DOM-элемент, а не объект jQuery.


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


// Можно передать объект:
$("#myDiv").data({"name":"Stevie","age":21});
// Тоже самое:
$("#myDiv").data("name","Stevie").data("age",21);

Теперь, если вам необходимо получить сохранённые данные, вы можете вызвать функцию data, передав ей ключ в качестве параметра:


var theValue = $("#myDiv").data("age"); // 21

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


var theValue = $("div:first").data("name"); // Stevie
$("div:first").click(function(){
alert($(this).data("age"); // 21
});

В jQuery 1.4.3 также доступны HTML5-данные, хранимые в атрибутах. Это означает, что если у вас есть элемент, объявленный следующим образом:


<thumb id="thumb1" data-internal-id="221" width="95%" height="360" />

В этом случае вы можете получить данные из атрибута data-internal-id, вызвав метод $("#thumb1").data("internal-id"), что несомненно удобно при AJAX-запросах.


Использование метода data для javascript-объектов


Возможно, вы будете удивлены, но метод data также можно использовать для обычных объектов javascript. Эта функциональность официально появилась в jQuery 1.4.3.


var myObj = {};
$(myObj).data("city","Springfield");

Приведённый пример, в действительности создаёт свойство city для заданного объекта. Почему бы в таком случае не написать просто myObj.city = "Springfield"? А отличие в том, что метод data добавляет объекту несколько полезных событий, упрощающих работу с этим объектом. Например:


var progressBar = {};
$(progressBar).bind('setData',function(e,key,value){
switch(key){
case "percent":
$("#progress").width(value+"%");
$("#percentText").text(value+"%");
break;
case "color":
$("#progress").css("color",value);
break;
case "enabled":
$('#progress').toggleClass("active",value);
break;
}
});
$(progressBar).data("enabled",true).data("percent",21).data("color","green");
console.log(progressBar.enabled);

В приведённом примере мы используем метод data чтобы создать простейший API с помощью которого мы можем обновлять элемент.


Существует ещё два события, которые могут использоваться для объекта javascript:


  • getData – срабатывает перед чтением данных. Вы можете использовать его для предобработки получаемых данных. Например, для пересчёта значения.

  • changeData – срабатывает когда данные устанавливаются или изменяются. Это событие используется в плагине jQuery datalink. С его помощью можно связать данные формы с объектом javascript и работать с полями формы как со свойствами объекта.

  • За кулисами


    jQuery создаёт пустой объект (для любопытных, он называется $.cache), который и является хранилищем всех значений, которые вы сохраняете с помощью метода data. Каждому элементу из DOM, который используется с методом data, присваивается уникальный идентификатор, который затем является ключом для доступа к данным в объекте $.cache.


    jQuery хранит в этом кэше не только пользовательские данные, туда попадают также внутренние данные, обработчики событий, которые вы навешиваете с помощью функций live(), bind() и delegate(). Использование центрального хранилища делает jQuery более надёжным.


    Заключение


    Метод data – это только одна из многочисленных возможностей jQuery, которая делает жизнь веб-разработчиков проще. В сочетании с другими возможностями библиотеки, она дополняет прочную основу, на которую мы можем положиться.


    Теги: CSS jQuery data метод также помощью

    Просмотров: 569
    Комментариев: 0:   20-03-2016, 14:46
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

     
    Еще новости по теме:



    Другие новости по теме:
    Комментарии для сайта Cackle