Jquery data selector: html — Selecting element by data attribute with jQuery

атрибутов данных | Документация по jQuery Mobile API

---

Ссылка на атрибуты данных

Среда jQuery Mobile использует атрибуты HTML5 data- для обеспечения инициализации и настройки виджетов на основе разметки. Эти атрибуты совершенно необязательны; Также поддерживается вызов плагинов вручную и передача параметров напрямую. Чтобы избежать конфликтов имен с другими плагинами или фреймворками, которые также используют атрибуты data-, задайте пользовательское пространство имен, изменив ns глобальная опция.

Ссылки с data-role="button" . Кнопки на основе ввода, ссылки на панелях инструментов и элементы кнопок улучшаются автоматически, роль данных не требуется.

данные-уголки	правда | ложь
значок данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-б | проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
значок данных	слева | право | топ | дно | неттекст
data-iconshadow	правда | false Устарело в версии 1. 4.0 и будет удалено в версии 1.5.0.
встроенные данные	правда | ложь
мини-данные	правда | false — Компактная версия
тень данных	верно | ложь
тема данных	буква образца (a-z)

Пары меток и входов с type="checkbox" автоматически улучшаются, роль данных не требуется

9Образец буквы 0023 (a-z) — добавлен в элемент формы.

data-mini	правда | false — Компактная версия
роль данных	нет — предотвращает автоматическое улучшение для использования собственного элемента управления.
тема данных

Заголовок и содержимое, завернутые в контейнер с data-role="collapsible"

Строка Строка

data-collapsed	правда | ложь
текст коллапса данных	— текст, используемый для звуковой обратной связи для пользователей с программным обеспечением для чтения с экрана. По умолчанию: «щелкните, чтобы свернуть содержимое»
значок свернутого данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-б | проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
тема содержания данных	буква образца (a-z)
данные-расширить-метку-текст	— текст, используемый для звуковой обратной связи для пользователей с программным обеспечением для чтения с экрана. По умолчанию: «щелкните, чтобы развернуть содержимое»
развернутый значок данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
значок данных	слева | право | топ | дно
вставка данных	правда | ложь
мини-данные	правда | false — Компактная версия
тема данных	буква образца (a-z)

Несколько складных элементов, упакованных в контейнер с

data-role="collapsibleset"

data-collapsed-icon	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
тема содержания данных	буква образца (a-z) — устанавливает все складные элементы в наборе
развернутый значок данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
значок данных	слева | право | топ | дно | неттекст
вставка данных	правда | ложь
мини-данные	правда | false — Компактная версия
тема данных	буква образца (a-z) — устанавливает все складные элементы в наборе

Содержимое

Примечание. Устарело в версии 1.4.0 и будет удалено в версии 1.5.0.

Контейнер с data-role="content"

data-theme	буква образца (a-z)

Контейнер DIV или FIELDSET с data-role="controlgroup" . Визуально интегрируйте несколько элементов в стиле кнопок.

данные-исключение-невидимка	правда | false — указывает, следует ли исключать невидимых дочерних элементов при назначении закругленных углов
мини-данные	правда | false — Компактная версия для всех элементов контрольной группы
тема данных	буква образца (a-z)
тип данных	горизонтальный | по вертикали — Для горизонтального или вертикального выравнивания элементов

Контейнер с data-role="dialog" или связанный с data-rel="dialog" на якоре.

кнопка закрытия данных	слева | право | нет
данные-кнопка-текст	string — Текст для кнопки закрытия, только диалог. По умолчанию: «закрыть»
данные уголки	правда | ложь
кэш-памяти данных	правда | ложь
тема наложения данных	образец буквы (a-z) — тема наложения при открытии страницы в диалоговом окне
тема данных	буква образца (a-z)
заголовок данных	строка — заголовок, используемый при отображении страницы

Контейнер с data-enhance="false" или data-ajax="false"

data-enhance	правда | ложь
данные-ajax	правда | ложь

