Редко используемые селекторы JQuery

Редко используемые селекторы JQuery

От автора: селекторы в JQuery играют главенствующую роль. Большинство методов в JQuery работают только на каких-то элементах, поэтому перед их использованием необходимо выбрать какой-либо тег. К примеру, чтобы прикрепить событие click к кнопке, эту кнопку сначала необходимо выбрать.

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

Универсальный селектор (*)

Селектор по праву называется универсальным, с его помощью можно выбрать все элементы на странице, в том числе head, body, script или link. Посмотрите мое демо, чтобы понять, о чем я говорю.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Данный селектор в паре с другими элементами сильно замедляет работу. Однако скорость работы также зависит от того, как используется селектор и в каком браузере открыта страница. В Firefox следующая запись $(«#selector > *»).find(«li») работает медленнее, чем $(«#selector > ul»).find(«li»). Интересен и тот факт, что Chrome чуть-чуть быстрее Firefox выполняет запись $(«#selector > *»).find(«li»). Запись $(«#selector *»).find(«li») во всех браузерах выполняется медленнее, чем запись $(«#selector ul»).find(«li»). Советую сравнивать производительность перед использованием селекторов.

В этом демо сравнивается скорость выполнения всех селекторов.

Селектор анимации (:animated)

С помощью данного селектора можно получить доступ ко всем элементам, чья анимация еще не закончилась на момент запуска селектора :animated. Есть одна проблема – будут выбраны только элементы, анимированные с помощью JQuery. Данный селектор является расширением JQuery и не увеличивает производительность кода в отличие от родного метода querySelectorAll().

С помощью JQuery также нельзя засечь CSS анимацию, но можно засечь момент ее завершения с помощью события animationend. Взгляните на следующее демо.

В демо выше до выполнения $(«:animated»).css(«background»,»#6F9″); анимируются только нечетные теги DIV, поэтому они зеленого цвета. После этого функция анимации вызывается для оставшихся элементов DIV. Если кликнуть на кнопку button, все DIV’ы станут зелеными.

Селектор неравенства атрибута ([attr!=”value”])

Обычные селекторы атрибутов определяют, существует ли атрибут с заданным именем или значением. А селектор [attr!="value"] наоборот выбирает все элементы с незаданным атрибутом или с атрибутом, чье значение не совпадает с заданным. Эквивалентная запись :not([attr="value"]). В отличие от [attr="value"] селектор [attr!="value"] не входит в спецификацию CSS, а значит, запись в форме $(«css-selector»).not(«[attr='value']«) может повысить производительность в современных браузерах.

В коде ниже ко всем тегам li с атрибутом data-category равным css добавляется класс mismatch. Полезная штука для отладки или установки нужного значения атрибута через JS.

В демо ниже я пробегаю по двум спискам и исправляю значения атрибута category.

Селектор :contains(text)

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

Пример ниже поможет вам понять принцип работы данного селектора. Мы поставим желтый фон для всех вхождений фразы Lorem Ipsum в тексте. Сначала разметка:

Из текста видно, что фраза Lorem Ipsum встречается по тексту 7 раз в разных местах. Я специально сделал одну фразу с маленькой буквы, чтобы показать регистрозависимость. JS код ниже подсвечивает все вхождения:

Кавычки вокруг искомой строки можно не ставить. Т.е. оба варианта записи $(«section:contains(‘Lorem Ipsum’)») и $(«section:contains(Lorem Ipsum)») будут верны в демо выше. Областью поиска я выбрал теги section, а текст Lorem Ipsum ищется именно в такой форме. Более того, так как селектор регистрозависимый, текст во втором теге section не должен подсветиться. В этом демо наглядно видно, что все работает.

Селектор :has(selector)

Этот селектор выбирает все теги, в которых указанный элемент встречается хотя бы один раз. Для совпадения у тега не обязательно должны быть прямые наследники. :has() не входит в спецификацию CSS. Для повышения производительности в современных браузерах можно использовать запись $(«pure-css-selector»).has(selector) вместо $(«pure-css-selector:has(selector)»).

Один из возможных способов применения – манипуляция элементами с заданными дочерними элементами. В примере ниже я буду менять цвет всех элементов списка со ссылкой внутри. Разметка демо:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JS код для смены цвета элементов списка:

Логика у кода довольно простая. Я пробегаюсь в цикле по всем элементам списка со ссылками внутри и ставлю им малиновый цвет. Можно также изменять текст внутри элементов списка или выкинуть их из DOM. Думаю, селектор будет полезен и в других ситуациях. На CodePen можете посмотреть демо кода выше.

Индексные селекторы

Помимо CSS селекторов типа :nth-child() в JQuery есть и свои индексные селекторы — :eq(index), :lt(index) и :gt(index). В отличие от CSS собратьев эти селекторы считают с нуля. Т.е. селектор :nth-child(1) выберет первый дочерний элемент, а :eq(1) выберет второй. Для выбора первого используется :eq(0).

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

Селектор :lt(index) выбирает все элементы, которые меньше заданного значения. Чтобы выбрать первые три элемента, необходимо записать :lt(3), так как индексами элементов будут 0,1 и 2. Задав отрицательный индекс, производится отсчет в обратном направлении, и выбираются все значения до полученного элемента. Точно так же селектор :gt(index) выбирает все элементы выше заданного индекса.

Чтобы лучше понять принцип работы индексных селекторов, покликайте на разные кнопки в демо.

Селекторы форм

В JQuery есть множество селекторов для легкого получения доступа к элементам формы. К примеру, селектор :button выберет все теги button и все элементы с типом button. Точно так же селектор :checkbox выберет все input’ы с типом checkbox. В JQuery есть селекторы почти для всех инпутов.

Рассмотрим форму ниже:

В форме я создал два текстовых элемента и 4 чекбокса. Сама форма простая, но с ее помощью вы поймете, как работают селекторы форм. С помощью селектора :text мы подсчитаем количество текстовых элементов и обновим текст в первом инпуте.

Для выбора всех текстовых инпутов я использовал :text, затем я посчитал их количество с помощью метода length. В третьем выражении я с помощью :eq() получаю доступ к первому элементу и задаю ему значение.

Обратите внимание, что в jQuery 1.5.2 селектор :text возвращает true для элементов, у которых не задан атрибут type. Демо

Селектор заголовков (:header)

Если у вас когда-либо возникала задача выбрать все заголовки на странице, то сделать это можно с помощью $(«:header»), а не расписывать $(«h1 h2 h3 h4 h5 h6″). Селектор не входит в спецификацию CSS, а значит, можно повысить производительность, сначала используя селектор CSS, а затем .filter(«:header»).

К примеру, на странице есть тег article и три заголовка. В таком случае можно было бы использовать $(«article :header»), а не $(«article h1, article h2, article h3″). А сделать код еще быстрее можно с помощью $(«article»).filter(«:header») – берем лучшее от обоих миров. Для нумерации заголовков можно использовать следующий код.

И демо

Заключительные мысли

В этом уроке я рассказал вам про редко используемые селекторы, с которыми вы можете встретиться в JQuery. У большей части описанных селекторов есть заменители, но все же надо знать, что есть и такие селекторы. Надеюсь, вы вынесли из урока что-то новое для себя. Если у вас есть вопросы или предложения, пишите об этом в комментариях.

Автор: Monty Shokeen

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree