Как в jQuery выбрать элементы по селектору?

Александр Мальцев
20K
0
Как в jQuery выбрать элементы по селектору?
Содержание:
  1. Как в jQuery найти элементы по селектору
  2. Выбор с использованием базовых селекторов
  3. Найти элементы по атрибуту
  4. Примеры с дочерними и вложенными селекторами
  5. Комментарии

В этой статье вы узнаете: как выполнить поиск элементов на странице по селектору, виды селекторов в jQuery, примеры нахождения элементов по id, классу, тегу, нескольким селекторам, атрибуту, в том числе и по data, а также соседних и вложенных элементов.

Как в jQuery найти элементы по селектору

Вообще поиск элемента на странице или в каком-то другом элементе – это одна из самых частых задач веб-разработчика при написании сценариев.

В jQuery выбор элементов осуществляется посредством функции jQuery в которую нужно передать строку (CSS селектор).

CSS селектор - это шаблон, на основании которого осуществляется поиск соответствующем ему элементов.

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

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

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

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

// anchors - переменная, в которой находится объект jQuery, содержащий все найденные элементы a
var anchors = $('a');
// количество найденных элементов
var length = anchors.length;

Если length вернёт 0, то это значит, что объект jQuery «пустой», т.е. он не содержит искомых элементов, т.к. они не были найдены на странице.

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

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

Отличие на примере:

/* jQuery */
var body = $('body'); // выбор элемента body (объект jQuery)
body.css('background-color','#eee'); // изменим у него цвет фона (посредством jQuery метода css)

/* чистый JavaScript */
var body = document.querySelector('body'); // получим элемент body
body.style.backgroundColor = '#eee'; // изменим у него цвет фона

/* получение DOM элемента из jQuery объекта */
var body = $('body');
if (body.length > 0) {
  var $body = body[0]; // получение первого DOM элемента из jQuery объекта
  $body.style.backgroundColor = '#eee';
}

/* оборачивание DOM элементов в jQuery объект */
var body = document.querySelector('body');
var $body = $(body); // оборачивание DOM элемента в jQuery объект
body.css('background-color','#eee');

Выбор с использованием базовых селекторов

Поиск элементов в jQuery:

  • $('.имя_класса') - по классу;
  • $('#идентификатор') - по id;
  • $('тег') - по тегу;
  • $('*') - все элементы.

Выбор с использованием группы селекторов:

$('селектор_1, селектор_2, ...')

Найти посредством комбинации селекторов:

$('селектор_1селектор_2...')

Найти элементы по классу

CSS селектор для поиска элементов по классу:

$('.имя_класса')

Например, выберем все элементы на страницы с классом btn:

var btns = $('.btn');

Поиск по id

Селектор для выбора элемента по id:

$('#имя_идентификатора')

Например, найдем элемент в документе с id, равным carousel:

var carousel = $('#carousel');

Выбор по тегу

Селектор для выбора элементов по тегу:

$('тег')

Например, найдём все элементе с тегом a:

var anchors = $('a');

Найти все элементы

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

var elements = $('*');

Выбор элементов по группе селекторов

Найти элементы по нескольким селекторам выполняется посредством их перечисления через запятую:

$('селектор_1, селектор_2, ...')

Например, выполним поиск элементов у которых имеется класс nav или menu:

var elements = $('.nav, .menu');

Поиск, используя комбинацию нескольких селекторов

Найти элемент одновременно соответствующий нескольким CSS селекторам выполняется через их последовательного записывания без использования пробела:

$('селектор_1селектор_2...')

Например, выберем все элементы с тегом nav и классом menu:

// nav - селектор для выбора элементов с тегом nav
// .menu - селектор для выбора элементов с классом menu
var navs = $('nav.menu');

Пример

...
<body>
  <ul id="list"> <!-- 1 -->
    <li>Кофе</li> <!-- 2 -->
    <li class="active">Чай</li> <!-- 3 -->
    <li>Какао</li> <!-- 4 -->
  </ul>
  <p>Текст</p> <!-- 5 -->
</body>
</html>
  • $('#list') - 1;
  • $('.active') - 3;
  • $('li') - 2, 3, 4;
  • $('ul,li,p') - 1, 2, 3, 4, 5;
Поиск элементов в jQuery с использованием базовых селекторов

Найти элементы по атрибуту

jQuery - Селекторы по атрибуту

CSS селекторы для выбора элементов по атрибуту:

  • $('[имя_атрибута]') - по имени атрибута;
  • $('[имя_атрибута=значение]') - по имени и значению атрибута;
  • $('[имя_атрибута^=знач]') - по имени и значению, с которого оно должно начинаться;
  • $('[имя_атрибута|=значение]') – по имени и значению, которое должно быть равно указанному или начинается со значение-;
  • $('[имя_атрибута$=чение]') – по имени и значению, на которое оно должно заканчиваться;
  • $('[имя_атрибута*=ачен]') – по имени и части значения;
  • $('[имя_атрибута~=ачен]') – по имени и части значения, которое отделено от других с помощью пробела.

Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:

  • $('a[rel="nofollow"]') - двойные кавычки внутри одинарных кавычек;
  • $("[rel='nofollow']") - одинарные кавычки внутри двойных кавычек;
  • $('a[rel=\'nofollow\']') - экранированные одинарные кавычки внутри одинарных кавычек;
  • $("a[rel=\"nofollow\"]") - экранированные двойные кавычки внутри двойных кавычек;

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

// найдём все элементы a, имеющие атрибут rel="nofollow"
var anchors = $('a[rel="nofollow"]');

$('[имя_атрибута|=значение]') - выберет элементы на странице, которые имеют указанный атрибут со значением, равный указанному или начинающего с него (после него должен следовать дефис).

Например, выполним поиск всех элементов div с data атрибутом name и значением alert или начинающимся с alert-:

// найдём все элементы a, имеющие атрибут rel="nofollow"
var elements = $('div[data-name|="alert"]');

Среди элементов он выберет следующие:

<div data-name="alert">...</div> <!-- да -->
<p data-name="alert">...</p> <!-- нет -->
<div data-name="alert-warning">...</div> <!-- да -->
<div data-name="alertwarning">...</div> <!-- нет -->
<div data-name="warning">...</div> <!-- нет -->
<div>...</div> <!-- нет -->

$('[имя_атрибута*=ачен]') - находит элементы с атрибутом и значением, которое частично или полностью соответствует указанному.

Например, найти все элементы, у которых в атрибуте href содержится фраза youtube:

var elements = $('[href*="youtube"]');

Среди следующих элементов будут выбраны:

<a href="http://www.youtube.com/">...</a> <!-- да -->
<a href="#">...</a> <!-- нет -->
<div>...</div> <!-- нет -->

$('[имя_атрибута~=ачен]') - найдет элементы с атрибутом, значение или часть которого отделенного от других посредством пробела равно указанному.

Например, выполним поиск элементов а с атрибутом data-target, значение которого равно btn или отделено от других посредством пробела:

var elements = $('a[data-target~="btn"]');

Среди элементов он выберет следующие:

<a href="#" data-target="btn btn-default">...</a> <!-- да -->
<a href="#" data-target="btn" >...</a> <!-- да -->
<button type="submit" data-target="btn btn-default">Отправить</button> <!-- нет -->
<a href="#">...</a> <!-- нет -->
<a href="#" class="btn-default">...</a> <!-- нет -->

$('[имя_атрибута$=чение]') - выбирает элементы с атрибутом и значением, которое заканчивается на указанное.

Например, выполним поиск всех элементов, у которых значение атрибута href заканчивается на «.zip».

var elements = $('[href$=".zip"]');

Этот селектор выберет следующие элементы:

<a href="downloads/archive.zip">...</a> <!-- да -->
<a href="#">...</a> <!-- нет -->
<div>...</div> <!--нет -->

