Just jQuery The Core UI
| Указатель статей |
|---|
| Just jQuery The Core UI — Селекторы |
| Объединение селекторов типов |
Страница 1 из 2
Селекторы — это то, что jQuery использует для выбора определенных объектов в DOM. Хотя это может начаться достаточно просто, это может показаться сложным в других примерах тестирования. Хитрость заключается в том, чтобы всегда помнить, что делает селектор.
Это отрывок из моей книги Just jQuery The Core UI .
купить на Амазоне
- Понимание jQuery
- Базовые CSS-селекторы jQuery
Извлечение: DOM - Дополнительные селекторы
Извлечение: основные селекторы - Объект JQuery
- Фильтры
- Фильтры обхода DOM
- Изменение объектов DOM
Извлечение: изменение DOM - Создание объектов и изменение иерархии DOM
- Работа с данными
- Формы
- Очереди функций ***НОВИНКА!!!
- Анимация
- Пользовательский интерфейс jQuery
- Пользовательский элемент управления пользовательского интерфейса jQuery
- Плагины jQuery
- Тестирование с помощью QUnit
- Эпилог A Бонусная функция
Также доступен:
купить на Amazon
Одним из основных применений jQuery является поиск наборов объектов DOM, чтобы мы могли работать с ними.
Хотя это начинается достаточно просто, это может стать очень сложным. Освоение использования селекторов — это первый этап становления экспертом по jQuery. Второй этап — выяснить, как внести изменения в найденные элементы.
В этой главе мы сосредоточимся на поиске элементов, оставив манипуляции с ними в другой главе. Конечно, jQuery бесполезен, если все, что вы можете сделать, это найти элементы, но это первый и необходимый шаг.
Базовые селекторы
В идеальном мире любой элемент или соответствующий ему объект DOM было бы легко найти, поскольку он имел бы уникальный идентификатор. Даже наборы объектов DOM, которые имеют набор общих свойств, должно быть легко найти, потому что все они должны принадлежать к одному и тому же классу.
Прежде чем углубляться, стоит сказать, что три наиболее часто используемых селектора jQuery представлены в начале главы 2:
name все теги типа
#name одиночный тег с номером
.
.name все теги с
Так, например:
$('дел') выбирает все объекты DOM, соответствующие элементам div;
$('#мидив') выбирает один элемент с идентификатором, установленным на mydiv;
$('.bigdiv') выбирает все элементы с классом bigdiv.
Для многих пользователей jQuery нужны только эти селекторы, потому что в идеальном мире вы могли бы найти любой нужный вам элемент, используя только их.
Причина в том, что если вы создаете рассматриваемый HTML-код и заранее знаете, что вам нужно найти конкретный элемент, вы должны присвоить ему уникальный идентификатор. Если бы вы знали, что вам нужно найти набор элементов, вы бы дали им имя класса. Другими словами, если вы отвечаете за HTML, вы почти всегда можете организовать элементы, которые вы хотите легко найти, используя jQuery.
Итак, когда же возникает потребность в сложном или изощренном селекторе?
Ответ: когда вы вообще не отвечаете за создание HTML.
Это может быть связано с тем, что HTML получен с веб-страницы, которую вы не контролируете, или с созданием HTML с помощью CMS (системы управления контентом), шаблона или функции JavaScript.
Другая распространенная ситуация, когда HTML-код для большого количества страниц был сгенерирован в прошлом, и его изменение заняло бы слишком много времени. В этом случае вы можете использовать функцию JavaScript для систематического изменения, например, для добавления нового логотипа. В этом случае маловероятно, что элементы, которые вам нужно изменить, будут иметь установленные идентификаторы или атрибуты класса.
Другими словами, иногда невозможно или непросто изменить HTML так, чтобы все элементы, которые вы хотите выбрать, имели идентификаторы или принадлежали к одному классу. В таких случаях у вас может не быть другой альтернативы, кроме как использовать сложный селектор для выбора элементов HTML на основе их типа и их отношения к другим элементам на странице.
Далее следует полное введение в набор селекторов CSS, поддерживаемых jQuery.
Селекторы типа
После того, как вы выйдете за рамки трех основных селекторов, вам понадобится основа для организации вещей — без основы все выглядит как частный случай.
Прежде чем продолжить, стоит помнить, что jQuery всегда возвращает массив элементов, соответствующих селектору, даже если есть только одно совпадение. Также стоит помнить, что многие методы jQuery работают с первым элементом массива, что значительно упрощает работу с одним элементом, или со всеми элементами.
Мы уже знаем, что основным селектором является селектор типа, то есть имя, которое выбирает все элементы, соответствующие <имя>
.
Все остальные селекторы принимают форму дополнительных условий для этого базового селектора.Например:
$("р") выбирает элементы, соответствующие всем тегам
. Все остальные селекторы являются модификациями и расширениями этого базового селектора.
Существует также универсальный селектор типа, звездочка *, который соответствует любому типу элемента. Поначалу это может показаться не очень полезным, но часто используется в более крупных селекторах для обозначения любого типа элемента, удовлетворяющего другим условиям. Это станет ясно через мгновение.
Селектор базового типа может быть модифицирован дополнительными условиями, обычно обозначаемыми двоеточием, квадратными скобками или другим специальным символом. Например, если вы хотите указать тип с определенным идентификатором, вы можете написать:
п#имя
, чтобы выбрать все элементы
с идентификатором, равным имени.
Конечно, может быть только один элемент с идентификатором, равным имени, поэтому вам не нужно указывать тип.
Это можно сделать с помощью универсального селектора типа, то есть:
*#имя
выбирает любой тип элемента с идентификатором, равным имени.
По соглашению, если вы не укажете тип, предполагается универсальный селектор типа. Это означает, что вы можете просто написать:
#имя
означает:
*#имя
Теперь вы можете видеть, что селектор id является частным случаем селектора более общего типа.
Точно так же селектор .class является сокращением для:
*.имя
, который выбирает все элементы с атрибутом класса, равным имени.
Обычно селектор класса:
Т.имя
, который выбирает все элементы типа T с установленным классом name.
Предыдущая — Следующая >>
Средство выбора диапазона дат — JavaScript Библиотека выбора даты и времени
Первоначально созданное для отчетов в Improvely, средство выбора диапазона дат можно прикрепить к любому элементу веб-страницы, чтобы открыть два календаря для выбора дат и времени.
или предопределенные диапазоны, такие как «Последние 30 дней».
Для начала включите файлы jQuery, Moment.js и Date Range Picker на свою веб-страницу:
Затем прикрепите средство выбора диапазона дат к тому, что вы хотите вызвать:
Код:
Производит:
Вы можете настроить средство выбора диапазона дат с помощью параметров и получать уведомления, когда пользователь выбирает новые даты, предоставляя функцию обратного вызова.
Код:
Производит:
Код:
Производит:
Код:
Производит:
Код:
Продукция:
Код:
Производит:
-
startDate(Дата или строка) Начальная дата первоначально выбранного диапазона дат. Если вы предоставляете строку, она должна соответствовать строке формата даты, заданной в настройках локали -
endDate: (Дата или строка) Дата окончания первоначально выбранного диапазона дат. -
minDate: (Дата или строка) Самая ранняя дата, которую может выбрать пользователь. -
maxDate: (Дата или строка) Последняя дата, которую может выбрать пользователь. -
maxSpan: (объект) Максимальный интервал между выбранными датами начала и окончания. ОтметьтеmaxSpanmomentпозволит вам добавить к дате. -
showDropdowns: (true/false) Показывать поля выбора года и месяца над календарями для перехода к определенному месяцу и году. -
минГод: (число) Минимальный год, отображаемый в раскрывающихся списках, когда для параметраshowDropdownsустановлено значение true. -
maxYear: (число) Максимальный год, отображаемый в раскрывающихся списках, когда для параметраshowDropdownsустановлено значение true. -
showWeekNumbers: (true/false) Показывать локализованные номера недель в начале каждой недели в календарях. -
showISOWeekNumbers: (true/false) Показывать номера недель ISO в начале каждой недели в календарях. -
timePicker: (true/false) Добавляет поля выбора для выбора времени в дополнение к датам. -
timePickerIncrement: (число) Увеличение списка выбора минут для времени (т. е. 30, чтобы разрешить выбор только времени, оканчивающегося на 0 или 30). -
timePicker24Hour: (true/false) Использовать 24-часовой формат вместо 12-часового, удаляя выбор AM/PM. -
timePickerSeconds: (true/false) Показать секунды в timePicker. -
диапазонов: (объект) Установите предопределенные диапазоны дат, из которых пользователь может выбирать. Каждый ключ — это метка диапазона, а его значение — массив с двумя датами, представляющими границы диапазона. Нажмите диапазоновв генераторе конфигурации для примера. -
showCustomRangeLabel: (true/false) Отображает «Пользовательский диапазон» в конец списка предопределенных диапазонов, когда используется опциядиапазонов. Эта опция будет выделена всякий раз, когда текущий выбор диапазона дат не соответствует одному из предопределенных диапазонов. При нажатии на нее отобразятся календари для выбора нового диапазона. -
alwaysShowCalendars: (true/false) Обычно, если вы используете параметрдиапазоновдля указания предопределенных диапазонов дат, календари для выбора пользовательского диапазона дат не отображаются, пока пользователь не нажмет «Пользовательский диапазон». Если для этого параметра установлено значение true, вместо него всегда отображаются календари для выбора пользовательского диапазона дат. -
открывает: (‘left’/’right’/’center’) Указывает, выровнено ли средство выбора по левому краю, по правому краю или по центру под HTML-элементом, к которому оно прикреплено. -
удаляет: (‘вниз’/’вверх’/’авто’) Появляется ли средство выбора ниже (по умолчанию) или над элементом HTML, к которому оно прикреплено. -
buttonClasses: (строка) имена классов CSS, которые будут добавлены к кнопкам применения и отмены. -
applyButtonClasses: (строка) имена классов CSS, которые будут добавлены только к кнопке «Применить». -
cancelButtonClasses: (строка) имена классов CSS, которые будут добавлены только к кнопке отмены. -
языковой стандарт: (объект) Позволяет предоставлять локализованные строки для кнопок и меток, настраивать формат даты и изменять первый день недели для календарей. Отметьтелокальв генераторе конфигурации, чтобы увидеть, как чтобы настроить эти параметры. -
singleDatePicker: (true/false) Показать только один календарь для выбора одной даты вместо средства выбора диапазона с двумя календарями. Даты начала и окончания, указанные для вашего обратного вызова, будут одной и той же выбранной датой. -
autoApply: (true/false) Скройте кнопки «Применить» и «Отменить» и автоматически примените новый диапазон дат, как только будут нажаты две даты. -
linkedCalendars: (true/false) Если этот параметр включен, два отображаемых календаря всегда будут отображаться для двух последовательных месяцев (т. е. января и февраля), и оба будут продвигаться вперед при нажатии стрелок влево или вправо над календарями. При отключении два календаря могут быть расширены по отдельности и отображать любой месяц/год. -
isInvalidDate: (функция) Функция, которая передается каждую дату в двух календари перед их отображением и могут возвращать значение true или false, чтобы указать, эта дата должна быть доступна для выбора или нет. -
isCustomDate: (функция) Функция, которая передается каждую дату в двух календари до их отображения и может возвращать строку или массив имен классов CSS применить к ячейке календаря этой даты. -
autoUpdateInput: (true/false) Указывает, должно ли средство выбора диапазона дат автоматически обновлять значение элемента -
parentEl: (строка) селектор jQuery родительского элемента, к которому будет добавлено средство выбора диапазона дат, если оно не указано, это будет «тело»
Если вы предоставляете строку, она должна соответствовать строке формата даты, заданной в настройках локали 
Каждый ключ — это метка диапазона, а его значение — массив с двумя датами, представляющими границы диапазона. Нажмите 
Если для этого параметра установлено значение true, вместо него всегда отображаются календари для выбора пользовательского диапазона дат.
Вы можете программно обновить startDate и endDate в средстве выбора с помощью методов setStartDate и setEndDate .
Вы можете получить доступ к объекту Date Range Picker, его функциям и свойствам через
свойства данных элемента, к которому вы его прикрепили.
-
setStartDate(Date or string): Устанавливает текущую выбранную дату начала средства выбора диапазона дат на указанную дату -
setEndDate(Date or string): Устанавливает текущую выбранную дату окончания средства выбора диапазона дат на указанную дату
Пример использования:
Для элемента, к которому вы прикрепляете средство выбора, запускается несколько событий, которые вы можете прослушивать.
-
show.daterangepicker: срабатывает при отображении средства выбора -
hide.daterangepicker: срабатывает, когда средство выбора скрыто -
showCalendar.: срабатывает при отображении календарей daterangepicker -
hideCalendar.daterangepicker: срабатывает, когда календари скрыты -
apply.daterangepicker: срабатывает при нажатии кнопки «Применить». или при нажатии предопределенного диапазона -
cancel.daterangepicker: срабатывает при нажатии кнопки отмены
daterangepicker Некоторым приложениям требуется функция «очистить» вместо «отмены», чего можно добиться, изменив метку кнопки и наблюдая за событием отмены:
Хотя передача обратного вызова конструктору — это самый простой способ прослушивания изменений в выбранном диапазоне дат, вы также можете что-то делать каждый раз, когда нажимается кнопка «Применить», даже если выбор не изменился:
родительЭль
дата начала
дата окончания
минДата
максимальная дата
открывается rightleftcenter
капель
показать выпадающие списки
минГод
максГод
показатьWeekNumbers
показатьISOWWeekNumbers
синглДатеПикер
времяпикер
timePicker24Hour
timePickerIncrement (в минутах)
timePickerSeconds
maxSpan (пример значения)
локаль (пример настроек)
автоприменить
классы кнопок
применитькнопкаклассы
классы отменыКнопки
диапазоны (с примерами предопределенных диапазонов)
всегдаПоказатьКалендари
показатьCustomRangeLabel
связанные календари
автообновление ввода
Выбор диапазона дат
Ваша копируемая конфигурация
Лицензия MIT (MIT)
Copyright (c) 2012-2019 Дэн Гроссман
Настоящим предоставляется бесплатное разрешение любому лицу, получившему копию этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), работать с Программным обеспечением без ограничений, включая, помимо прочего, права на использование, копирование, изменение, слияние.
публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения, а также разрешать лицам, которым предоставляется Программное обеспечение, делать это при соблюдении следующих условий:
Приведенное выше уведомление об авторских правах и это уведомление о разрешении должны быть включены во все копии или существенные части Программного обеспечения.
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, ПОМИМО ПРОЧЕГО, ГАРАНТИИ КОММЕРЧЕСКОЙ ПРИГОДНОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ОБЛАДАТЕЛИ АВТОРСКИМ ПРАВОМ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УЩЕРБ ИЛИ ИНУЮ ОТВЕТСТВЕННОСТЬ, БУДУТ СВЯЗАННЫЕ С ДОГОВОРОМ, ДЕЛОМ ИЛИ ИНЫМ ОБРАЗОМ, ВОЗНИКАЮЩИЕ ИЗ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИСПОЛЬЗОВАНИЯ ИЛИ ИНЫХ СДЕЛОК В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ.