jQuery селекторы


Содержание материала:

Селекторы и фильтры jQuery

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

Структура кода jQuery

Знак доллара $ — обозначает использование jQuery, selectorэлемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример jQuery кода

Селекторы в jQuery

В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?

Селектор (от англ. select — выбирать) — это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.

Идентификаторы (id).

Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.

#id — выбирает единственный элемент с переданным идентификатором (id). В данном случае special

Селекторы в jQuery. Часть II

Как мы узнали ранее, jQuery – это библиотека JavaScript, которая фокусируется на взаимодействии JavaScript, HTML, CSS и служит для облегчения работы разработчика. На данный момент она является самой распространенной библиотекой JS в мире.

В природе существуют и другие JS-библиотеки, фреймворки и инструменты, например, React, AngularJS, Backbone.js, Ember.js и т.д. Но в свое время именно jQuery произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и AJAX-запросы.

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

Библиотека jQuery на сайте по умолчанию отсутствует. Для ее подключения необходимо скачать актуальную версию с официального сайта jquery.com/download, загрузить ее на сервер, а затем подключить с помощью фрагмента кода:

Подключение библиотеки jQuery через путь к файлу (версия 3.3.1)

Существует альтернативный способ подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, а также CDN, который организовали создатели jQuery.

Подключение библиотеки jQuery через CDN

Можно подключить jQuery и через GTM. Для этого необходимо создать пользовательский HTML-тег и добавить туда фрагмент кода выше, а в качестве триггера активации выбрать «All Pages» (Все страницы).

Селекторы в jQuery базируются на CSS селекторах (см. выше), они также используются для определения элемента или группы элементов.

Все селекторы в jQuery начинаются со знака доллара и круглых скобок $ (), например, $(‘div’). В этом случае будет осуществлен поиск всех элементов div на странице, $(‘.className’) найдет все элементы с классом className, $(‘#sidebar’) найдет все элементы на странице с идентификатором sidebar и т.д.

Примечание: при использовании метасимволов (#;&,.+*

’:»!^$[]()=>|/) в значении любого идентификатора, класса или названия атрибута, необходимо экранировать эти символы в селекторах с помощью двух обратных слэшей \\

Экранирование специальных символов с помощью \\

В процессе работы с Google Tag Manager jQuery позволяет удобнее решать множество задач. Задачи можно разделить на два типа:

  1. взять элемент, который у нас находится на сайте, например, значение цены, название продукта, категорию продукта и т.д.;
  2. отследить факт того, что у нас произошел клик по какому-либо элементу, зафиксировано событие или пользователь заполнил и отправил форму на сайте.

При настройке некоторых событий в GTM иногда возникают ситуации, когда необходимо получить дополнительную информацию, связанную с элементом, над которым произошло событие. Но эту информацию так просто нельзя получить через CSS-селекторы, поскольку она может находится в структуре других элементов, которые логически связаны с рассматриваемым элементом. В это случае можно воспользоваться функциями библиотеки jQuery.

Давайте разберем на нескольких примерах работу библиотеки jQuery с набором элементов. Для этого я перейду на свой сайт osipenkov.ru и вызову консоль разработчика, а затем перейду на вкладку Console.

С помощью $(«div«).cssborder«, «1px solid red«); выберем все элементы div на странице и обведем их в красную рамку в 1 пиксель.

Все div на странице обведены в красную рамку шириной в 1 пиксель

Примечание: мой блог работает на WordPress. В нем стандартный способ обращения к элементам через $ () отключен (в конце файла …/wp-includes/js/jquery/jquery.js прописана строчка jQuery.noConflict();, которая отключает работу с элементами страницы через $.), так как другие библиотеки также могут использовать данный механизм обращения к элементам. Поэтому вместо знака доллара я использовал альтернативную конструкцию jQuery (). Для изменения способа обращения на привычный $ необходимо изменить фрагмент кода. Решение проблемы ищите в интернете с пометкой «jQuery не работает в WordPress».