Любые элементы DOM внутри контейнера data-enhance="false" , за исключением элементов data-role="page|dialog" , будут игнорироваться во время первоначального улучшения и последующих создает события при условии, что флаг $. mobile.ignoreContentEnabled установлен до улучшения (например, в привязке mobileinit ).

Любая ссылка или элемент формы внутри контейнеров data-ajax="false"

будут игнорироваться функциями навигации платформы, если для параметра $.mobile.ignoreContentEnabled установлено значение true.

Контейнер полей

Контейнер с data-role="fieldcontain" , обернутый вокруг пары элементов метка/форма

Примечание. data-role="fieldcontain" устарело в jQuery Mobile 1.4.0 и будет удалено в 1.5.0. Вместо этого добавьте класс ui-field-contain .

Выберите с data-role="slider" и двумя option element

Образец буквы. Образец буквы.

data-mini	правда | false — Компактная версия
роль данных	нет — запрещает автоматическое улучшение для использования собственного элемента управления
тема данных	(a-z) — добавлен в элемент формы
тема дорожки данных	(a-z) — добавлен в элемент формы

Ссылка

Ссылки, в том числе с data-role="button" , и кнопки отправки формы имеют общие атрибуты

data-ajax	правда | ложь
направление данных	reverse — Обратный переход анимации (только для страницы или диалога)
кэш-памяти данных	правда | ложь
предварительная выборка данных	правда | ложь
данные-отн.	назад — для перехода на один шаг назад в истории диалог — для открытия ссылки в стиле диалога, не отслеживаемой в истории внешний — для ссылки на другой домен всплывающее окно — для открытия всплывающего окна
передача данных	фейд | флип | поток | поп | слайд | слайд вниз | исчезновение слайдов | слайд вверх | очередь | нет
данные-позиция-до	origin — Центрирует всплывающее окно по ссылке, которая его открывает Селектор jQuery — Центрирует всплывающее окно по указанному элементу Окно — Центрирует всплывающее окно в окне Примечание. Параметр доступен только при использовании с всплывающими окнами. См. также: варианты.

OL или UL с data-role="listview"

data-autodividers	правда | ложь
тема подсчета данных	буква образца (a-z) — значение по умолчанию «null», унаследовано от родителя. Устарело с версии 1.4.0 и будет удалено в версии 1.5.0.
тема-разделителя данных	буква образца (a-z) — по умолчанию «нуль», унаследовано от родителя
фильтр данных	правда | ложь
фильтр данных-заполнитель	строка
тема фильтра данных	буква образца (a-z)
тема заголовка данных	буква образца (a-z)
значок данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
вставка данных	правда | ложь
значок разделения данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
тема разделения данных	буква образца (a-z) — по умолчанию «нуль», унаследовано от родителя
тема данных	буква образца (a-z)

LI в списке

Строка

data-filtertext	— фильтровать по этому значению вместо внутреннего текста
значок данных	Главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-b| проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
роль данных	разделитель списка
тема данных	буква образца (a-z)

Атрибут data-icon применим только к элементу списка, если он содержит ссылку.

Количество LI , упакованных в контейнер с data-role="navbar"

data-iconpos	осталось | право | топ | дно | неттекст

Чтобы добавить значки к элементам панели навигации, используется атрибут data-icon , указывающий стандартную мобильную иконку для каждого элемента.

Навбары наследуют образец темы от своего родительского контейнера. Установка атрибута data-theme для панели навигации не поддерживается. Атрибут data-theme может быть установлен индивидуально для ссылок внутри панели навигации.

Контейнер с data-role="page"

data-dom-cache	правда | ложь
тема наложения данных	буква образца (a-z) — тема наложения, когда страница открывается как диалоговое окно
тема данных	буква образца (a-z) — по умолчанию «a»
название данных	строка — заголовок, используемый при отображении страницы
URL-адрес данных	URL-адрес — значение для обновления URL-адреса вместо URL-адреса, используемого для запроса страницы. Значение этого атрибута не должно быть в кодировке URI. Если ваш путь или имя файла содержит апострофы или кавычки, используйте кодировку сущности в значении, а не кодировку URL. Например, data-url="/path/to/ " Devil " s Advocate " .html"

