How to find an element by its data attribute value using jquery

jQuery Mobile

jQuery Mobile is a touch-friendly web UI development framework that lets you develop mobile web applications that work across smartphones and tablets.  The jQuery Mobile framework builds on top of jQuery core and provides a number of facilities, including HTML and XML document object model (DOM) traversing and manipulation, handling events, performing server communication using Ajax, as well as animation and image effects for web pages. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.

Though jQuery Mobile is still in Alpha, there are some demos and documentation. It is recommended that you review the documentation and demos in and look at the demo source code in the .

At the time of this writing, the jQuery Mobile framework is an Alpha 2 version (v1.0a2). The code is in draft form and is subject to change. Yet, the existing framework is pretty solid. With an impressive set of components available in the alpha release, jQuery Mobile promises to be a great framework and tool set for developing mobile web applications.


Basic features of jQuery Mobile include:

General simplicity
The framework is simple to use. You can develop pages mainly using markup driven with minimal or no JavaScript.
Progressive enhancement and graceful degradation
While jQuery Mobile leverages the latest HTML5, CSS3, and JavaScript, not all mobile devices provide such support. jQuery Mobile philosophy is to support both high-end and less capable devices, such as those without JavaScript support, and still provide the best possible experience.
Accessibility
jQuery Mobile is designed with accessibility in mind. It has support for Accessible Rich Internet Applications (WAI-ARIA) to help make web pages accessible for visitors with disabilities using assistive technologies.
Small size
The overall size of the jQuery Mobile framework is relatively small at 12KB for the JavaScript library, 6KB for the CSS, plus some icons.
Theming
The framework also provides a theme system that allows you to provide your own application styling.

When used with toolkits such as PhoneGap (see ), which uses web technologies to build stand-alone applications, the jQuery Mobile framework can help simplify your application development.

What is data attribute and how to use it?

If you have not used an HTML5 data attribute before, then you should read this.

The data attributes allow us to add some extra information to the elements on our web page, which we can use for processing.

Any element whose attribute has a prefix (or starts with) a data- (the word data, followed by a hyphen), is a data attribute. For example, I have a &ltdiv> element and I want to attach some basic information with it, using the data attribute.

&ltdiv class="emp" data-name="arun" data-empcode="cd001">
    some text here... 
&lt/div>

I have two data attributes with the &ltdiv> element, namely, data-name and data-empcode. Each attribute has some value. Similarly, you can have multiple &ltdiv> elements, each having some unique data.

There are many ways you can extract the values associated with these (and many) data attributes. For example,

&ltdiv class="emp" data-name="arun" data-empcode="cd001">
    some text here... 
&lt/div>

&ltscript>
    var emp = document.getElementsByClassName("emp");

    var empName = emp.getAttribute("data-name");
    var empCode = emp.getAttribute("data-empcode");
    console.log(empName + ' ' + empCode);
&lt/html>

Try it

How to get all the Elements in a DIV with Specific text as ID using JavaScript

Data Selection

The DataSet contains functionality to format, filter, and sort data retrieved via the methods , , , and . These methods have the following syntax:

DataSet.get(  );
DataSet.getIds();
DataSet.forEach(callback );
DataSet.map(callback );

Where is an Object which can have the following properties:

Name Type Description
fields String An array with field names. By default, all properties of the items are emitted. When is defined, only the properties whose name is specified in will be included in the returned items.
type Object.<String, String> An object containing field names as key, and data types as value. By default, the type of the properties of an item are left unchanged. When a field type is specified, this field in the items will be converted to the specified type. This can be used for example to convert ISO strings containing a date to a JavaScript Date object, or convert strings to numbers or vice versa. The available data types are listed in section .
filter Function Items can be filtered on specific properties by providing a filter function. A filter function is executed for each of the items in the DataSet, and is called with the item as parameter. The function must return a boolean. All items for which the filter function returns true will be emitted. See section .
order String | Function Order the items by a field name or custom sort function.
returnType String Determine the type of output of the get function. Allowed values are . The refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID’s as keys.

The following example demonstrates formatting properties and filtering properties from items.

// create a DataSet
var data = new vis.DataSet();
data.add();

// retrieve formatted items
var items = data.get({
  fields: ,    // output the specified fields only
  type: {
    date: 'Date',                   // convert the date fields to Date objects
    group: 'String'                 // convert the group fields to Strings
  }
});

Getting Data

Data can be retrieved from the DataSet using the method . This method can return a single item or a list with items.

A single item can be retrieved by its id:

var item1 = dataset.get(1);

A selection of items can be retrieved by providing an array with ids:

