От автора: селекторы в JQuery играют главенствующую роль. Большинство методов в JQuery работают только на каких-то элементах, поэтому перед их использованием необходимо выбрать какой-либо тег. К примеру, чтобы прикрепить событие click к кнопке, эту кнопку сначала необходимо выбрать.
Вам могут быть знакомы популярные селекторы, так как они основаны на CSS. Однако существуют и менее используемые селекторы. В этом уроке я расскажу вам про эти менее известные, но не менее важные селекторы.
Универсальный селектор (*)
Селектор по праву называется универсальным, с его помощью можно выбрать все элементы на странице, в том числе head, body, script или link. Посмотрите мое демо, чтобы понять, о чем я говорю.
|
1 2 3 4 |
$("section *") // Выбираются все дочерние элементы $("section > *") // Выбираются все прямые дочерние элементы $("section > * > *") // Выбираются все дочерние элементы второго уровня $("section > * > * a") // Выбираются ссылки третьего уровня |
Данный селектор в паре с другими элементами сильно замедляет работу. Однако скорость работы также зависит от того, как используется селектор и в каком браузере открыта страница. В 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.
|
1 2 3 4 5 6 7 |
$("li[data-category!='css']").each(function() { $(this).addClass("mismatch"); // Добавляем класс mismatch class к отфильтрованным селекторам. $(".mismatch").attr("data-category", attributeValue); // Устанавливаем нужное значение атрибута }); |
В демо ниже я пробегаю по двум спискам и исправляю значения атрибута category.
Селектор :contains(text)
Селектор используется для выбора всех тегов, содержащих заданную строку. Искомая строка может находиться, как напрямую внутри элемента, так и внутри его дочерних элементов.
Пример ниже поможет вам понять принцип работы данного селектора. Мы поставим желтый фон для всех вхождений фразы Lorem Ipsum в тексте. Сначала разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <b>Lorem Ipsum</b>.</p> <a href="//en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a> </section> <section> <p>This <span class="small-u">lorem ipsum</span> should not be highlighted.</p> </section> <ul> <li>A Lorem Ipsum List</li> <li>More Elements Here</li> </ul> |
Из текста видно, что фраза Lorem Ipsum встречается по тексту 7 раз в разных местах. Я специально сделал одну фразу с маленькой буквы, чтобы показать регистрозависимость. JS код ниже подсвечивает все вхождения:
|
1 2 3 4 5 |
$("section:contains('Lorem Ipsum')").each(function() { $(this).html( $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>") ); }); |
Кавычки вокруг искомой строки можно не ставить. Т.е. оба варианта записи $(«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)»).
Один из возможных способов применения – манипуляция элементами с заданными дочерними элементами. В примере ниже я буду менять цвет всех элементов списка со ссылкой внутри. Разметка демо:
|
1 2 3 4 5 6 7 |
<ul> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> <li>Pellentesque habitant morbi tristique senectus.</li> (... more list elements here ...) <li>Pellentesque habitant morbi tristique senectus.</li> <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li> </ul> |
JS код для смены цвета элементов списка:
|
1 2 3 |
$("li:has(a)").each(function(index) { $(this).css("color", "crimson"); }); |
Логика у кода довольно простая. Я пробегаюсь в цикле по всем элементам списка со ссылками внутри и ставлю им малиновый цвет. Можно также изменять текст внутри элементов списка или выкинуть их из 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) выбирает все элементы выше заданного индекса.
|
1 2 3 4 5 6 7 |
:lt(4) // Выбираются первые 4 элемента :lt(-4) // Выбираются все элементы кроме последних 4 :gt(4) // Выбираются все элементы кроме первых 5 :gt(-4) // Выбираются последние три элемента :gt(-1) // Ничего не выбирается :eq(4) // Пятый элемент :eq(-4) // Четвертый элемент с конца |
Чтобы лучше понять принцип работы индексных селекторов, покликайте на разные кнопки в демо.
Селекторы форм
В JQuery есть множество селекторов для легкого получения доступа к элементам формы. К примеру, селектор :button выберет все теги button и все элементы с типом button. Точно так же селектор :checkbox выберет все input’ы с типом checkbox. В JQuery есть селекторы почти для всех инпутов.
Рассмотрим форму ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form action="#" method="post"> <div> <label for="name">Text Input</label> <br> <input type="text" name="name" /> <input type="text" name="name" /> </div> <hr> <div> <label for="checkbox">Checkbox:</label> <input type="checkbox" name="checkbox" /> <input type="checkbox" name="checkbox" /> <input type="checkbox" name="checkbox" /> <input type="checkbox" name="checkbox" /> </div> </form> |
В форме я создал два текстовых элемента и 4 чекбокса. Сама форма простая, но с ее помощью вы поймете, как работают селекторы форм. С помощью селектора :text мы подсчитаем количество текстовых элементов и обновим текст в первом инпуте.
|
1 2 3 4 |
var textCount = $(":text").length; $(".text-elements").text('Text Inputs : ' + textCount); $(":text").eq(0).val('Added programatically!'); |
Для выбора всех текстовых инпутов я использовал :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») – берем лучшее от обоих миров. Для нумерации заголовков можно использовать следующий код.
|
1 2 3 4 |
$("article :header").each(function(index) { $(this).text((index + 1) + ": " + $(this).text()); // Добавляем номер к заголовку }); |
И демо
Заключительные мысли
В этом уроке я рассказал вам про редко используемые селекторы, с которыми вы можете встретиться в JQuery. У большей части описанных селекторов есть заменители, но все же надо знать, что есть и такие селекторы. Надеюсь, вы вынесли из урока что-то новое для себя. Если у вас есть вопросы или предложения, пишите об этом в комментариях.
Автор: Monty Shokeen
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