Контейнер с data-role="popup"

.

data-corners	правда | ложь
данные-отклонение	правда | false — если установлено значение false, всплывающее окно не закрывается щелчком за пределами всплывающего окна или нажатием клавиши Escape
история данных	правда | false — устанавливает, будет ли всплывающее окно создавать элемент истории браузера при его открытии. Если установлено значение false, он не будет создавать элемент истории и, следовательно, его нельзя будет закрыть с помощью кнопки «Назад» в браузере.
тема наложения данных	образец буквы (a-z) — по умолчанию «нулевой» (прозрачный фон)
данные-позиция-до	происхождение | окно | selector — «origin» указывает, что всплывающее окно должно располагаться по центру ссылки, которая его открывает. «window» указывает, что оно должно располагаться по центру окна браузера. Если вы укажете селектор jQuery, он будет центрирован над первым элементом, возвращенным селектором, если этот элемент виден. В противном случае он будет центрирован в окне браузера.
тень данных	правда | ложь
тема данных	образец буквы (a-z) | none — унаследовано по умолчанию, «none» устанавливает прозрачность всплывающего окна
допуск данных	30,15,30,15 — Расстояние от краев окна (сверху, справа, снизу, слева)
передача данных	нет | transition — переход, используемый при появлении/исчезновении всплывающего окна.

Якорь с data-rel="popup" открывает всплывающее окно

data-position-to	origin — Центрирует всплывающее окно по ссылке, которая его открывает Селектор jQuery — Центрирует всплывающее окно по указанному элементу Окно — Центрирует всплывающее окно в окне
данные-отн.	popup — Для открытия всплывающего окна
передача данных	выцветание | флип | поток | поп | слайд | слайд вниз | исчезновение слайдов | слайд вверх | очередь | нет — Переход для использования при показе/скрытии всплывающего окна

Пары меток и входов с type="radio" автоматически улучшаются, роль данных не требуется

Образец буквы

data-mini	правда | false — Компактная версия
роль данных	нет — предотвращает автоматическое улучшение для использования собственного элемента управления.
тема данных	(a-z) — добавлен к элементу формы

Все элементы формы select автоматически улучшаются, data-role не требуется

Образец буквы.

data-divider-theme	буква образца (a-z) — по умолчанию «b» — применимо только в том случае, если поддержка optgroup используется в неродных выборках
значок данных	главная | удалить | плюс | стрелка-у | стрелка-д | карат-л | карат-т | карат-р | карат-б | проверить | шестерня | сетка | звезда | обычай | стрелка-р | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
значок данных	слева | справа | топ | дно | неттекст
встроенные данные	правда | ложь
мини-данные	правда | false — Компактная версия
родное меню данных	правда | ложь
тема наложения данных	образец буквы (a-z) — тема наложения для неродных элементов
заполнитель данных	правда | false — Можно установить на параметр элемент неродного выбора
роль данных	нет — предотвращает автоматическое улучшение для использования собственного элемента управления.
тема данных	(a-z) — добавлен в элемент формы

Входы с type="range" автоматически расширяются, роль данных не требуется

Образец буквы. 9Образец буквы 0023 (a-z) — добавлен в элемент формы.

выделение данных	правда | false — добавляет заполнение активного состояния на дорожку для обработки
мини-данные	правда | false — Компактная версия
роль данных	нет — предотвращает автоматическое улучшение для использования собственного элемента управления.
тема данных	(a-z) — добавлен в элемент формы
тема дорожки данных

Введите type="text|number|search|etc." или textarea элементы автоматически расширяются, data-role не требуется

Образец буквы.

