Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Выборка jquery элементов поможет вам управлять элементами веб страницы более гибко

Доброго времени суток, гики веб-разработки и гости моего обучающего блога. Сегодняшняя публикация будет посвящена очень важной теме, без изучения которой дальнейшая работа с библиотекой jQuery будет неполноценной и даже бессмысленной. Это выборка jQuery — элементов.

Я постарался уместить в одну статью все важные моменты работы с ней. Поэтому после прочтения вы освоите базовые селекторы, узнаете, как можно вытащить объекты по их атрибутам, тегу, по классу, идентификатору и даже содержимому. Давайте поскорее приступать к делу!

Селекторы бывают разные: общие, идентификационные, классные…

Разработчик обсуждаемой библиотеки Джон Резиг и позже его команда действительно создали прекрасный программный продукт. Благодаря продуманному функционалу мы с вами можем всего лишь одной короткой строкой кода найти любой элемент по абсолютно различным параметрам. И для этого были разработаны базовые селекторы. Я перечислил их в таблице.

Общий вид селектора Выполняемые действия
$(«) Выбирает все объекты на веб-странице.
$(«SomeElement») Указывает, что действия будут происходить над тегом.
$(«.SomeClass») Выбирается указанный класс.
$(«#SomeId») Дальнейшие действия будут производиться с элементом с выбранным id.
$("elem1, …, elemN ") Выбираются все перечисленные объекты.

Для закрепления теоретического материала разберите следующую программу.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>Селекторы</title>
<script src=" https://code.jquery.com/jquery-2.2.4.min.js "></script>
<style>
body {
text-align: center;
font-size: 29px;
width: 23%;
margin-left: 39%;
}
</style>
</head>
<body>
<h2>Фрукты</h2>
<div class="apple">Яблоки</div>
<div class="cherry">Вишни</div>
<div class="watermelon">Арбузы</div>
<div class="plum">Сливы</div>
<script type="text/javascript">
jQuery(document).ready(function(){
    $(".cherry, .plum").css('background-color', 'pink');
});
</script>
</body>
</html>

Как видите, задний фон поменялся только у второго и четвертого пункта.

Помимо базовых селекторов, можно вызывать иерархические. Их всего два вида.

Иерархический селектор Выполняемые действия
Объект-предок > объект-потомок Благодаря такой записи выбираются все объекты-потомки с указанным селектором, которые унаследованы от конкретного объекта-предка.
selectorX ~ selectorY Создается выборка из всех селекторов «selectorY», которые находятся после элементов «selectorX».

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<title>Иерархия</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
body {
text-align: center;
font-size: 29px;
width: 23%;
margin-left: 39%;
}
</style>
 
</head>
<body>
<div id="opinion">
	<p class="good">Food</p>
	<p class="bad">The way to hotel</p>
  <p class="bad">Staff</p>
	<p class="good">Beach</p>
	<p class="bad">Clubs</p>
</div>
 
<script>
jQuery(document).ready(function(){
    $(".good ~ .bad").css('background-color', 'red');
 
});
</script>
</body>
</html>

Но и это еще не все. В данной библиотеке предусмотрены еще и селекторы атрибутов. Зачем же они нужны? А затем, чтобы сделать работу с различными элементами веб-страницы еще более гибкой и простой.

Общий вид Выполняемые действия
[attr] Вытягиваются все объекты с указанным атрибутом.
[attr=’SomeValue’] Выбираются элементы, у которых атрибут равен (в данном случае) ’SomeValue’.
[attr^=’SomeValue’] Определяются те объекты, у которых ’SomeValue’ расположен в самом начале.
[attr$=’SomeValue’] Аналогично предыдущему, только расположение в конце.
[attr~=’SomeValue’] Выбирает все объекты, у которых в атрибуте есть значение, состоящее из ’SomeValue’. Т.е после данного селектора через пробел могут находиться еще слова, например, $(«a[id~='ColBlue']„) => id=“ColBlue selected».
[attr*=’SomeValue’] Находит элементы с подстрокой ’SomeValue’.
[attr|=’SomeValue’] Выборка из объектов либо с указанным селектором, либо с перечнем, написанным через дефис, где ’SomeValue’ стоит первым.

Всевозможные методы фильтрации

Несмотря на обширный список инструментов управления выборками, в jQuery предусмотрены и методы. Я расскажу о некоторых из них.

Filter (condition)

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


Slice (x, y)

Благодаря данному механизму можно указывать диапазон значений, с которыми будут производиться какие-то действия. Заметьте, что отсчет начинается с нуля. При этом если не указан параметр y, то «ползунок» метода выбора диапазона захватывает все объекты, начиная с позиции x и заканчивая концом выборки.

has (embedded element)

Этот метод проверяет, есть ли прописанный вложенный элемент в блоке/объекте, который проверяется. К примеру, вот такой строкой кода

 «$('div').has ('ol').css (…);»

будет совершен поиск тега <ol> в <div>.

find (SomeObject)

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

Работа с коллекциями

Напоследок хочу рассказать об очень удобном инструменте управления выборками. Своей работой он напоминает цикл перебора элементов, только вот пишется в одну строку. Это метод each ().

В качестве параметра он принимает function (i, param), где i – индексы, а param – выборка. Его очень часто используют во различных задачах, например, для выбора каждой картинки слайдера или форматирования каждого поля формы регистрации.

В данной программе проанализируйте работу метода each.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>actions</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
body {
text-align: center;
font-size: 29px;
width: 23%;
margin-left: 39%;
}
</style>
 
</head>
<body>
<div id="options">
	<p >Talking</p>
	<p >Walking</p>
  <p >Studing</p>
	<p >Running</p>
	<p >Sleeping</p>
</div>
 
<script>
$(function(){
    $("p").each(function(index, elem){
        $(this).css('background-color', 'orange');
    });
});
</script>
</body>
</html>

Также реокмендую курс Евгения Попова Javascript + jQuery для начинающих, по ссылке. Я сам начинал учиться по нему и поэтому рекомендую и вам. Евгений объясняет все понятно и подробно, для новичков.

Javascript + jQuery для начинающих

На этом публикация подошла к концу. Вступайте в ряды моих подписчиков и рассказывайте о моем блоге друзьям. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 6 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    Имена классов cherry и plum засовываются в переменную. Вобще-то имена классов особенно тега div часто совпадают на одной странице. Авторам надо быть внимательными. Как то ненадёжно к ним обращаться по одному имени класса.

    29.01.2017 в 04:33