var items = dataset.get(); // retrieve items 1, 3, and 4

All items can be retrieved by simply calling without specifying an id:

var items = dataset.get();          // retrieve all items

Data Filtering

Items can be filtered on specific properties by providing a filter function. A filter function is executed for each of the items in the DataSet, and is called with the item as parameter. The function must return a boolean. All items for which the filter function returns true will be emitted.

// retrieve all items having a property group with value 2
var group2 = dataset.get({
  filter: function (item) {
    return (item.group == 2);
  }
});

// retrieve all items having a property balance with a value above zero
var positiveBalance = dataset.get({
  filter: function (item) {
    return (item.balance > 0);
  }
});

Data Types

DataSet supports the following data types:

Name Description Examples
Boolean A JavaScript Boolean
Number A JavaScript Number
String A JavaScript String
Date A JavaScript Date object
Moment A Moment object, created with moment.js
ISODate A string containing an ISO Date
ASPDate A string containing an ASP Date

Defining multiple local pages

The previous example covered a single page. jQuery Mobile also provides support for multiple pages within a single HTML document. The multiple pages are local, internal linked «pages» that you can group together for preloading purposes. The structure of the multipage page is similar to the previous example of a single page, except that it will contain multiple page data-roles. Listing 8 shows an example.

Listing 8. Defining multiple pages within a single HTML file
<div data-role="page" id=page1">
   <div data-role="header">
    :
   </div>
   <div data-role="content">
    :
   </div>
   <div data-role="footer">
    :
   </div>
</div>
:
:
<div data-role="page" id=page2">
   <div data-role="header">
    :
   </div>
   <div data-role="content">
    :
   </div>
   <div data-role="footer">
    :
   </div>
</div>

When referencing a page that is local to the same HTML document, jQuery Mobile automatically deals with the references. When referencing an external page, jQuery Mobile will display a loading spinner. If an error is encountered, the framework will automatically display and handle an error message pop-up.

Доступ к атрибутам данных с помощью JavaScript


Вы можете получить доступ к атрибутам данных в JavaScript с помощью различных способов.

Способ №1: Использование и

Метод возвращает либо пустое значение (), либо пустую строку, если данный атрибут не существует. Вот пример использования этого метода:

var element = document.getElementById("some-block");
var blockType = element.getAttribute("data-element-type");

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

element.setAttribute("data-id", "newId");

Способ №2: Использование jQuery

Вы также можете использовать метод jQuery для доступа к атрибутам данных элемента. До версии jQuery 1.6 использовался следующий код для доступа к атрибутам данных:

var element = $("#some-block");
var blockType = element.data("element-type");
element.data("element-type", "newData");

Начиная с версии jQuery 1.6 используется версия атрибутов данных в формате camelCase (ВерблюжийРегистр). Теперь вы можете сделать то же самое, используя следующий код:

var element = $("#some-block");
var blockType = element.data("elementType");
element.data("elementType", "newData");

Краткий итог

В сегодняшней статье мы рассмотрели основные моменты, которые вам нужно знать об атрибутах данных () в HTML5. Помимо создания всплывающих подсказок и стилизации элементов с помощью селекторов атрибутов, вы можете использовать атрибуты данных для хранения и отображения пользователям различных данных, таких как уведомление о непрочитанных сообщениях и массы других.

Спасибо, что читаете нас!

Conclusion

This article introduced the extensive jQuery Mobile JavaScript framework. You learned the basics of the framework and how to write functional web pages without having to write a single line of JavaScript code. If you need to manipulate the HTML documents, you can do so with the jQuery core. You explored basic pages and navigation, toolbars, form controls, and transition effects. jQuery Mobile provides numerous methods, events, and properties that you can work with programmatically. Let this inspire you to pursue more information about UI components not covered in this article.

Related topics

  • Learn all about the jQuery Mobile framework.
  • Explore jQuery Mobile documentation and demos: articles, APIs, and demo code.
  • Access all of the jQuery documentation.
  • Mobile Graded Browser Support provides a supported browser matrix for jQuery Mobile.
  • jQuery: Plugins/Authoring shows how to write your own jQuery plugins.
  • The JavaScript Guide explains everything you need to know about using JavaScript.
  • The Mozilla Developer Network is a great resource for web developers.
  • Read What is the Document Object Model? from the W3C specification document.
  • The JavaScript tutorial DOM objects and methods covers all properties, collections, and methods of the W3C DOM.
  • Get an overview of WAI-ARIA, the Accessible Rich Internet Applications Suite, which defines a way to make web content and web applications more accessible to people with disabilities.
  • Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies.
  • «JavaScript and the Document Object Model» (developerWorks, Jul 2002) looks at the JavaScript approach to DOM and chronicles the building of a web page to which the user can add notes and edit note content.
  • Read the HTML5 Specification from the W3C.
  • To listen to interesting interviews and discussions for software developers, check out developerWorks podcasts.
  • Get PhoneGap, an open source development framework for building cross-platform mobile apps.