data-clear-btn	правда | false — Добавляет кнопку очистки
данные-очистить-кнопка-текст	string — Текст для кнопки закрытия. По умолчанию: «открытый текст»
дата-мини	правда | false — Компактная версия
роль данных	нет — предотвращает автоматическое улучшение для использования собственного элемента управления.
тема данных	(a-z) — добавлен в элемент формы

Контейнер с data-role="header" или data-role="footer"

Строка Строка

data-add-back-btn	правда | false — Кнопка автоматического добавления назад, только заголовок
кнопка возврата данных текст	— только заголовок
кнопка возврата данных	образец буквы (a-z) — только заголовок
идентификатор данных	— Уникальный идентификатор. Требуется для постоянных нижних колонтитулов
данные-позиция	фиксированный
тема данных	буква образца (a-z)

Контейнер с data-role="header" или data-role="footer" плюс атрибут data-position="fixed"

data-disable-page-zoom	правда | false — возможность масштабирования пользователем страниц с фиксированными панелями инструментов
полноэкранные данные	правда | false — Настройка панелей инструментов поверх содержимого страницы
данные-нажатие-переключение	правда | false — возможность переключать видимость панели инструментов при касании/щелчке пользователя
передача данных	слайд | исчезать | none — используется переход при отображении/скрытии панели инструментов
заполнение страницы обновления данных	правда | false — обновить верхнее и нижнее заполнение страницы при изменении размера, переходе, событиях «updatelayout» (фреймворк всегда обновляет заполнение в событии «pageshow»).
данные-видимые-на-странице-показать	правда | false — видимость панели инструментов при отображении родительской страницы

Селекторы jQuery — javatpoint

