Базовые селекторы в jQuery 4

Базовые селекторы существующие в jQuery 4:

• $('tag') — имя HTML-тега, выбирает элементы по имени тега. Пример: $('p');
• $('.class') — название CSS-класса, выбирает элементы по CSS-классу. Пример: $('.menu');
• $('#id') — идентификатор элемента, выбирает элемент по его ID. Пример: $('#header');
• $('*') — символ звёздочка, выбирает все элементы на странице. Пример: $('*');
• $('tag.class') — комбинированный селектор, выбирает элементы указанного тега с данным классом. Пример: $('p.text') — выбрать все <p> с классом text. Можно использовать различные комбинации, например: $('.menu.item') и т.д.;
• $('sel, sel, sel') — множественный селектор, селекторы через запятую, выбирает элементы по нескольким селекторам сразу. Примеры: $('h1, p, li'), $('h1, #menu, .item') и т.д.

По сути можно использовать любой CSS-селектор, который есть в языке CSS.

Рассмотрим пример:

<!-- Заголовок -->
<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>
  $(document).ready(function() {
    $('h1').hide(3000);
  });
</script>

Добавьте тегу h1 атрибуты: class = "header" и id = "countries":

<h1 class="header" id="countries">Страны</h1>

Теперь этот заголовок можно выбрать различными способами:

• $('h1') — по имени тега;
• $('.header') — по CSS-классу;
• $('#countries') — по идентификатору;
• $('h1.header') — комбинированно;
• и т. д.

Все четыре способа выберут этот заголовок.

Рассмотрим пример со списком. Добавьте тегу ul атрибуты: class = "list" и id = "menu":

<ul class="list" id="menu">

Теперь список ul можно выбрать теми же способами, что и заголовок:

• $('ul') — по имени тега;
• $('.list') — по CSS-классу;
• $('#menu') — по идентификатору;
• $('ul.list') — комбинированно;
• и т. д.

Полный пример кода:

Пример множественного селектора (через запятую), выберем одновременно заголовок и список:

• по тегам: $('h1, ul');
• по CSS-классам: $(.header, .list);
• по id: $(#countries, #menu);
• и т. д.

Существуют ещё иерархические селекторы (через пробел), которые позволяют выбирать вложенные элементы (например $('ul li')). Их вы изучите в следующем уроке.

Помни: селекторы тегов и CSS-классов могут выбирать один или несколько элементов на странице. Селектор id выбирает только один элемент, поскольку id должен быть уникальным на странице.

Кратко

• $('tag') — имя тега;
• $('.class') — название CSS-класса;
• $('#id') — имя идентификатора;
• $('*') — выбрать все элементы;
• $('tag.class') — комбинированный селектор, еще примеры: $('tag#id'), $('#id.class') и т. д.
• $('sel, sel, sel') — множественный селектор, выбор по нескольким селекторам, например: $('h1, p, .menu') — выбрать все заголовки первого уровня, все абзацы и меню.