JS/jQuery 0

Все jQuery селекторы в одной статье

jQuery селекторыПриветствую вас на своем блоге, посвященном веб-технологиям, среди которых и 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 – выбирает только те элементы, у которых всего один потомок (вложенный в них).

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.