следующий → ← предыдущая Селекторы jQuery используются для выбора элементов HTML и управления ими. Они являются очень важной частью библиотеки jQuery. С помощью селекторов jQuery вы можете находить или выбирать элементы HTML на основе их идентификатора, классов, атрибутов, типов и многого другого из DOM. Проще говоря, вы можете сказать, что селекторы используются для выбора одного или нескольких элементов HTML с помощью jQuery, и после выбора элемента вы можете выполнять с ним различные операции. Все селекторы jQuery начинаются со знака доллара и скобки, например. $(). Она известна как фабричная функция. Фабричная функция $() Каждый селектор jQuery начинается с этого знака $(). Этот знак известен как фабричная функция. Он использует три основных строительных блока при выборе элемента в данном документе. Серийный номер Селектор Описание 1) Имя тега: Представляет имя тега, доступное в DOM. Например: $(‘p’) выбирает все абзацы ‘p’ в документе. 2) Идентификатор тега: Представляет собой тег, доступный с определенным идентификатором в DOM. Например: $(‘#real-id’) выбирает определенный элемент в документе с идентификатором real-id. 3) Класс тега: Представляет собой тег, доступный для определенного класса в DOM. Например: $(‘real-class’) выбирает все элементы в документе, имеющие класс real-class. Давайте рассмотрим простой пример использования селектора тегов. Это выберет все элементы с именем тега , а цвет фона будет установлен на «розовый». Файл: firstjquery.html Первый пример jQuery Это первый абзац. Это второй абзац. Это третий абзац. Протестируйте сейчас Выход: Это первый абзац. Это второй абзац. Это третий абзац. Примечание: 1. Все рассмотренные выше селекторы можно использовать отдельно или в сочетании с другими селекторами. Примечание: 2. Если у вас есть конфликт с использованием знака доллара $ в какой-либо библиотеке JavaScript, вы можете использовать функцию jQuery() вместо заводской функции $(). Фабричная функция $() и функция jQuery одинаковы. Как использовать селекторы Селекторы jQuery можно использовать отдельно или в сочетании с другими селекторами. Они требуются на каждом этапе использования jQuery. Они используются для выбора именно того элемента, который вы хотите из вашего HTML-документа. Серийный номер Селектор Описание 1) Имя: Выбирает все элементы, которые соответствуют заданному имени элемента. 2) #ID: Выбирает один элемент, соответствующий заданному идентификатору. 3) .Class: Выбирает все элементы, соответствующие данному классу. 4) Универсальный(*) Выбирает все элементы, доступные в DOM. 5) Несколько элементов A, B, C Выбирает объединенные результаты всех указанных селекторов A, B и C. Различные селекторы jQuery : :root») Селектор Пример Описание * $(«*») Используется для выбора всех элементов. #id $(«#имя») Он выберет элемент с .class $(«.primary») Он выберет все элементы с class,.second $(«primary,.primary,. ) Выберет все элементы с классом «основной» или «вторичный» элемент $(«p») Выберет все p элементов. el1,el2,el3 $(«h2,div,p») Выберет все элементы h2, div и p. :first $(«p:first») Выбор первого элемента p :last $(«p:last») Выбор последнего элемента p :even $(«tr:even») Это выберет все четные элементы tr :odd $(«tr:odd») :первый дочерний элемент $(«p:первый дочерний элемент») Будут выбраны все элементы p, которые являются первыми дочерними элементами своего родителя. :first-of-type $(«p:first-of-type») первый элемент p их родителя :last-child $(«p:last-child») Он выберет все элементы p, которые являются последними дочерними элементами их родителя :last- of-type $(«p:last-of-type») Будут выбраны все p элементы, которые являются последним p элементом своего родителя :nth-child(n) $(«p:nth-child(2)») Это выберет все элементы p, которые являются вторыми потомками своего родителя :nth-last -child(n) $(«p:nth-last-child(2)») Это выберет все элементы p, которые являются вторыми дочерними элементами своего родителя, считая от последнего дочернего элемента :nth -of-type(n) $(«p:nth-of-type(2)») Будут выбраны все p элементы, которые являются вторым p элементом своего родителя :nth-last-of-type(n) $(«p:nth-last-of-type(2)») Это выберет все элементы p, которые являются 2-м элементом p их parent, считая от последнего дочернего элемента :only-child $(«p:only-child») Будут выбраны все элементы p, которые являются единственными дочерними элементами их родителя :only- of-type $(«p:only-of-type») Будут выбраны все элементы p, которые являются единственными дочерними элементами своего типа для своего родителя родитель > потомок $(«div > p») Будут выбраны все элементы p, которые являются прямыми потомками элемента div Выберет все элементы p, являющиеся потомками элемента div элемент + следующий $(«div + p») Выберет элемент p, следующий за каждым элементом div элемент ~ братья и сестры $(«div ~ p») Выбирает все элементы p, которые являются одноуровневыми элементами div выберите четвертый элемент в списке (индекс начинается с 0) :gt(no) $(«ul li:gt(3)») Выберите элементы списка с индексом больше 3 :lt(no) $(«ul li:lt(3)») Выбрать элементы списка с индексом меньше 3 :not(selector) $(«input:not(:empty)») Выбрать все непустые элементы ввода :header $(«:header») Select все элементы заголовка h2, h3 . .. :animated $(«:animated») Выбрать все анимированные элементы :focus $(«:focus») 3 который в настоящее время имеет фокус :содержит (текст) $(«:contains(‘Hello’)») Выбрать все элементы, содержащие текст «Hello» :has(selector) $(«div:has(p)») Выбрать все элементы div с элементом p :empty $(«:empty») Выбрать все пустые элементы :parent $(«:parent») 6 Выбрать все элементы, являющиеся родителем другого элемента :hidden $(«p:hidden») Выбрать все скрытые элементы p :visible $(«table:visible») Выбрать все видимые таблицы Будет выбран корневой элемент документа :lang(language) $(«p:lang(de)») Выбрать все элементы p со значением атрибута lang, начинающимся с «de » [атрибут] $(«[href]») Выбрать все элементы с атрибутом href [атрибут=значение] $(«[href=’default. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт