Выборки jQuery: используемые принципы и функционал. Часть 2-я


Чтение и изменение свойств CSS



Изменять отдельные CSS-свойства выбранных элементов можно не только добавляя к ним определённые классы, но и непосредственно указывая нужные свойства.

Функция css() даёт возможность делать это, вы можете использовать её для определения текущего значения CSS-свойства выбранного элемента, для установки этому элементу нового CSS-свойства, а также для настройки нескольких CSS-свойств сразу.

Например, у нас есть блок div с идентификатором "wrapper". Для определения текущего значения CSS-свойства выбранного элемента нужно передать его имя функции css().
Определим, к примеру, цвет фона этого блока:

Код

let bgColor = $('#wrapper').css('background-color');

Теперь в переменной bgColor сохранилось значение цвета фона нашего блока div. (в формате rgb или rgba, если у элемента есть прозрачность)

Примечание: используемые CSS-свойства должны быть конкретизированы, то есть вместо кратких обозначений типа font, margin, border необходимо указывать font-face, margin-top, border-bottom-width и так далее.

Примечание 2: все возвращаемые значения jQuery переводит в пикселы (например, если в CSS для шрифта было установлено значение 120%, jQuery вернёт его в пикселах)

Чтобы присвоить выбранному элементу CSS-свойство, функции css() нужно передать два аргумента: имя свойства и его значение.

Передадим, например, блоку div c классом "main" размер шрифта в 16px:

Код

$('.main').css('font-size', 16);

В данном случае px можно не указывать, поскольку jQuery автоматически переведёт числовое значение в пикселы.

Если размер шрифта вы хотите указать в процентах, то это значение передаётся в виде строки:

Код

$('.main').css('font-size', '120%');

Присваивая элементу свойство CSS, можно использовать сокращённую запись, например, так можно добавить чёрную рамку блоку div с классом "container":

Код

$('.container').css('border', '1px solid black');

Можно устанавливать CSS-свойство, взяв за основу текущее значение. Например, если необходимо реализовать на сайте увеличение шрифта страницы в два раза при клике на кнопку "Увеличить текст" алгоритм следующий:

1. Определяем текущий размер шрифта и сохраняем его в переменную

Код

let currentSize = $('body').css('font-size');

Значение, сохранённое в переменной - это строка(например, "16px"), поэтому его необходимо преобразовать в число.

2. Преобразуем строку в число:

Код

currentSize = parseInt(currentSize, 10);

3. Устанавливаем заново свойство font-size, при этом преобразованное в число значение из переменной currentSize умножаем на 2.

Код

$('body').css('font-size', currentSize*2);

Если для выбранного элемента нужно изменить не одно, а несколько свойств, можно поступить как описано выше, поочерёдно используя функцию css() в каждом случае, а можно поступить более грамотно, используя передачу функции css() объектной константы.

Литерал объекта(или объектная константа) - список пар свойство : значение, разделяемых между собой запятыми.
Так, например, можно добавить выбранному элементу с классом .main одновременно фон и границу:

Код

$('.main').css({'background-color' : '#222222', 'border' : '2px solid red'});

Для удобства восприятия можно пользоваться такой записью, разбивая литерал на строки:

Код

  $('.main').css({
  'background-color' : '#222222',  
  'border' : '2px solid red'
  });

Важно понимать, что литерал объекта, передаваемый функции css(), является её аргументом(как один фрагмент данных).

Чтение, установка и удаление атрибутов HTML



Функция attr() - считывает указанный атрибут HTML-тега и возвращает его значение.
Например, есть блок div с классом .main, внутри которого лежит изображение:

Код

  <div class="main">
  <img src="images/1.png" alt="Изображение">
  </div>

У тега изображения есть атрибут src, его мы и передадим в функцию attr() в качестве аргумента:

Код

let imagesUrl = $('.main img').attr('src');

Функция attr() вернёт значение атрибута src (в данном случае это адрес к файлу картинки images/1.png) и он будет сохранён в переменной imagesUrl

А если вы хотите установить атрибут тега, это можно сделать, передав второй аргумент функции attr().

Например, возьмём код выше и добавим в функции attr() в качестве второго атрибута адрес файла другого изображения new.png:

Код

let imagesUrl = $('.main img').attr('src', 'images/new.png');

Что произойдёт? Установленное ранее значение атрибута src изменится на новое, и на странице сайта вы увидите новую картинку взамен предыдущей.

Функция removeAttr() позволяет полностью удалять атрибут тега.
Например, удалить атрибут alt у изображения в блоке с классом .main можно так:

Код
$('.main img').removeAttr('alt');


Работа с каждым элементом выборки



Ранее мы с вами узнали, что jQuery имеет весьма полезную особенность: автоматическое создание функциями для выборки элементов цикла.
Например, чтобы все изображения медленно исчезли на странице, нужно всего лишь их выбрать и к выборке добавить функцию fadeOut()

Код

$('ímg').fadeOut();

Эта функция проработает выборку в цикле и заставит медленно исчезнуть каждый элемент этой выборки(каждое изображение).

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

Для этой цели существует ещё одна функция jQuery и называется она each()

Воспользоваться ей очень просто: поставьте её после выборки:

Код

$('селектор').each();

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

Анонимная функция не имеет имени и поэтому не может быть вызвана, как мы это делали с другими функциями(именованными).
Она передаётся в качестве аргумента другой функции (в данном случае функции each() ).

Базовый синтаксис анонимной функции:

Код

function () {
  здесь вы размещаете ваш код
}

Получаем полную базовую структуру работы с функцией each():

Код

$('селектор').each(function() {
  здесь вы размещаете ваш код
});

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

Код

$('img').each(function() {
  alert('Найдено изображение');
});


Ключевое слово $(this) позволяет получить доступ к элементу, прорабатываемому в данный момент в цикле.

Если элементов в выборке несколько, то при первом проходе цикла $(this) будет относиться к первому элементу, при втором - ко второму и так далее. Это даёт нам возможность работы с каждым элементом в отдельности.
Давайте попробуем это в реальном примере.

Небольшой практикум на использование $(this)



Условие задачи: на странице сайта есть текст, содержащий ссылки, ведущие за пределы этого сайта (начинающиеся с http://) и есть блок div с классом .list, внутри которого есть заголовок второго уровня и теги списка.

Код

<div class="main">

  <p>
  <a href = "http://getbootstrap.com">Bootstrap</a> is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
  </p>
  <p>
  <a href="http://jqueryui.com">jQuery UI</a> is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
  </p>
  <p>
  <a href="http://cssmediaqueries.com">CSS Media queries</a> allow you to target CSS rules based on - for instance - screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site. Open the overview to see the complete list, and find for each media query if your browser applies these.
  </p>

  <div class="list">
  <h2>Сайты, используемые в тексте страницы:</h2>
  <ul>

  </ul>
  </div>

</div>


Задание: выбрать все ссылки, ведущие за пределы сайта и адреса этих ссылок поместить в список в блоке с классом .list

Решение задачи:

1. Выбираем ссылки, ведущие за пределы сайта:

Код

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

2. К полученной выборке добавляем функцию each(), для получения возможности работы с каждым элементом выборки в отдельности:

Код

$('a[href^="http://"]').each(function() {

});

3. Создадим новую переменную thisLink, в которую каждый раз при проходе выборки циклом (при каждой итерации цикла) будет сохраняться возвращаемое функцией attr() значение атрибута href того элемента, который прорабатывается в данный момент времени.
Другими словами, в этой переменной поочерёдно будут сохраняться адреса всех ссылок.

Код

  $(document).ready(function() {
  $('a[href^="http://"]').each(function() {
  let thisLink = $(this).attr('href');
  });
  })

4. Полученные нами адреса мы с помощью функции append() вставляем в ul список блока с классом .list

Код

$('.list ul').append('<li>' + thisLink + '</li>');

Полный код решения:

Код

  $(document).ready(function() {
  $('a[href^="http://"]').each(function() {
  let thisLink = $(this).attr('href');
  $('.list ul').append('<li>' + thisLink + '</li>');
  });
  })

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

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