Что такое селектор в jQuery 4

В этом уроке вы познакомитесь с селекторами — основным способом поиска элементов на странице в jQuery. jQuery ищет элементы в документе с помощью CSS-селекторов.

В этом уроке вы узнаете:

• Что такое селектор;
• Как выбирать элементы на странице с помощью jQuery;
• Какие виды селекторов существуют;
• Что возвращает функция $();

Что такое селектор?

Selector — это правило, которое указывает jQuery, какие элементы на странице нужно найти. Проще говоря, селектор — это способ указать, какие элементы мы хотим выбрать.

Чтобы выбрать какой-либо элемент на странице, нужно воспользоваться селектором:

$(селектор).действие();

Селекторы обрамляют двойными " или одинарными ' кавычками. Но обычно в проектах используют одинарные кавычки (в этом курсе, примеры показаны с одинарными кавычками).

В качестве селектора в jQuery может выступать:

• HTML-тег – $(‘tag’);
• CSS-класс – $(‘.class’);
• Идентификатор (id) – $(‘#id’);
• Атрибут тега – $(‘[attribute]’);
• Фильтр – $(‘:filter’) или $('selector').filter(':filter') (их будем изучать в следующем модуле).

Обычно используются CSS-классы или идентификаторы (id).

Как выбирать элементы на странице с помощью jQuery?

Выбор элементов с помощью jQuery похож на то, как это делается в CSS. Например, у нас есть страница, которая содержит заголовок h1, список ul и абзац p.

<!-- Заголовок -->
<h1>Страны</h1>

<!-- Список -->
<ul>
  <li>Россия</li>
  <li>Китай</li>
  <li>Германия</li>
  <li>США</li>
  <li>Англия</li>
  <li>Франция</li>
</ul>

<!-- Абзац -->
<p>
  Страна - это территория, имеющая политические, физико-географические, культурные или
  исторические границы, которые могут быть как чётко определёнными и зафиксированными,
  так и размытыми.
</p>

<!-- Подключаем библиотеку jQuery -->
<script src="jquery-4.0.0.js"></script>

<!-- При открытии страницы, заголовок скрывается -->
<script>
  $('h1').hide(3000);
</script>

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

$('h1').hide(3000);

Чтобы выбрать элемент на странице, нужно написать его селектор. В качестве селектора в этом уроке будем использовать названия HTML-тегов. Чтобы выбрать заголовок, список или абзац, вам нужно разместить название их тега в $():

$('h1').hide(3000);
$('ul').hide(3000);
$('p').hide(3000);

Точно так же вы можете выбирать элементы с помощью CSS-классов, идентификаторов и прочих селекторов, рассмотрим их в следующих уроках.

Какие еще существуют селекторы и способы выборки элементов на странице?

Всего существуют следующие виды селекторов:

• Basic – базовые селекторы: тег, класс, id и др;
• Hierarchy – иерархические селекторы: выбор элементов по родителю, потомку, соседнему;
• Attribute – селекторы атрибутов: выбор элементов по их атрибутам;
• Form – селекторы форм: выбор элементов форм и их состояний, выбрано/не выбрано, отключено/включено и т.д. (изучим в отдельном модуле);
• Filter (псевдоселекторы) – фильтрация элементов после выборки (изучим в отдельном модуле):
  • basic filter – базовые фильтры,
  • child filter – фильтры потомков,
  • content filter – контентные фильтры,
  • visibility filter – фильтры видимости.
• jQuery Extensions – фильтры, являющиеся частью jQuery, а не стандарта CSS. Их рекомендуют использовать с методом filter().

Всё это и многое другое вы изучите в следующих уроках и модулях посвящённых селекторам, фильтрам, формам и т.д.

Основная мысль урока: Селектор — это правило, которое говорит jQuery: какие элементы нужно найти на странице.

Суть jQuery – сначала найти элементы, затем выполнить над ними какое-либо действие.

$(селектор).действие();