Construction

A DataSet can be constructed as:

var data = new vis.DataSet( )

After construction, data can be added to the DataSet using the methods and , as described in section .

The parameter is optional and is an Array with items.

The parameter is optional and is an object which can contain the following properties:

Name Type Default value Description
fieldId String «id»

The name of the field containing the id of the items.

When data is fetched from a server which uses some specific field to identify items, this field name can be specified in the DataSet using the option . For example CouchDB uses the field to identify documents.

type Object.<String, String> none Deprecated: will be removed in the future. An object containing field names as key, and data types as value. By default, the type of the properties of items are left unchanged. Item properties can be normalized by specifying a field type. This is useful for example to automatically convert stringified dates coming from a server into JavaScript Date objects. The available data types are listed in section .
queue Object | boolean none Queue data changes (‘add’, ‘update’, ‘remove’) and flush them at once. The queue can be flushed manually by calling , or can be flushed after a configured delay or maximum number of entries. When is true, a queue is created with default options. Options can be specified by providing an object:
  • The queue will be flushed automatically after an inactivity of this delay in milliseconds. Default value is .

  • When the queue exceeds the given maximum number of entries, the queue is flushed automatically. Default value is .

定义多个本地页面


前面的示例只涉及一个页面。jQuery Mobile 还支持在一个 HTML 文档中放置多个页面。这些页面是内部链接的本地页面,您可以将它们编为一组,实现预加载目的。多页页面的结构与前面的单页页面示例类似,只是它将包含多个页面数据角色。清单 8 展示了一个示例。

清单 8. 在单个 HTML 文件中定义多个页面
<div data-role="page" id=page1">
   <div data-role="header">
    :
   </div>
   <div data-role="content">
    :
   </div>
   <div data-role="footer">
    :
   </div>
</div>
:
:
<div data-role="page" id=page2">
   <div data-role="header">
    :
   </div>
   <div data-role="content">
    :
   </div>
   <div data-role="footer">
    :
   </div>
</div>

引用同一个 HTML 文档中的本地页面时,jQuery Mobile 将自动处理那些引用。引用一个外部页面时,jQuery Mobile 将显示一个加载转盘。如果遇到错误,此框架将自动显示并处理一个错误消息弹出窗口。

Структура страницы jQuery Mobile

Как показано в , обычная страница jQuery Mobile имеет три секции: header (верхний колонтитул), content area (область контента), footer (нижний колонтитул)

Листинг 1. Типичная страница jQuery Mobile
lt;div data-role="page" id="page1">
    <div data-role="header">
       <h1>HEADER</h1>
    </div
    <div data-role="content">
       <p>
       CONTENT AREA
       </p>
    </div>
    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>

На показана структура, соответствующая .

Рисунок 1. Структура HTML5-страницы jQuery Mobile

Верхний колонтитул — это место, куда разработчик обычно помещает заголовки страницы, логотипы и т. п. Секция content area — это место, куда помещаются конкретный контент веб-приложения и различные виджеты. Нижний колонтитул прекрасно подходит для навигационных элементов.

Чтобы воспользоваться преимуществами усовершенствованных функций jQuery Mobile и HTML-синтаксиса, HTML-документ jQuery Mobile должен задать HTML5-элемент doctype. Остальная часть HTML-документа состоит из следующих частей.

  • Секции и ; секция содержит ссылки на мобильные темы jQuery Mobile и CSS
  • Секция содержит реальный контент jQuery Mobile

В показан пример HTML5-документа jQuery Mobile.

Листинг 2. Структура HTML5-страницы jQuery Mobile
//Define the HTML5 doctype:

<!DOCTYPE html> 

// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:

<html> 

<head> 
    <title>Page Title</title> 
	
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
min.js"></script>
</head> 

// Define the HTML document <body> that includes the jQuery Mobile elements:

<body> 

<div data-role="page" id="page1">

    <div data-role="header">
       <h1>HEADER</h1>
    </div>

    <div data-role="content">
       <p>
       CONTENT AREA
       </p>

    </div>

    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>
</div>

<div data-role="page" id="page2">
:
:
</div>

</body>
</html>

// The footer can be turned into a navigation bar very easily, as follows:

