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

Введение


Основной синтаксис для выбора элемента на странице сайта с помощью jQuery заключается в использовании команды объект jQuery:

Код
$('селектор')

Например, у вас на сайте есть блок с классом .text_container, без всякого содержимого, совершенно пустой.

Код
<div class="text_container"></div>

Для того, чтобы совершить какие-то действия над ним, его необходимо сначала выбрать. Чтож, вы просто пишите:

Код
$('.text_container')

Здесь мы выбрали элемент по его классу.
Всё, вы получили этот блок в своё распоряжение и он ждёт, что же вы будете с ним делать?
В качестве примера, можно внутрь этого блока просто вставить текст, для этого я пропишу такую запись:

Код
$('.text_container').html('Всем привет!');

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

Всё верно, браузер загрузил HTML-код страницы, после чего скрипт добавил текст внутрь выбранного нами элемента.
Это такой маленький пример, ведущий к сути понимания работы с элементами страницы.

Выбор элемента по его id (идентификатору) производится похожим образом:

Код
$('#wrapper')

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

Код
$('a')

Список многих других поддерживаемых библиотекой jQuery селекторов вы можете посмотреть здесь.

Более сложные селекторы также поддерживаются, например, у нас есть блок с идентификатором main, внутри которого есть какая-то ссылка:

Код

<div id = "main">
  <a href = "#" title = "Ссылка внутри блока">Ссылка</a>
</div>

Чтобы нам выбрать эту ссылку, применим такую запись:

Код
$('#main a')

Таким образом, мы можем выбирать селекторы потомков (тег, который заключён внутри другого тега).

Можно выбирать элемент через дочерние селекторы (они указывают на тег, который является прямым потомком другого тега).
Например, рассмотрим такой код, в нём два параграфа, которые являются прямыми потомками тега body, а один обёрнут в блок с классом wrapper:

Код

<body>
  <p>Дочерний элемент тега body</p>
  <p>Дочерний элемент тега body</p>
  <div class="wrapper">
  <p>А я не скрылся!</p>
  </div>
</body>

Чтобы произвести выборку через дочерние селекторы, пишем:

Код

  <script>
  $('body > p').hide();
  </script>

В данном случае, если открыть страницу в браузере, то мы увидим лишь текст "А я не скрылся!". Он принадлежит как раз тому параграфу, который был в обертке с классом wrapper, а потому не являлся дочерним к тегу body.

Два других параграфа, которые являлись дочерними к body, на странице скрылись, потому как к ним я применил метод hide(), скрывающий выбранные элементы.
Опять же, не сильно вникайте пока в эту запись, потому как здесь цель показать как производится выборка по дочерним селекторам.

Выборка через соседние родственные селекторы (позволяют выбирать тег, идущий в коде сразу после другого тега).
В качестве примера такая ситуация: допустим у вас есть заголовок h2 на странице, а также скрытый блок div с какой-то информацией.
И вам необходимо, чтобы при клике по заголовку, этот блок div с информацией стал видимым.

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

Код
$('h2 + div')

И всё, блок div будет выбран. Но одно условие: в коде он должен находиться сразу после заголовка h2.


Выборка элементов через селекторы атрибута



Селекторы атрибута дают возможность выбирать те элементы, у которых есть определённый атрибут, либо даже атрибут с конкретным значением.
Таким образом, например, можно выбрать на странице все картинки, у которых есть атрибут alt

Код
$('img[alt]')

Сначала вы пишете имя элемента, чей атрибут вы проверяете, а потом селектор атрибута. Таким образом, вы можете выбирать на странице сайта элементы, имеющие определённые атрибуты.
Например, чтобы выбрать все ссылки, у которых есть атрибут href, пишем:

Код
$('a[href]')

Можно выбрать элементы, у которых конкретный атрибут имеет определённое значение, например, так можно найти все поля для ввода текста:

Код
$('input[type = "text"]')

Можно выбрать элементы, атрибут которых начинается с определённого значения, например, выбрать все ссылки, ведущие за пределы вашего сайта:

Код
$('a[href^="http://"]')

В результате выберутся ссылки на сайты типа: http://www.site.ru, http://site.ru. Можно использовать для выбора ссылок mailto:

Код
$('a[href^="mailto:"]')

Есть вариант выборки элементов, чьи атрибуты заканчиваются определённым значением, например, чтобы выбрать все ссылки, указывающие на файлы .pdf, делаем так:

Код
$('a[href$=".pdf"]')

Еще один интересный вариант выборки элементов, который находит элементы с атрибутом, в любом месте которого есть конкретное значение
Например, выберем все ссылки,в которых есть указание на какой-то домен, например site.ru

Код
$('a[href="site.ru"]')

В результате выберутся не только ссылки, указывающие на site.ru, но и www.site.ru, http://www.site.ru, https://site.ru и www.site.ru/index.html
То есть все, которые в своём составе содержат site.ru


Фильтры jQuery (фильтрация выборок по определённым характеристикам)



Общий принцип фильтрации в jQuery: после основного селектора добавляется двоеточие, после чего пишется имя фильтра.

Например, фильтр :even позволяет выбрать все чётные элементы коллекции. Посмотрим на примере таблицы и выберем все чётные строки в ней:

Код
$('tr:even')

Можно еще больше сузить выборку и выбрать чётные строки, но только в таблице, имеющей определённый класс, например класс .stripped

Код
$('.stripped tr:even')

В противоположность фильтру :even есть фильтр :odd, который, как вы уже догадались, выбирает все нечётные элементы коллекции.

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


Фильтры :first и :last выбирают первый и последний элемент группы соответственно. Например, выберем первый абзац на странице:

Код
$('p:first')

А чтобы выбрать последний абзац:

Код
$('p:last')

Фильтр :not() выберет все элементы, которые не соответствуют указанному типу селектора (если проще: выбрать элементы, кроме указанных).
То есть, фильтру :not() вы сообщаете имя селектора, который нужно проигнорировать при выборке. Например, выберем все теги a, кроме тех, у которых имеется класс .menu

Код
$('a:not(.menu)')

Еще пример. Выберем все ссылки, начинающиеся не с http:// , пишем таким образом:

Код
$('a:not(href^="http://")')

Фильтр :has() позволяет выбрать элементы, содержащие другой селектор. Например, нужно выбрать все элементы li, внутри которых есть тег a:

Код
$('li:has(a)')

Ещё один интересный фильтр, под названием :contains(). Данный фильтр позволяет найти элементы, содержащие конкретный текст.
Например:

Код
$('a:contains(Читать дальше)')

Выберутся все ссылки, название которых гласит "Читать дальше".

Фильтр :hidden найдёт вам скрытые на странице элементы. Какие именно:

- элементы, для которых установлено значение none для свойства display
- элементы, скрытые с помощью jQuery-функции hide()
- элементы с нулевой высотой и шириной
- скрытые поля форм

Фильтр не работает с элементами, для свойства visibility которых установлено значение invisible.

Пример того, как найти скрытые блоки div на странице, а затем показать их с помощью метода show():

Код
$('div:hidden').show();

На блоки div, которые в данный момент видимы на странице, этот код не подействует.

В противоположность фильтру :hidden, фильтр :visible находит на странице видимые элементы.

Комментарии к материалу: