Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Функции $.data() и $.removeData(): работа с данными
Функция $.data()
предназначена для сохранения и получения данных, имеет следующий формат:
$.data(<DOM-элемент>[, <Название>[, <Значение>]])
В параметре <Название>
можно указать название данных, а в параметре <Значение>
— данные, которые должны быть сохранены. Формат сохраняемых данных может быть любым. Сохраним строку под названием "myData"
в элементе с идентификатором div1
:
<div id="div1"></div>
var elem = $('#div1').get(0);
$.data(elem, 'myData', 'Строка с данными');
Сохраним числовое значение:
$.data(elem, 'myData2', 50);
Получить данные можно следующим образом:
console.log( $.data( $('#div1').get(0), 'myData') );
// Строка с данными
console.log( $.data( $('#div1').get(0), 'myData2') );
// 50
Если указан только первый параметр, то функция возвращает объект со всеми данными, сохраненными в элементе:
console.log( $.data( $('#div1').get(0) ) );
// Object { myData: "Строка с данными", myData2: 50 }
Теперь сохраним объект:
var elem = $('#div1').get(0);
$.data(elem, 'myData', { el1: 'Строка1', el2: 'Строка2' } );
Получить данные можно так:
var obj = $.data( $('#div1').get(0), 'myData' );
console.log('el1: ' + obj.el1 + '; ' + 'el2: ' + obj.el2);
// el1: Строка1; el2: Строка2
Сохраним массив:
var elem = $('#div1').get(0);
$.data( elem, 'myData', ['Строка1', 'Строка2'] );
Получить данные можно так:
var arr = $.data( $('#div1').get(0), 'myData' );
console.log(arr[0] + '; ' + arr[1]);
// Строка1; Строка2
С помощью функции $.hasData(<DOM-элемент>)
можно проверить сохранены ли какие-либо данные в элементе. Она возвращает значение true
, если данные сохранены, и false
— в противном случае:
var elem = $('#div1').get(0);
console.log( $.hasData(elem) ); // false
$.data(elem, 'myData', 'Строка с данными');
console.log( $.hasData(elem) ); // true
Функция $.removeData()
, предназначенная для удаления данных, имеет следующий формат:
$.removeData(<DOM-элемент>[, <Название>])
Если второй параметр не указан, то будут удалены все данные. Пример сохранения, получения и удаления данных приведен в листинге 1.30.
Листинг 1.30. Сохранение, получение и удаление данных
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Сохранение, получение и удаление данных</title>
</head>
<body>
<div class="container my-3">
<div id="div1"></div>
<div id="log"></div>
<input type="text" id="txt1" class="form-control my-2">
<button type="button" class="btn btn-primary" id="btn1">
Сохранить</button>
<button type="button" class="btn btn-primary" id="btn2">
Получить</button>
<button type="button" class="btn btn-primary" id="btn3">
Удалить</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click( function() {
var elem = $('#div1').get(0);
$.data( elem, 'myData', $('#txt1').val() );
$('#log').text('Данные сохранены');
});
$('#btn2').click( function() {
var elem = $('#div1').get(0);
$('#log').text( 'Данные: ' + $.data(elem, 'myData') );
});
$('#btn3').click( function() {
var elem = $('#div1').get(0);
$.removeData(elem, 'myData');
$('#log').text('Данные удалены');
});
});
</script>
</body>
</html>
Вместо функций $.data()
и $.removeData()
можно использовать методы data()
и removeData()
. Форматы метода data()
:
data([<Название>[, <Значение>]])
data(<Объект>)
Если параметр <Значение>
не указан, то функция возвращает текущие данные первого элемента коллекции, включая значения параметров data-*
. Если же параметр <Значение>
указан, то данные будут сохранены во всех элементах коллекции. Если параметры не указаны, то метод возвращает объект со всеми данными, включая значения параметров data-*
:
<div id="div1" data-test="12"></div>
$('#div1')
.data( 'myData', 'Строка с данными' )
.data( 'myData2', 50 );
console.log( $('#div1').data('myData') );
// Строка с данными
console.log( $('#div1').data('myData2') );
// 50
console.log( $('#div1').data('test') );
// 12
console.log( $('#div1').data() );
// Object { myData: "Строка с данными", myData2: 50, test: 12 }
Данные из параметров data-*
извлекаются при первом вызове метода data()
и выполняется попытка преобразовать эти данные в объекты JavaScript: в число, в логическое значение, в массив и др. В дальнейшем значения этих параметров не изменяются, все данные хранятся внутри jQuery. Чтобы получить данные в виде строки, следует воспользоваться методом attr()
:
<div id="div1" data-test="12" data-arr="[1, 2, 3]"></div>
console.log( $('#div1').data('test') );
// 12
console.log( typeof $('#div1').data('test') );
// number
console.log( typeof $('#div1').attr('data-test') );
// string
console.log( $('#div1').data('arr') );
// Array [ 1, 2, 3 ]
В параметре <Объект>
можно указать объект с названиями и их значениями:
<div id="div1" data-test-num="12"></div>
$('#div1').data( { 'my-data': 'Строка с данными', 'myData2': 50 } );
console.log( $('#div1').data() );
// Object { myData: "Строка с данными", myData2: 50, testNum: 12 }
Обратите внимание: если название содержит дефис, например, my-data
, то выполняется преобразование названия. Дефис удаляется, а первая буква слова делается прописной: myData
. С параметрами data-*
ситуация аналогичная: название data-test-num
преобразуется в testNum
.
Для удаления данных предназначен метод removeData()
. Форматы метода:
removeData([<Название>])
removeData(<Массив или строка>)
Если параметр <Название>
не указан, то будут удалены все данные, в противном случае удаляются данные соответствующие заданному названию:
<div id="div1" data-test="12"></div>
$('#div1').data( { 'myData': 'Строка с данными', 'myData2': 50 } );
$('#div1').removeData('myData');
console.log( $('#div1').data() );
// Object { myData2: 50, test: 12 }
$('#div1').removeData();
console.log( $('#div1').data() );
// Object { }
В качестве параметра можно указать массив с названиями или строку с названиями через пробел:
<div id="div1" data-test="12"></div>
$('#div1').data( { 'a': 1, 'b': 2, 'c': 3, 'd': 4 } );
$('#div1').removeData( ['a', 'b']);
console.log( $('#div1').data() );
// Object { c: 3, d: 4, test: 12 }
$('#div1').removeData('d test');
console.log( $('#div1').data() );
// Object { c: 3 }
console.log( $('#div1').data('test') );
// 12
Обратите внимание: параметр data-test
при этом не удаляется и мы можем получить его значение при следующем вызове метода data()
, хотя данные были удалены. Используйте дополнительно метод removeAttr()
для удаления параметра data-*
:
$('#div1').removeData('test').removeAttr('data-test');
console.log( $('#div1').data('test') );
// undefined
Переделаем наш предыдущий пример и используем методы data()
и removeData()
вместо функций $.data()
и $.removeData()
(листинг 1.31).
Листинг 1.31. Методы data()
и removeData()
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Методы data() и removeData()</title>
</head>
<body>
<div class="container my-3">
<div id="div1"></div>
<div id="log"></div>
<input type="text" id="txt1" class="form-control my-2">
<button type="button" class="btn btn-primary" id="btn1">
Сохранить</button>
<button type="button" class="btn btn-primary" id="btn2">
Получить</button>
<button type="button" class="btn btn-primary" id="btn3">
Удалить</button>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click( function() {
$('#div1').data( 'myData', $('#txt1').val() );
$('#log').text('Данные сохранены');
});
$('#btn2').click( function() {
$('#log').text( 'Данные: ' + $('#div1').data('myData') );
});
$('#btn3').click( function() {
$('#div1').removeData('myData');
$('#log').text('Данные удалены');
});
});
</script>
</body>
</html>
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов