Выбор элементов в jQuery

19.06.2021

62.2K

Содержание:

Введение
Базовые селекторы
Селекторы атрибутов
Селекторы отношений
Управление контекстом
Задачи
Комментарии

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

Введение

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

К счастью, библиотека jQuery обеспечивает достаточно мощный способ выбора элементов, основанный на селекторах. Заключается он в том, что для получения набора элементов достаточно просто передать селектор в функцию jQuery:

JavaScript

// selector – это селектор
jQuery('selector');
// или с помощью псевдонима $
$('selector')

Селектор – это шаблон для поиска элементов. Синтаксис селекторов в jQuery соответствует синтаксису CSS, который дополнен некоторыми нестандартными методами.

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

JavaScript

// $elements – переменная, в которой находится объект jQuery, содержащий все найденные элементы
var $elements = $('selector')

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

JavaScript

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

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

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

«Родные» методы возвращают DOM-элемент или HTML-коллекцию элементов, а функция jQuery - объект jQuery.

Это означает, что вы не можете напрямую применить какие-либо «родные» свойства и методы JavaScript для работы с элементами к объекту jQuery. И наоборот, применить свойства и методы jQuery непосредственно к DOM-элементам.

Например, с помощью jQuery получим элемент <body> и изменим ему цвет фона:

JavaScript

// выберем элемент <body>
var $body = $('body');
// установим цвета фону элемента с помощью jQuery-метода css
$body.css('background-color', '#eee');

На чистом JavaScript эти действия записываются так:

JavaScript

// выберем элемента <body>
var bodyElem = document.querySelector('body');
// установим стили элементу, используя нативные свойства JavaScript
bodyElem.style.backgroundColor = '#eee';

Но, чтобы применить родные свойства и методы JavaScript к элементу, обёрнутому в объект jQuery, необходимо в этом случае обратиться непосредственно к этому элементу:

JavaScript

var $body = $('body');
// получим сам элемент
var bodyElem = $body[0];
if (bodyElem) {
  // установим стили на чистом JavaScript
  bodyElem.style.backgroundColor = '#eee';
}

Также, если вы хотите использовать свойства и методы jQuery для DOM-элементов их следует обернуть в объект jQuery. Выполняется это следующим образом:

JavaScript

var bodyElem = document.querySelector('body');
// обернём $bodyElem в объект jQuery
var $body = $(bodyElem);
// установим стили с помощью jQuery-метода css
$body.css('background-color', '#eee');

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

Основные CSS селекторы, которые используются для выборки элементов в jQuery:

$('.class') – по классу;
$('#id') – по id;
$('tag') – по тегу;
$('*') – все элементы;
$('selector1,selector2,...') – по группе селекторов (выбирает все элементы, соответствующие хотя бы одному из указанных селекторов);
$('selector1selector2...') – по комбинации селекторов (выбирает элементы, которые должны соответствовать всем указанным селекторам).

Примеры

1. Найдём все элементы с классом btn:

JavaScript

var elements = $('.btn');

2. Выберем элемент с id="carousel":

JavaScript

var element = $('#carousel');

3. Выполним поиск всех элементов с тегом <a>:

JavaScript

var elements = $('a');

4. Выберем все элементы на странице:

JavaScript

var elements = $('*');

5. Выполним поиск элементов с классом nav или menu:

JavaScript

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

6. Найдём элементы с тегом <nav> и классом menu:

JavaScript

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

Селекторы атрибутов

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

[attr] – по атрибуту независимо от его значения;
[attr=value] – по атрибуту со значением, точно равным заданному;
[attr^=value] – по атрибуту со значением, начинающимся точно с заданной строки;
[attr|=value] – по атрибуту со значением, равным заданной строке или начинающимся с этой строки, за которой следует дефис (-);
[attr$=value] – по атрибуту со значением, оканчивающимся точно на заданную строку (при сравнении учитывается регистр);
[attr*=value] – по атрибуту со значением, содержащим заданную подстроку;
[attr~=value] – по атрибуту со значением, содержащим заданное слово, отделённое пробелами;
[attr!=value] – выбирает элементы, которые не содержат указанного атрибута, либо имеют указанный атрибут, но не с заданным значением.

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

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

Селектор [attr!="value"] не является стандартным CSS селектором. Это расширение jQuery. При его использовании снижается производительность, поэтому в выборке не рекомендуется его использовать. Вместо него предпочтительнее использовать следующую конструкцию:

JavaScript

$('selector').not('[attr="value"]')

Примеры

1. Выберем изображения <img> с атрибутом alt:

HTML

<img src="photo-1.jpg" alt="">
<img src="photo-2.jpg" alt="Фото">
<img src="photo-3.jpg">

<script>
  // используем селектор [attr]
  var $elements = $('img[alt]');
</script>

2. Найдём элементы с атрибутом type="button":

HTML

<input type="button" value="Рассчитать стоимость заказа">
<button type="button">Информация о заказе</button>
<input type="submit" value="Отправить заказ">

<script>
  // используем селектор [attr=value]
  var elements = $('[type="button"]');
</script>

3. Выполним поиск <а> с классом btn и атрибутом href начинающимся со строки «http:».

HTML

<a class="btn btn-default" href="http://itchief.ru">...</a>
<a href="http://jquery.com/">...</a>
<a class="btn" href="my1.html">...</a>

<script>
  // используем селектор [attr^=value]
  var elements = $('a.btn[href^="http:"]');
</script>

4. Выполним поиск всех <div> с атрибутом data-name, имеющим значение, равное alert или начинающимся с alert, за которым следует дефис:

HTML

<div data-name="alert">...</div>
<p data-name="alert">...</p>
<div data-name="alert-warning">...</div>
<div data-name="warning">...</div>

<script>
  // используем селектор [attr|=value]
  var elements = $('div[data-name|="alert"]');
</script>

5. Найдём все элементы с атрибутом href, имеющие значения точно оканчивающиеся на строку «.zip»:

HTML

<a href="downloads/archive.zip">...</a>
<a href="#">...</a>
<div>...</div>

<script>
  // используем селектор [attr$=value]
  var elements = $('[href$=".zip"]');
</script>

6. Найдём все элементы с атрибутом href, содержащим подстроку «youtube»:

HTML

<a href="http://www.youtube.com/">...</a>
<a href="#">...</a>
<div>...</div>

<script>
  // используем селектор [attr*=value]
  var elements = $('[href*="youtube"]');
</script>

7. Выполним поиск <а> с атрибутом data-target, значение которого содержит «btn», отделённое от других пробелами:

HTML

<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> <!-- нет -->

<script>
  // используем селектор [attr~=value]
  var elements = $('a[data-target~="btn"]');
</script>

8. Выберем <a>, которые не содержат атрибут rel, либо имеют его, но не с значением nofollow:

HTML

<a href="#" rel="nofollow">...</a>
<a href="#" rel="nofollow next">...</a>
<a href="#">...</a>
<a href="#" rel="next">...</a>
<p>...</p>

<script>
  // используем селектор [attr!=value]
  var elements = $('a[rel!="nofollow"]');
  // но лучше так
  // $('a').not('[rel!="nofollow"]')
</script>

9. Выберем <a>, имеющий следующие атрибуты: id, href, начинающий со строки «http:» и class, содержащим слово btn, отделённое пробелами:

HTML

<a id="intro" class="btn btn-default" href="http://getbootstrap.com/">...</a>
<a class="btn btn-success" href="http://itchief.ru/">...</a>
<a href="index.html">...</a>

<script>
  // используем комбинацию селекторов $('selector1selector2...')
  var elements = $('a[id][href^="http:"][class~="btn"]');
</script>

Селекторы отношений

В документы каждый элемент связан определёнными отношениями с другими элементами.

В CSS имеется 4 селектора отношений (A и B – это селекторы):

A>B – выбирает элементы B, расположенные непосредственно в A;
A B – выбирает элементы B, расположенные в A;
A+B – выбирает элементы B, каждый из которых расположен сразу же после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности);
A~B – выбирает все элементы B, каждые из которых расположены после A (при этом данные элементы должны являться детьми одного родителя, т.е. находиться на одном уровне вложенности).

Примеры

1. Найдём все <p>, расположенные в <article>:

HTML

<section>
  <p>...</p>
  <article>
    <h1>...</h1>
    <p>...</p> <!-- + -->
    <div>
      <p>...</p> <!-- + -->
    </div>
  </article>
  <aside>
    <p>...</p>
  </aside>
</section>

<script>
  var $elements = $('article p');
</script>

2. Выберем все <li>, расположенные непосредственно в #nav:

HTML

<ul id="nav">
  <li>...</li> <!-- + -->
  <li> <!-- + -->
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
  <li>...</li> <!-- + -->
</ul>

<script>
  var $elements = $('#nav>li');
</script>

3. Найдём все элементы .warning, расположенные сразу же после элементов .danger:

HTML

<section>
  <div class="warning">...</div>
  <div class="danger">...</div>
  <div class="warning">...</div> <!-- + -->
  <div class="danger">
    <div class="warning">...</div>
  </div>
  <div class="warning">...</div> <!-- + -->
</section>

<script>
  var $elements = $('.danger+.warning');
</script>

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

JavaScript

var $elements = $('label + input');

5. Найти все <div>, расположенные после .prev внутри одного родителя:

JavaScript

var $elements = $('.prev~div');

Управление контекстом

По умолчанию поиск элементов осуществляется во всём документе. Но при необходимости вы можете его ограничить, определив контекст поиска.

Контекст представляет собой элемент, в рамках которого следует производить выборку элементов.

Контекст передаётся во второй аргумент функции jQuery. Задавать его можно с помощью селектора, DOM-элемента или набора jQuery.

Например, найдём элементы с классом active в контексте элемента с id="#list":

JavaScript

// #list – контекст
var active = $('.active', '#list');

Задачи

1. Задача:

HTML

...
<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 с использованием базовых селекторов

Введение

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

Примеры

Селекторы атрибутов

Примеры

Селекторы отношений

Примеры

Управление контекстом

Задачи

Комментарии: 0