Приветствую вас на своем блоге, посвященном веб-технологиям, среди которых и jQuery – javascript-библиотека, упрощающая создание различных функций и скриптов. Сегодня я хотел бы вам рассказать, какие существуют в jquery селекторы, потому что это та основа, которая нужна для работы с этой технологией. Статья наверняка получится очень объемной, так как много нюансов. Селекторы во многом схожи с теми, которые используются в CSS, о них вы можете прочитать здесь.
Основные селекторы в jquery
Начну я с самых простых. Прежде всего нужно разобрать основы синтаксиса этой библиотеки.
$(“селектор”).метод
Обязательно указывать знак доллара в самом начале, если вы указываете селектор, чтобы браузер понимал, что это jQuery. Сам селектор можно писать в двойных или одинарных кавычках.
# — выбирает элемент с указанным идентификатором.
$(“#header”)
Выберет элемент с id = “header”.
.название-класса – выбирает элемент или группу элементов, которые имеют тот или иной класс.
$(“.widget-title”)
Выберет все элементы с указанным классом. Логически понятно, что это заголовки виджетов.
$(“название тега”) – выберет все указанные теги.
$(“селектор1, селектор2”) – через запятую вы можете перечислить несколько селекторов и дальнейшие операции будут применены ко всем им. Перечислять можно сколько угодно.
$(“*”) – универсальный глобальный селектор. Будут выбраны все элементы, которые есть на странице.
Дочерние, вложенные и соседние селекторы в jQuery
$(“table a”)
Все ссылки в таблицах;
$(“.menu li”)
Все пункты списков в контейнере с классом menu.
$(“#main > .post”)
Выберет все элементы с классом post, которые являются прямыми наследниками блока с идентификатором main, то есть непосредственно вложены в него.
$(“p+a”)
Все ссылки, которые являются в html-разметке следующими за абзацем.
Фильтры
Для простоты дальше я не буду приводить полный код в каждом случае, я думаю, вы и так поняли, как записать селекторы, я буду записывать лишь их имя.
Итак, фильтры сами по себе не являются самостоятельными, их нужно употреблять в связке с другими элементами.
:first – выбрать первый элемент из тех, что удовлетворяют селектору.
:last – последний элемент.
:even – четные элементы.
:odd – нечетные.
Примеры:
Div:odd – все нечетные дивы на странице.
.block:first – выберет первый элемент из тех, что имеют класс block.
:eq(число) – выбирает элемент по его порядковому номеру (индексу), начиная с нуля.
P:eq(25) – выберет двадцать шестой абзац на веб-странице. Как вы помните, отсчет с нуля.
:gt(число) – выберет все элементы с порядковым номером больше указанного в скобках.
:lt(число) – противоположный эффект (с порядковым номером меньше указанного).
.item:qt(5) – все элементы с классом .item, начиная с шестого.
Селекторы и фильтры форм
Для форм в jquery также предусмотрено много возможностей.
:тип поля (input type)
:checkbox – все чекбоксы
:email – все поля для ввода электронной почты.
Это лишь два примера, дальше, я думаю, вы сами разберетесь. Это именно селекторы, теперь давайте посмотрим, как можно отфильтровать элементы форм.
:enabled/disabled – выбирает, соответственно, только активные или неактивные поля.
Input:text:enabled – этот селектор выбирает все поля с типом “text”, которые активны, то есть в них можно что-то написать.
:checked – отмеченные элементы (чекбоксы или радио-кнопки).
:selected – все выбранные элементы.
Фильтры контента
Это дополнительные фильтры, которые помогут вам с удобством выбирать различные элементы, основываясь на разных параметрах.
:empty – теги без потомков, не имеющие вложенных в них тегов.
:contains(‘какой-то текст’) – выбирает все контейнеры, в которых найдется тот текст, который мы передадим в скобках. Текст нужно заключить в одинарные кавычки.
:header – все заголовки в контейнере. (h1-h6).
#post:header – выберет все заголовоки в элементе #post.
:has(селектор) – все блоки, в которых есть хотя бы один элемент, подходящий под указанный в скобках селектор. Пример:
.article:has(.meta) – все статьи (article), в которых есть хотя бы один элемент с классом .meta.
Фильтры атрибутов
Это как селекторы атрибутов в css (о них вы можете почитать здесь), синтаксис абсолютно идентичен, поэтому я не буду приводить тут все в подробностях, а лишь пару примеров.
Отфильтровать можно просто по наличию какого-то атрибута:
Div[class] – все блоки div, у которых есть атрибут class.
Так и по конкретному значению:
A[target = ‘_blank’] – все ссылки, которые открываются в новом окне. Значение атрибута не забудьте поместить в одинарные кавычки.
Ну и конечно, вы можете указать не только точное значение атрибута, но и частичное.
^ — начинается с указанных символов.
$ — заканчивается ими.
*— содержит введенную подстроку в любом месте.
Пример:
Span[class ^= ‘text’] – выберет все спаны, у которых имя класса начинается на ‘text’. Подробнее о селекторах атрибутов читайте в соответствующей статье, ссылку дал выше.
Фильтры потомков
:first-child, :last-child – выбирает первый или последний элемент в родительском.
:nth-child(порядковый номер) – позволяет выбрать по индексу.
:only-child – выбирает только те элементы, у которых всего один потомок (вложенный в них).
Пожалуй, на этом я закончу, и так получилось слишком много информации за раз. Если что-то забыл, потом обязательно допишу. Ну и буду рад увидеть ваши комментарии.