Теперь давайте поработаем с формами. Перейдем на страницу Контакты https://osipenkov.ru/contacts/ где есть форма обратной связи. Добавим в консоль такую строчку:

$(«form input»).css(«border», «1px solid blue»);

Данная конструкция добавит рамку всем input-ам, которые являются потомками элемента form. Это пример так называемого «parent child», когда выбираются все элементы input, являющиеся узлами-потомками для родительского элемента form.

Все div на странице обведены в красную рамку шириной в 1 пиксель

В качестве еще одного простого примера разберем вывод значения заполненного поля «Имя» с name=”yourname.

Поле «Имя» с name=”your-name”

В консоли разработчика вводим такую конструкцию:

$(‘[name=»your-name»]’).val()

Метод .val() позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута “name”, то есть в нашем случае “your-name”. Получим результат Yakov Osipenkov.

Список функций jQuery перемещения по дереву DOM

Функции фильтрации набора элементов:

Функции фильтрации набора элементов

Также, как и с CSS-селекторами, рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания темы селекторов jQuery:

Демонстрация селекторов jQuery: w3schools.com/jQuery/trysel.asp

На сайте jquery-docs.ru есть перевод официальной документации API jQuery на русский язык.

После того, как вы познакомитесь с CSS-селекторами и уделите им достачное количество времени на изучение, вы сможете выбрать любой элемент для отслеживания в Google Tag Manager на вашем сайте, даже если у него нет никаких отличительных знаков, а также по достоинству оцените всю мощь и функциональность диспетчера тегов Google.

Данная статья написана с использованием следующих ресурсов – habr.com, puzzleweb.ru, jquery.page2page.ru, odesseo.com.ua, jquery-docs.ru, learn.javascript.ru, htmlbook.ru и developer.mozilla.org.

Читайте первую часть материала «CSS-селекторы в GTM. Часть I»

Понравилась статья? Подписывайтесь на социальные сети:

Я также оказываю помощь в настройке контекстной рекламы и веб-аналитики. Подробнее здесь.

Команды jQuery

Код jQuery как и код JavaScript состоит из последовательно идущих команд. Команды являются основной структурной единицей jQuery.

Стандартный синтаксис jQuery команд:

  1. Знак $ сообщает, что символы идущие после него являются jQuery кодом;
  2. Селектор позволяет выбрать элемент на странице;
  3. Метод задает действие, которое необходимо совершить над выбранным элементом. Методы в jQuery разделяются на следующие группы:
    • Методы для манипулирования DOM;
    • Методы для оформления элементов;
    • Методы для создания AJAX запросов;
    • Методы для создания эффектов;
    • Методы для привязки обработчиков событий.

Символ $

jQuery можно комбинировать с обычным JavaScript.

Если строка начинается с $ — это jQuery, если $ вначале строки отсутствует — это строка JavaScript кода.

Топ-пост этого месяца:  Принципы правильного создания кнопок для сайта

Некоторые JavaScript библиотеки тоже используют $ для обозначения своего кода. Для того, чтобы избежать конфликта имен между ними в jQuery предусмотрена команда noConflict(). С помощью команды noConflict() Вы можете заменить знак $ на любой другой.

Селекторы jQuery

С помощью селекторов Вы можете выбирать элементы на странице для применения к ним определенных действий.

Ниже располагается таблица с различными примерами использования селекторов для выбора желаемых элементов:

Пример Результат
$(«p») Будут выбраны все элементы p, которые находятся на странице.
$(«.par») Будут выбраны все элементы на странице с .
$(«#par») Будет выбран первый элемент на странице с .
$(this) Позволяет выбрать текущий HTML элемент. Щелкните на $(this) слева, чтобы посмотреть пример использования данного селектора в онлайн редакторе.
$(«p.par») Будут выбраны все элементы p на странице с .
$(«p#par») Будут выбраны все элементы p на странице с .
$(«.par,.header,#heat») Будут выбраны все элементы на странице со значениями атрибутов и .
$(«[src]») Будут выбраны все элементы на странице, имеющие атрибут src.
$(«[src=’значение’]») Будут выбраны все элементы со значениям атрибута src=»http://www.wisdomweb.ru/JQ/%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5″.
$(«[src$=’.gif’]») Будут выбраны все элементы со значениями атрибута src заканчивающимися на .gif.
$(«div#wrap .par1») Будут выбраны все элементы с >
$(«:input») Будут выбраны все input элементы на странице.
$(«:тип») Будут выбраны все input элементы с . Например :button выберет все элементы, :text выберет все элементы и т.д.

Полный список селекторов jQuery Вы можете найти в нашем jQuery справочнике.

Предотвращение преждевременного выполнения кода

Из учебника по JavaScript Вы наверно помните, что выполнение кода до полной загрузки документа часто приводит к ошибкам.

Дело в том, что скрипт может обратится к еще не загруженному содержимому, а это всегда приводит к ошибкам или неожиданным результатам.

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

Предотвращение преждевременного выполнения кода в JavaScript:

В jQuery можно избавиться от преждевременного выполнения кода следующими способами:

Предотвращение преждевременного выполнения кода в jQuery:

Существует еще один альтернативный способ также помогающий избежать преждевременное выполнение JavaScript и jQuery кода и позволяющий также ускорить загрузку страниц (благодарим за напоминание о нем пользователя Ghringo Americano).

Необходимо помещать код в самый конец тела документа (т.е. перед

Как использовать селекторы jQuery для выделения элементов страницы

Обычно селекторы jQuery используются для выбора элементов на странице, чтобы затем вызвать методы jQuery для манипулирования ими.

Селекторы jQuery основаны на селекторах CSS, и если вы знаете CSS, то уже имеет базовое представление об идее выбора элементов на странице.

В данном уроке мы рассмотрим селекторы, которые поддерживаются jQuery. Многие из них такие же как и селекторы CSS, но есть и специфические для jQuery. Для каждого селектора приведен пример использования для выбора элемента страницы.


В урок включены следующие разделы:

jQuery поддерживает только те селекторы CSS, которые выбирают элементы DOM. Например, :visited , :hover и :first-line не поддерживаются.

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

Селектор Описание Пример
Все Выбирает все элементы на странице, включая head , body и так далее. $(«*»)
Элемент Выбирает все элементы с заданным тегом. $(«p»)
$(«div»)
Класс Выбирает все элементы с заданным именем класса. $(«.myClass»)
$(«p.myClass»)
ID Выбирает один элемент с заданным атрибутом id . $(«#myID»)
$(«p.#myID»)

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

Выбор элементов по атрибуту

Основные селекторы отлично подходят в случаях, если нужно выбрать все параграфы на странице или элемент, который нужно выбрать имеет класс CSS или ID.

Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.

В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:

  • Изображение по атрибуту src
  • Ссылку по атрибуту href
  • Все поля input формы, которые имеют атрибут type=»checkbox»

jQuery имеет много селекторов, которые можно использовать для выбора элементов по атрибуту:

Селектор Описание Пример
Атрибут Выбирает элемент(ы), которые содержат определенный атрибут вне зависимости от значения атрибута. $(«div[attributeName]»)
Атрибут равен Выбирает элемент(ы), которые содержат заданный атрибут с заданным значением. $(«div[attributeName=’value’]»)
Атрибут не равен Выбирает элемент(ы), которые не содержат заданного атрибута или сожержат заданный атрибут, но его значение не соответствует заданному. $(«div[attributeName!=’value’]»)
Атрибут начинается с Выбирает элемент(ы), которые содержат заданный атрибут, у которого значение начинается с заданной строки. $(«div[attributeName^=’value’]»)
Атрибут заканчивается Выбирает элемент(ы), которые содержат атрибут, у которого значение заканчивается заданной строкой. $(«div[attributeName$=’value’]»)
Атрибут содержит Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку. $(«div[attributeName*=’value’]»)
Атрибут содержит слово Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданное слово. «Слово» — это последовательность символов без пробелов. $(«div[attributeName

=’value’]»)

Атрибут содержит префикс Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом. $(«div[attributeName|=’value’]»)

Вы можете комбинировать селекторы атрибутов для сужения области выбора. Например:

Селектор «Атрибут содержит префикс» выглядит неэффективно, но он сделан для обработки атрибутов языка, таких как lang=»en» и lang=»en-US» .

Выбор элементов по содержанию

Если нет возможности сузить область выбора по основным селекторам и по атрибутам, то можно «покопаться» в содержании элемента для определения, подходит он для выбора или нет. jQuery имеет 4 селектора для данного назначения:

Селектор Описание Пример
:contains() Выбирает элемент(ы), которые содержат заданный текст. Текст может быть в самом элементе, так и в любом элементе внутри в выбранного элемента. Примечание: :contains() чувствительно к регистру — «Hello» не соответствует «hello» . // Выбираем все div, которые содержат «myText»:
$(«div:contains(‘myText’)»)
:has() Выбирает элемент(ы), которые содержат 1 или более элементов, соответствующих заданной строке. Селектор просматривает на соответствие все элементы внутри заданного элемента. // Выбираем все div, которые содержат параграфы:
$(«div:has(p)»)
:parent Выбирает элемент(ы), которые содержат другие элементы или текстовые узлы. // Выбираем все div, которые содержат что-нибудь:
$(«div:parent»)
:empty Выбирает элемент(ы), которые не содержат других элементов или текстовых узлов. // Выбираем все div, которые не содержат ничего:
$(«div:empty»)

Следующий пример показывает, как использовать :contains() , наряду с селектором класса для выбора параграфов, которые имеют определенный класс, дополнительным условием служит условие содержания определенной строки (или строк):

Выбор элементов по иерархии

Другой способ выбрать элементы в jQuery — это рассмотреть, как они соотносятся друг к другу на странице. Вероятно, вы знаете много таких селекторов по работе с CSS:

Селектор Описание Пример
Ребенок Выбирает элемент(ы), которые являются ребенком (прямым потомком) заданного предка(ов). // Выбираем все элементы списка с классом «highlight», которые являются ребёнком для списка с ID «nav»:
$(«ul#nav > li.highlight»)
Потомок Выбирает элемент(ы), которые являются потомками (детьми, внуками и так далее) заданного предка(ов). Это более общая форма селектора Ребенок. // Выбираем все ссылки внутри списка с ID «nav»:
$(«ul#nav a»)
Следующий соседний элемент Выбирает элемент(ы), который следует непосредственно за заданным элементом, где оба элемента имеют одного и того же родителя. // Выбираем все параграфы, которые следуют непосредственно за заголовком H1:
$(«h1 + p»)
Следующий сестринский элемент Выбирает элемент(ы), который следует за другим элементом, где оба элемента являются потомками одного родителя. Это более обобщенная версия селектора следующий соседний элемент. // Выбираем все ячейки таблицы после ячейки, которая содержит слово «Hello»:
$(«td:contains(‘hello’)

td»)

Первый ребенок Выбирает элемент(ы), который является первым ребенком его родителя. // Выбираем первые пункты во всех списках на странице:
$(«li:first-child»)
Последний ребенок Выбирает элемент(ы), который является последним ребенком его родителя. // Выбираем последние пункты во всех списках на странице:
$(«li:last-child»)
N-й ребенок Выбирает элемент(ы), который является n-м ребенком его родителя (смотри примечание ниже). // Выбираем третьи пункты во всех списках на странице:
$(«li:nth-child(3)»)
Только ребенок Выбирает элемент(ы), которые являются ребенком родителей, у которых есть только дети. // Выбираем только элементы в списках с одним пунктом:
$(«li:only-child»)

Кроме задания определенного номера ребенка с помощью :nth-child() , можно указывать even (для выбора всех детей с четными номерами), odd (для выбора всех детей с нечетными номерами), или выражение (например, «li:nth-child(3n+2)» выбирает каждый третий элемент в списке, а отсчет начинается со второго элемента).

В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет id «myTable» :

Выбор полей формы

Элементы формы имеют некоторые специфические свойства, которые вынуждают использовать некоторые трюки для их выбора. Например, чекбоксы, наряду со многими другими типами полей, являются элементами input . Таким образом,, чтобы выбрать чекбоксы в форме нужно использовать $(«input[type=’checkbox’]») .

Аналогично, идентификация выбранных элементов в списке select или отмеченных чекбоксов в форме может быть утомительным занятием./

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

Селектор Описание Пример
:button Выбирает все кнопки формы. $(«input:button»)
:checkbox Выбирает все чекбоксы. $(«input:checkbox»)
:file Выбирает все поля загрузки фала. $(«input:file»)
:image Выбирает все поля ввода изображения. $(«input:image»)
:password Выбирает все поля пароля. $(«input:password»)
:radio Выбирает все радио кнопки. $(«input:radio»)
:reset Выбирает все кнопки перезагрузки формы. $(«input:reset»)
:submit Выбирает все кнопки отправки формы. $(«input:submit»)
:text Выбирает все поля ввода текста. $(«input:text»)
:input Выбирает все поля формы, включая элементы input , textarea , и select . $(«:input»)
:checked Выбирает все отмеченные чекбоксы радио кнопки. $(«input:checked»)
:selected Выбирает все элементы option . $(«option:selected»)
:disabled Выбирает все недоступные поля формы. $(«input:disabled»)
:enabled Выбирает все Доступные поля формы. $(«input:enabled»)

Кроме того, что написано, можно использовать, например, $(«input:checkbox») для выбора всех чекбоксов на странице. Однако, $(«input:checkbox») действует быстрее, так как jQuery может использовать функцию JavaScript getElementsByTagName() для быстрого ограничения объемов поиска только элементами input . Это действительно для jQuery вообще — для ускорения кода всегда ограничивайте объем для работы селекторов там, где возможно. Например, $(«*») действует очень медленно, так как jQuery должен найти каждый отдельный элемент на странице.

Следующий пример ищет форму, которая имеет атрибут action со значением «mailform.php» , затем выбирает все отмеченные радио кнопки в форме:

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс «myClass» . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс «myClass» , а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор Описание Примеры
:first Выбирает первый элемент в наборе отобранных элементов. // Выбираем первый параграф, который имеет класс «myClass»:
$(«p.myClass:first»)
:last Выбирает последний элемент в наборе отобранных элементов. // Выбираем последний параграф, который имеет класс «myClass»:
$(«p.myClass:last»)
:eq() Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( 0 = первый элемент, 1 = второй и так далее). // Выбираем з-й параграф, который имеет класс «myClass»:
$(«p.myClass:eq(2)»)
:lt() Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1). // /Выбираем первые 2 параграфа, которые имеют класс «myClass»:
$(«p.myClass:lt(2)»)
:gt() Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего. // Выбираем все параграфы, которые имеют класс «myClass», за исключением первых трех:
$(«p.myClass:gt(2)»)
:even Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы. // Выбираем 1й, 3й, 5й, и так далее параграфы, которые имеют класс «myClass»:
$(«p.myClass:even»)
:odd Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы // Выбираем 2й, 4й, 6й, и так далее параграфы, которые имеют класс «myClass»:
$(«p.myClass:odd»)

Отметим, что данные селекторы не работают также как :first-child , :last-child , и так далее. Например, li.myClass:first-child выбирает только пункт списка с классом «myClass» , который является первым пунктом в соответствующем списке. А li.myClass:first находит все пункты списка на странице, которые имеют класс «myClass» , а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки в первых двух строках таблицы, которая имеет ID «myTable» :

Другие полезные селекторы jQuery

Если ни один из перечисленных селекторов не помог вам выделить нужные элементы, попробуйте использовать следующие селекторы:

Селектор Описание Пример
:not() Выбирает все элементы, которые не соответствуют заданному слектору. // Выбираем все параграфы, которые не имеют класса «myClass»:
$(«p:not(.myClass)»)
:animated Выбирает все элементы, которые в текущий момент анимируются jQuery (например, затухают). // Выбираем все div, которые анимируются в текущий момент:
$(«div:animated»)
:hidden Выбирает все скрытые элементы. Элемент полагается «скрытым» если: его свойство display установлено в значение «none» ; поля формы — type «hidden» ; если ширина и высота установлены в 0; если один из элементов, которые содержат заданный элемент является скрытым. Однако, элемент не считается «скрытым» если только его свойство visibility установлено в значение «hidden» . // Выбираем все скрытые праграфы, которые имеют класс «myClass»:
$(«p.myClass:hidden»)
:visible Выбирает все видимые элементы. Это противоположный селектор для :hidden . // Выбираем все видимые параграфы, которые имеют класс «myClass»:
$(«p.myClass:visible»)
:header выбирает все элементы заголовков ( h1 , h2 и так далее). // Выбираем все заголовки, которые имеют класс «myClass»:
$(«:header.myClass»)

В следующем примере выбираются все элементы на странице, кроме заголовков h1 :

Заключение

В данной статье мы рассмотрели, как выбирать элементы с помощью селекторов jQuery. Были разобраны следующие типы селекторов:

  • Основные селекторы, которые будут использоваться большую часть времени работы над проектом
  • Селекторы атрибутов для выбора элементов на основе имен атрибутов и их значений
  • Селекторы содержания, которые позволяют выбирать элементы на основе их содержания
  • Иерархические селекторы, которые можно использовать для выбора элементов на основе их взаимоотношений с другими элементами на странице
  • Селекторы полей формы, которые обеспечивают простой способ выбора различных элементов полей формы
  • Селекторы положения для выбора элементов в соответствии с их положением в наборе элементов
  • Дополнительные селекторы, такие как :not() для выбора элементов, не соответствующих селектору, и :animated для выбора анимированных элементов

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-selectors/
Перевел: Сергей Фастунов
Урок создан: 19 Августа 2010
Просмотров: 281874
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Category: Selectors

Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

To use any of the meta-characters ( such as !»#$%&'()*+,./:; [email protected][\]^`

) as a literal part of a name, it must be escaped with with two backslashes: \\ . For example, an element with , can use the selector $(«#foo\\.bar») . The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

All Selector (“*”)

Selects all elements.

:animated Selector

Select all elements that are in the progress of an animation at the time the selector is run.

Attribute Contains Prefix Selector [name|=”value”]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

Attribute Contains Selector [name*=”value”]

Selects elements that have the specified attribute with a value containing a given substring.

Attribute Contains Word Selector [name

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

Attribute Ends With Selector [name$=”value”]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

Attribute Equals Selector [name=”value”]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

Attribute Not Equal Selector [name!=”value”]

Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.

Attribute Starts With Selector [name^=”value”]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

:button Selector

Selects all button elements and elements of type button.


:checkbox Selector

Selects all elements of type checkbox.

:checked Selector

Matches all elements that are checked or selected.

child”)» rel=»bookmark»>Child Selector (“parent > child”)

Selects all direct child elements specified by “child” of elements specified by “parent”.

Class Selector (“.class”)

Selects all elements with the given class.

:contains() Selector

Select all elements that contain the specified text.

Descendant Selector (“ancestor descendant”)

Selects all elements that are descendants of a given ancestor.

:disabled Selector

Selects all elements that are disabled.

Element Selector (“element”)

Selects all elements with the given tag name.

:empty Selector

Select all elements that have no children (including text nodes).

:enabled Selector

Selects all elements that are enabled.

:eq() Selector

Select the element at index n within the matched set.

:even Selector

Selects even elements, zero-indexed. See also odd.

:file Selector

Selects all elements of type file.

:first-child Selector

Selects all elements that are the first child of their parent.

:first-of-type Selector

Selects all elements that are the first among siblings of the same element name.

:first Selector

Selects the first matched DOM element.

:focus Selector

Selects element if it is currently focused.

:gt() Selector

Select all elements at an index greater than index within the matched set.

Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

:has() Selector

Selects elements which contain at least one element that matches the specified selector.

:header Selector

Selects all elements that are headers, like h1, h2, h3 and so on.

:hidden Selector

Selects all elements that are hidden.

ID Selector (“#id”)

Selects a single element with the given id attribute.

:image Selector

Selects all elements of type image.

:input Selector

Selects all input, textarea, select and button elements.

:lang() Selector

Selects all elements of the specified language.

:last-child Selector

Selects all elements that are the last child of their parent.

:last-of-type Selector

Selects all elements that are the last among siblings of the same element name.

:last Selector

Selects the last matched element.

:lt() Selector

Select all elements at an index less than index within the matched set.

Multiple Attribute Selector [name=”value”][name2=”value2″]

Matches elements that match all of the specified attribute filters.

Multiple Selector (“selector1, selector2, selectorN”)

Selects the combined results of all the specified selectors.

Next Adjacent Selector (“prev + next”)

Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.

Next Siblings Selector (“prev

Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.

:not() Selector

Selects all elements that do not match the given selector.

:nth-child() Selector

Selects all elements that are the nth-child of their parent.

:nth-last-child() Selector

Selects all elements that are the nth-child of their parent, counting from the last element to the first.

:nth-last-of-type() Selector

Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.

:nth-of-type() Selector

Selects all elements that are the nth child of their parent in relation to siblings with the same element name.

:odd Selector

Selects odd elements, zero-indexed. See also even.

:only-child Selector

Selects all elements that are the only child of their parent.

:only-of-type Selector

Selects all elements that have no siblings with the same element name.


:parent Selector

Select all elements that have at least one child node (either an element or text).

:password Selector

Selects all elements of type password.

:radio Selector

Selects all elements of type radio.

:reset Selector

Selects all elements of type reset.

:root Selector

Selects the element that is the root of the document.

:selected Selector

Selects all elements that are selected.

:submit Selector

Selects all elements of type submit.

:target Selector

Selects the target element indicated by the fragment identifier of the document’s URI.

jQuery — Селекторы элементов формы

На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции jQuery(«селектор») для выбора элементов.

Назначение селекторов элементов формы

Селекторы элементов формы предназначены для выбора элементов в зависимости от:

  • их типа (значения атрибута type ) — :button , :checkbox , :file , :image , :password , :radio , :reset , :submit , :text .
  • того, является ли их тег input , textarea , select или button — :input .
  • того, находится ли элемент в фокусе или нет — :focus .
  • того, находятся ли элементы в активном состоянии ( :enabled ) или не активном ( :disabled ).
  • того, находятся ли элементы option в состоянии selected или нет — :selected .
  • того, находятся ли элементы checkbox , select и radio в состоянии selected или нет — :checked .

Селекторы элементов формы

:button — выбирает все элементы button и элементы с type=»button» . Селектор $(«:button») эквивалентен $(«button, input[type=’button’]») .

Например, выбрать все элементы button или элементы с type=»button» , которые расположены внутри формы:

:checkbox — выбирает все элементы с type=»checkbox» . Селектор $(«:checkbox») эквивалентен $(«[type=checkbox]») .

Перед селектором :checkbox как и перед селекторами псевдоклассов (т.е. теми которые начинаются со знака » : «) рекомендуется указывать тег или другой селектор (например, имя класса). Если перед знаком » : » ничего не указывать, то подразумевается использование универсального селектора ( * ). Другими словами, $(«:checkbox») эквивалент $(«*:checkbox») . Но более правильно в этом случае вместо * использовать тег input : $(«input:checkbox») .

Например, выбрать все элементы input , которые имеют атрибут type=»checkbox» , т.е. являются флаговыми кнопками:

:checked — выбирает все элементы с состоянием checked или selected . Селектор :checked предназначен для элементов checkbox , select и кнопок radio .

:disabled — выбирает все элементы, которые отключены (disabled).

Перед селектором :disabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с » : «) рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком » : » ничего не указываете, то подразумевается использование универсального селектора (» * «). Другими словами, $(«:disabled») эквивалентен $(«*:disabled») . Но в этом случае более правильно вместо » * » использовать тега input : $(«input:disabled») .

Селектор :disabled отличается от селектора атрибута [disabled] . Селектор :disabled проверяет логическое значение (истина/ложь) свойства disabled элемента, в то время как селектор атрибута [disabled] просто проверяет наличие атрибута disabled у элемента.

Селектор :disabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled : , , , ,

:submit — выбирает все элементы с type=»submit» . Селектор :submit предназначен для элементов button или input .

:text — выбирает все элементы с type=»text» .

jQuery функция $(«:text») позволяет нам выбрать элементы . Перед селектором :text как и перед селекторами псевдоклассов (т.е. теми которые начинаются с » : «) рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком » : » ничего не указываете, то подразумевается использование универсального селектора (» * «). Другими словами, $(«:text») эквивалентен $(«*:text») . Но более правильно этом случае вместо » * » использовать тег input : $(«input:text») .

Начиная с версии jQuery 1.5.2, селектор :input также выбирает элементы input , у которых не указан атрибут type (в этом случае подразумевается, что элемент имеет type=»text» ).

Разницу между $(«:text») и $(«[type=text]» ) продемонстрируем на следующем примере:

Малоизвестные jQuery Селекторы

Селекторы невероятно важны. Большинство методов jQuery требует выборки какого-либо элемента. К примеру, чтобы добавить обработчик при нажатии кнопки ( click ), изначально эту кнопку стоит выбрать.

Так как базовые jQuery селекторы основаны на существующих CSS селекторах, вы, вероятнее всего, уже хорошо в них разбираетесь. Однако существует несколько не особо популярных. В данном туториале я буду рассказывать о малоизвестных, но довольно важных селекторах.

Селектор для Выбора Всех Элементов (*)

Этот селектор по праву зовут универсальным, так как он может выбрать все элементы в вашем документе, включая , ,

Селекторы и фильтры jQuery

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

Структура кода jQuery

Знак доллара $ — обозначает использование jQuery, selectorэлемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример jQuery кода

Селекторы в jQuery

В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?

Селектор (от англ. select — выбирать) — это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.

Идентификаторы (id).

Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.

#id — выбирает единственный элемент с переданным идентификатором (id). В данном случае special

JQuery селекторы

Данный оператор выберет элемент с и добавит ему css-стиль, в данном случае рамку, шириной в 1 пиксел, сплошную и красную. (О способах задания css-стилей будет говориться в отдельном уроке).

.class — выбирает все элементы с переданным классом.
Пример:

Данный оператор выберет все элементы с и добавит им css-стиль, в данном случае рамку, шириной в 1 пиксел, сплошную и красную.

elements — выбирает все элементы с выбранным именем.
Пример:

Данный оператор выберет все div-ы и обведет их в рамки.

* — выбирает все элементы, включая head и body.
Пример:

Данный оператор добавит рамку ко всем элементам в тегах body.

selector1, . selectorN — выбирает все элементы, переданные в селекторах.
Пример:

Селекторы jQuery

Текст первого абзаца

Текст второго абзаца

Текст третьего абзаца

Сделать первый div красным

Обвести средний абзац синей рамкой

Сделать шрифт в первом и третьем div-ах жирным

Селекторы jQuery

Текст первого абзаца

Текст второго абзаца

Текст третьего абзаца

Сделать первый div красным

Обвести средний абзац синей рамкой

Сделать шрифт в первом и третьем div-ах жирным

jQuery селекторы

Здесь я напишу о том, что такое JQuery селекторы и как они работают.

jQuery Селекторы надо указывать следующим способом $(‘.селектор’);

Ниже я перечислю наиболее популярные, а может даже и все виды jQuery селекторов:

(Заметьте, во второй строке я написал «в элементе» а не в «элементах», т.к. атрибут ID может быть указан только у одного элемента, а атрибут CLASS у скольких угодно).

А теперь еще сложней:

Я советую Вам поиграться с разными jQuery селекторами, чтобы более четче понять их смысл и как они работают.

В следующей статье будет огромный список jQuery фильтров — их суть такая же как в jQuery селекторах, но предоставляют более расширенные возможности по поиску HTML тегов в DOM.

Добавить комментарий