[name="value"] - выбирает элементы, у которых указанный атрибут (name) имеет значение value.

Например, выбрать все элементы, которые атрибут type со значением button:

<input type="button" value="Рассчитать стоимость заказа"><!--Этот элемент будет выбран, т.к. его атрибут type содержит значение button-->
<button type="button">Информация о заказе</button><!--Этот элемент будет выбран, т.к. его атрибут type содержит значение button-->
<input type="submit" value="Отправить заказ"><!--Этот элемент не будет выбран, т.к. его атрибут type не содержит значение button-->

<script>
var elements = $('[type="button"]');
</script>

[name!="value"] - выбирает элементы, которые не имеют указанный атрибут (name) или имеют указанный атрибут (name), но он не содержит заданного значения (value).

Например, выбрать элементы a, которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.

<a href="#" rel="nofollow">...</a><!--Это элемент не будет выбран, т.к. его атрибут rel содержит значение, равное nofollow-->
<a href="#" rel="nofollow next">...</a><!--Это элемент будет выбран, т.к. он является элементом a и содержит атрибут rel со значением не равным nofollow-->
<a href="#">...</a><!--Это элемент будет выбран, т.к. он является элементом a и не содержит атрибут rel-->
<a href="#" rel="next">...</a><!--Это элемент будет выбран, т.к. он является элементом a и содержит атрибут rel со значением не равным nofollow-->
<p>...</p><!--Это элемент не будет выбран, т.к. он не является элементом a-->

<script>
var elements = $('a[rel!="nofollow"]');
</script>

[name^="value"] - выбирает элементы, которые имеют указанный атрибут (name) со значением, начинающимся с заданного значения (value).

Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http".

<a class="btn btn-default" href="http://itchief.ru">...</a><!--Этот элемент будет выбран, т.к. он является элементом a, имеет класс btn и атрибут href со значением, начинающимся с http-->
<a href="http://jquery.com/">...</a><!--Этот элемент не будет выбран, т.к. он не имеет класс btn-->
<a class="btn" href="my1.html">...</a><!--Этот элемент не будет выбран, т.к. у него значение атрибута href не начинается с http-->

<script>
var elements = $('a.btn[href^="http"]');
</script>

[name] - выбирает элементы, которые имеют указанный атрибут (name). Значение данного атрибута (name) может быть любым.

Например, выбрать изображения (img), имеющие атрибут alt:

<img src="photo-1.jpg" alt=""><!--Этот элемент будет выбран, т.к. он является элементом img и имеет атрибут alt-->
<img src="photo-2.jpg" alt="Фотография 2"><!--Этот элемент будет выбран, т.к. он является элементом img и имеет атрибут alt-->
<img src="photo-3.jpg"><!--Этот элемент не будет выбран, т.к. он не имеет атрибут alt-->

<script>
  $('img[alt]');
</script>

[name1="Value1"][name2="Value2"] - выбирает элементы, у которых указанные атрибуты (name1 и name2) имеют соответствующие значения (Value1 и Value2).

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

$("[attr1][attr2][attrN]");
//attr1 - селектор атрибута 1
//attr2 - селектор атрибута 2
//attrN - селектор атрибута N

Например, выбрать элементы a, имеющие атрибут id, атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:

<a id="myID" class="btn btn-default" href="http://getbootstrap.com/">...</a><!--Это элемент будет выбран, т.к. он является элементом a и соответствует всем 3 фильтрам атрибутов-->
<a class="btn btn-warning" href="http://itchief.ru/">...</a><!--Это элемент не будет выбран, т.к. он не соответствует фильтру [id]-->
<a href="index5.html">...</a><!--Это элемент не будет выбран, т.к. он не соответствует всем 3 фильтрам: [id], [href^="http"] и [class~="btn"]-->

<script>
var elements = $('a[id][href^="http"][class~="btn"]');
</script>

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

Поиск элемента внутри другого осуществляется с помощью 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')

Комментарии ()

    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.