Комментарий: Может быть, когда вы используете jQuery Mobile, вы часто увидите использование роли данных, данных и т. Д. Это пользовательские атрибуты HTML5. Эта статья собрала некоторые. Друзья, которые это нужно, могут ссылаться на это.
Может быть, когда вы используете jQuery Mobile, вы часто увидите роли данных, данных и т. Д., Например: Следующий код может достичь эффекта заголовка:
<div Data-role = "Заголовок">
<h1> Я название </h1>
</div>
Просмотрите свой мобильный телефон, эффект заключается в следующем:
Почему вы можете достичь эффекта черного внизу и сосредоточить текст, написав рол данных = заголовок?
Эта статья предоставляет самый простой способ его реализации, чтобы каждый мог иметь интуитивное понимание этих использования.
Мы пишем HTML-страницу, чтобы настроить атрибут Data-CHB = заголовок. Мы надеемся, что цвет фона областей Div с этим атрибутом черный, текст белый, а центр отображается; Div, у которого нет атрибута Data-CHB, отображается в режиме по умолчанию. HTML -код выглядит следующим образом:
<тело>
<div Data-chb = "заголовок">
<h1> Я использовал div из пользовательского атрибута данных </h1>
</div>
<br/>
<div>
Я не использовал Data-CHB для настройки атрибутов, поэтому я бы показал их так, как они должны;
</div>
</body>
Чтобы достичь эффекта отображения цвета черного фона, белого текста и центрального дисплея, мы определяем следующий CSS:
<style>
.ui_header {
фоновый цвет: черный;
Текст-альбом: Центр;
Цвет: белый;
Граница: 1PX SOLID #000;
}
</style>
Затем мы используем следующий метод JS для динамического добавления определений CSS при загрузке страницы, и изменяем стиль отображения Div с атрибутом Data-CHB:
<script type = "text/javascript">
window.onload = function () {
varelems = document.getElementsbytagname ("div");
if (elems! = null && elems.length> 0) {
var длина = elems.length;
// переливание всех элементов управления div
для (var i = 0; i <length; i ++) {
var elem = elems [i];
// Получить пользовательские свойства управления
var cumentattr = elem.dataset.chb;
// Вы также можете получить пользовательские свойства по следующему методу
// var cumentattr = elem.dataset ["CHB"];
// Если это значение заголовка, которое мы предопределили, это означает, что его необходимо обработать
if (cumentattr == "Заголовок") {
// Добавить стиль
elem.setattribute ("class", "ui_header");
}
}
}
}
</script>
На последней странице отображается следующий эффект:
Люди всегда любят добавлять пользовательские свойства в теги HTML для хранения и манипулирования данными. Но проблема с этим в том, что вы не знаете, будут ли другие сценарии сбросить ваши пользовательские свойства в будущем. Кроме того, ваш HTML -синтаксис не соответствует спецификациям HTML, а также другим побочным эффектам. Вот почему вы добавили пользовательское свойство данных в спецификацию HTML5, и вы можете сделать с ним много полезных вещей.
Вы можете прочитать подробные спецификации HTML5, но использование этого пользовательского атрибута данных очень просто. Вы можете добавить любой атрибут, начиная с данных, в тег HTML. Эти атрибуты не отображаются на странице. Это не повлияет на макет и стиль страницы, но он читается и доступно для записи.
Следующий фрагмент представляет собой действительный тег HTML5:
<div
data-myid = "3e4ae6c4e"> некоторые потрясающие данные </div>
Но как вы прочитали эти данные? Вы, безусловно, можете выполнить через элементы страницы, чтобы прочитать желаемые свойства, но у JQuery есть встроенные методы для манипулирования этими свойствами. Используйте метод jQuery .data () для доступа к этим свойствам данных. Одним из методов является .data (OBJ), который появляется после версии JQUERY 1.4.3, и он может вернуть соответствующий атрибут данных.
Например, вы можете использовать следующий метод записи для чтения значения атрибута Data-Myid:
var myId = jQuery ("#awesome"). Data ('myid');
console.log (myid); Вы также можете использовать синтаксис JSON в свойстве Data-*, например, если вы напишете следующий HTML:
<div Data-awesome = '{"game": "on"}'> </div>
Вы можете напрямую получить доступ к этим данным через JS. Через ключевое значение JSON, вы можете получить соответствующее значение:
var gamestatus = jQuery ("#awesome-json"). Data ('Awesome'). Game;
console.log (gamestatus); Вы также можете назначить значения атрибуту Data-* непосредственно через метод .data (ключ, значение). Важно, на что вам нужно обратить внимание,-это то, что эти атрибуты данных должны быть связаны с элементом, в котором они находятся, и не рассматривать их как инструменты хранения для хранения чего-либо.
Переводчик добавляет: Хотя Data-*-это атрибут, который появляется только в HTML5, jQuery является универсальным, поэтому на страницах без HTML5 или браузерах вы все равно можете использовать метод .data (OBJ) для манипулирования данными.