<center>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">One</a>
<a href="index.html" data-role="button">Two</a>
<a href="index.html" data-role="button">Three</a>
<a href="index.html" data-role="button">None</a>
</div>            
</div>
</center>

На показан нижний колонтитул страницы, которая была создана в .

Рисунок 2. Нижний колонтитул страницы

Атрибуты page, header, content, footer являются необязательными: тем не менее рекомендуется их использовать, поскольку они упрощают приведение страниц в соответствие с концепцией jQuery Mobile.

Одиночные страницы, множественные страницы и связывание страниц

Одиночный HTML-документ может содержать как одну, так и несколько страниц jQuery Mobile; это указывается в атрибуте . Если разработчик имеет дело с несколькими страницами, он должен задать атрибут с уникальным идентификатором страницы, который используется для ссылок между внутренними страницами. При загрузке многостраничного HTML-документа демонстрируется только его первая страница.

Инфраструктура jQuery Mobile использует для загрузки страницы технологию Ajax, в процессе работы которой демонстрируется индикатор хода загрузки. Если загрузка оказалась успешной, то применяются улучшенные виджеты пользовательского интерфейса, страница добавляется к DOM, а также применяется анимация страницы или переходов.


Связывание и загрузка без технологии Ajax приводит к принудительному применению технологии HTTP. При использовании этого подхода разработчик не сможет получить анимированных переходов. Для загрузки без Ajax используйте для ссылки , или .

Использование элементов управления

Как можно было увидеть, в представленном примере отсутствуют элементы управления, осуществляющие возврат на главную страницу. Это не случайно, так как библиотека jQuery Mobile, если не указано явно, автоматически включает этот элемент навигации в заголовок каждой страницы второго уровня. Если же по какой-то причине этого не требуется, то в тег, описывающий верхний колонтитул, необходимо добавить атрибут data-backbtn=»false».

В jQuery Mobile есть два способа изменить название этой кнопки: прописать в теге верхнего колонтитула атрибут data-back-btn-text=»назад» или сконфигурировать глобальный объект $.mobile, установив в нем необходимое значение для данного свойства $.mobile.page.prototype.options.backBtnText.

По умолчанию, ссылка в документе отображается в виде подсвеченной строки. Если добавить в нее атрибут data-role со значением button, то ссылка превратится в кнопку, как показано ниже:

<a href="index.html" data-role="button">Link button</a>

Кнопки в области содержимого можно объединять в блоки. Код из листинга 5 отобразит на экране мобильного устройства блок кнопок, расположенных одна над другой.

Листинг 5. Блок кнопок
<div data-role="controlgroup">
<a href="index.html" data-role="button">Да</a>
<a href="index.html" data-role="button">Нет</a>
<a href="index.html" data-role="button">Выход</a>
</div>

Кнопки можно группировать не только вертикально, но и горизонтально. Для этого следует добавить в контейнер, определяющий группу кнопок, атрибут data-type со значением horizontal. При этом следует особо следить за размером строк внутри кнопок, так как при большой длине строки блок будет разнесен по разным строкам.

Вновь созданная кнопка занимает всю доступную ей ширину экрана. Тем не менее, есть возможность настроить кнопку так, чтобы её ширина определялась длиной строки. Для этого кнопки надо поместить в контейнер, и задать этому контейнеру атрибут data-inline со значением true.

Листинг 6: Встраиваемые кнопки
<div data-inline="true">
	<a href="index.html" data-role="button">Сохранить</a>
	<a href="index.html" data-role="button">Выход</a>
</div>

Верхний и нижний колонтитулы тоже могут содержать кнопки. jQuery Mobile автоматически конвертирует ссылки внутри колонтитулов в кнопки, но элементы, помеченные как кнопки, также распознаются. По умолчанию элементы внутри контейнера размещаются по порядку. В листинге 7 приведен пример размещения двух кнопок в верхнем колонтитуле.

Листинг 7. Добавление кнопок в верхний колонтитул
<div data-role="header" data-position="inline">
	<a href="index.html">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html">Save</a>
</div>

Если есть необходимость явно указать местоположение кнопки, встроенные CSS классы ui-btn-left или ui-btn-right помогут решить эту задачу. В листинге 8 приведен пример подобного решения. Кнопка “Настройки” выравнивается вправо, кнопка “назад” отключена.

Листинг 8. Позиционирование кнопок с помощью классов
<div data-role="header" data-position="inline" data-backbtn="false">
	<h1>Заголовок</h1>
	<a href="index.html" class="ui-btn-right">Настройки</a>
</div>

С этим читают