На этом уроке мы познакомимся с основными селекторами, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.

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

Поиск элементов – это одна из самых частых задач при написании сценариев. Именно с неё всё обычно начинается.

В jQuery поиск элементов осуществляется очень просто. Для этого достаточно в функцию jQuery передать в качестве аргумента строку, содержащий CSS селектор, т.е. шаблон для выбора нужных элементов.

jQuery ('selector')
// или с помощью псевдонима
$('selector')

// selector – это CSS-селектор

В качестве результата данная функция возвращает объект jQuery, содержащий все найденные элементы.

Узнать количество найденных элементов можно с помощью свойства length.

$('a').length

Если не найдены элементы, соответствующие данному CSS селектору, то свойство length вернёт значение 0.

При этом важно понимать, что функция jQuery('selector') и «родные» JavaScript-методы (querySelector, querySelectorAll и др.) возвращают совсем разные вещи. «Родные» методы возвращают DOM-элемент или HTML-коллекцию, состоящую из DOM-элементов. А функция jQuery как уже было отмечено выше, возвращает объект jQuery.

В связи с этим вы, конечно, не можете напрямую применить какие-либо «родные» свойства или методы JavaScript к результату, который вернула функция jQuery('selector'). И наоборот, не можете напрямую использовать свойства и методы jQuery к результату, которые вернули «родные» JavaScript-методы для выбора элементов (querySelector, querySelectorAll и др.).

Пример, в котором рассмотрим, как выбрать элемент body с помощью jQuery и изменить что-то у него:

// 1. Первое с чего обычно начинается всё – это выбор элемента. Например, выберем элемент body.
var body = $('body'); // переменная body содержит объект jQuery, состоящий из одного элемента body
// 2. Выполним какое-то действие над полученным элементом. Например, изменим его цвет фона на #eee
body.css("background-color","#eee");
// 3. Чтобы выполнить над выбранным элементом тоже самое действие, но без использования jQuery метода css нам сначала нужно получить DOM-элемент
// $('body') (объект jQuery, содержащий элемент body) -> $('body')[0] (DOM-элемент body)
body[0].style.backgroundColor = '#eee';  

Пример, в котором рассмотрим, как найти элемент body без использования jQuery и тоже что-то у него изменить:

// 1. Получим DOM-элемент body
var body = document.body;
// или так
// var body = document.querySelector('body');
// 2. Установим фон элементу body
body.style.backgroundColor = '#eee';
// 3. Чтобы поместить DOM-элемент в объект jQuery, данный элемент нужно передать в качестве аргумента функции jQuery
// document.body (DOM-элемент body) -> $(document.body) (объект jQuery, содержащий DOM-элемент body)
$(body).css("background-color","#eee");     

Примеры выбора элементов с использованием CSS селектора

CSS селектор - это шаблон, на основании которого осуществляется выбор элементов. Изучить CSS-селекторы можно в этой статье.

Рассмотрим примеры поиска элементов с использованием CSS селекторов.

Примеры с базовыми селекторами

1. Выбрать все элементы на странице можно с помощью CSS селектора *:

$('*')  

2. Поиск элементов по тегу осуществляется так:

// выберем все элементы по тегу span
$('span')

3. Пример поиска элементов по классу:

// выберем все элементы с классом btn
$('.btn')

4. Для того чтобы найти элемент по id нужно использовать следующий селектор:

// например осуществим поиск элемента по id="carousel".
$('#carousel') 

5. Выбрать элементы, используя несколько шаблонов для поиска элементов, можно указывая их через запятую. Например, выберим все элементы nav и элементы с классом menu:

$('nav,.menu') 

Найти элемент имеющий определённый тег и класс можно так:

// выберем все элементы nav с классом .menu
$('nav.menu') 

Рассмотрим следующий пример:

<body>
  <ul id="list">
    <li>Кофе</li>
    <li class="active">Чай</li>
    <li>Какао</li>
  </ul>
  <p>Текст</p>
</body>

jQuery - использование основных селекторов

Примеры с дочерними и вложенными селекторами

Поиск элемента внутри другого осуществляется с помощью CSS селекторов вида A > B или A B.

Первый вид таких селекторов A > B предназначен для выбора элементов определяемым селектором B, расположенных непосредственно в A. Такой вид селекторов называются дочерними.

Второй вид - это селекторы A B. Они тоже предназначены для выбора элементов определяемым селектором B, которые расположены в A. Но в отличии от A > B элементы будут выбираться вне зависимости от их уровня вложенности в A. Этот вид селекторов называется вложенными.

6. Например, найдём все элементы p, расположенные как непосредственно в div, так и в div вне зависимости от их уровня вложенности:

<body>
  <div>
    <p></p> <!-- 1 -->
    <article>
      <p></p> <!-- 2 -->
    </article>
    <aside>
      <p></p> <!-- 3 -->
    </aside>
  </div>
</body>

<script>
$('div p') // выберет 1, 2 и 3 элемент
$('div>p') // выберет 1 элемент
</script>

7. Например выберем все элементы li, расположенные в #topnav как на первом уровне вложенности, так и вне зависимости от уровня.

<ul id="topnav">
  <li></li> <!-- 1 -->
  <li> <!-- 2 -->
    <ul>
      <li></li> <!-- 3 -->
      <li></li> <!-- 4 -->
    </ul>
  </li>
  <li></li> <!-- 5 -->
</ul>

<script>
$('#topnav li') // веберет 1, 2, 3, 4 и 5 элемент
$('#topnav>li') // веберет 1, 2, 5 элемент
</script>

Примеры с соседними и родственными селекторами

Поиск соседнего элемента осуществляется с помощью селектора A + B. Этот селектор позволяет найти элемент В, который находится непосредственно перед элементом A. При этом элементы A и B должны иметь одного родителя, т.е. быть сиблингами.

Если нужно выбрать все элементы В идущие после А, то можно воспользоваться родственным селектором A ~ B. В этом селекторе элементы A и B должны иметь одного родителя, т.е. быть сиблингами.

A и B - это селекторы, определяющие соответственно элементы A и B.

8. Например, найдём все элементы .alert-warning, расположенные непосредственно после элементов .alert-danger:

<section>
  <div class="alert-warning"></div> <!-- 1 -->
  <div class="alert-danger"></div>
  <div class="alert-warning"></div> <!-- 2 -->
  <div>
    <div class="alert-warning"></div> <!-- 3 -->
  </div>
  <div class="alert-warning"></div> <!-- 4 -->
  <div>
    <div class="alert-danger"></div> <!-- 5 -->
    <div class="alert-warning"></div> <!-- 6 -->
  </div>
</section>

<script>
$('.alert-danger + .alert-warning') // выберет 2 и 6 элемент
$('.alert-danger ~ .alert-warning') // выберет 2, 4 и 6 элемент
</script>

8. Выбрать все элементы input, которые находятся сразу же за элементом label. При этом элементы input и label должны располагаться на одном уровне вложенности, т.е. иметь одного родителя.

$('label + input')

9. Найти все элементы div, расположенные после #prev внутри одного родителя:

$('#prev ~ div')