Добавление и удаление имен классов с помощью jQuery

Атрибут class элементов HTML критически важен для создания интерактивных интерфейсов. В HTML он служит для подачи этих имен в качестве строки, разделенной пробелами. Можно использовать столько пробелов, сколько хотите, но обычно применяют один. Например, у вас может быть:

<div class="some-class my-class another-class"></div>

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

Взяв пример с jQuery и других подобных библиотек, HTML5 представила лучший способ выполнять эту задачу через API, называемый classList. Он прибегает к примерно тем же методам, что и jQuery. Но, к сожалению, нативные методы могут работать только с одним элементом за раз, чем и отличаются от методов jQuery. Если вы захотите добавить класс в набор элементов, то придется итерировать по ним. Вдобавок, будучи нововведением, classList не поддерживается старыми браузерами, в первую очередь Internet Explorer 6– — 9. Чтобы лучше понять эту разницу, рассмотрим код, написанный на чистом JavaScript, который выбирает все элементы с классом some-class и добавляет класс hidden:

var elements = document.getElementsByClassName('some-class');
  for(var i = 0; i < elements.length; i++) {
  elements[i].classList.add('hidden');
}

Предыдущий фрагмент совместим только с современными браузерами, включая Internet Explorer 10 или выше. Теперь сравним код с эквивалентом в jQuery:

$('.some-class').addClass('hidden');

Версия jQuery не только короче, но и совместима с Internet Explorer, начиная с 6 (конечно же, в зависимости от того, какую версию jQuery вы используете!).

ПРИМЕЧАНИЕ

Список имен классов рассматривается как неупорядоченный; таким образом, порядок следования имен в разделенном пробелами списке не имеет семантического значения.

Хотя написание кода, обрабатывающего добавление и удаление имен классов из набора элементов, не настолько монументальный труд, все же это хорошая идея абстрагировать подобные детали с помощью API, который скрывает механические детали подобных операций. К счастью, вам не нужно писать свой код, потому что jQuery уже сделала это за вас.

Добавление имен классов к элементам набора — простая операция, осуществляемая благодаря методу addClass(), который был использован в предыдущем фрагменте кода.

Удалять имена класса просто с помощью метода removeClass().

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

<p id="text" class="hidden">Краткое описание</p>

Вы можете удалить скрытый класс, используя следующую команду:

$('#text').removeClass('hidden');

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

Как видите, метод toggleClass() дает много возможностей. Прежде чем перейти к другим методам, рассмотрим несколько примеров.

Ситуация, когда метод toggleClass() может понадобиться, — если вы хотите легко и быстро переключить визуальное представление элементов, обычно основываясь на некоторых других элементах. Представьте, что хотите разработать простенький виджет Share (Поделиться), при щелчке показывающий окно с кнопками социальных сетей, чтобы поделиться ссылкой на эту страницу. Если кнопку нажать повторно, то окно должно быть скрыто.

Используя jQuery и метод jQuery click(), вы легко сможете сделать этот виджет:

$('.share-widget').click(function() {
  $('.socials', this).toggleClass('hidden');
});

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

if (aValue === 10) {
  $('p').addClass('hidden');
} else {
  $('p').removeClass('hidden');
}

Для этой распространенной ситуации jQuery предоставляет параметр switch, который мы обсудили в описании метода. Можно сократить предыдущий фрагмент кода следующим образом:

$('p').toggleClass('hidden', aValue === 10);

В таком случае класс hidden будет добавлен ко всем абзацам, выбранным, если переменная aValue строго равна 10; в противном случае он будет удален.

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

$('p').toggleClass(function(index) {
  return (index % 2 === 0) ? 'hidden' : '' ;
});

Иногда вам потребуется определить, есть ли у элемента конкретный класс, чтобы в соответствии с этим выполнить некие операции. С jQuery можно это сделать, используя метод hasClass():

$('p:first').hasClass('surprise-me');

Метод будет возвращать значение true, если любой элемент в наборе имеет указанный класс; в противном случае — false. Синтаксис данного метода следующий.

Вспомнив метод is() из главы 3, можно достичь цели так:

$('p:first').is('.surprise-me');

Но, возможно, метод hasClass() делает код более читаемым и внутренне является гораздо более эффективным.

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

Получение и установка стилей элементов с помощью jQuery

Изменение класса элемента позволяет вам выбрать, какой предопределенный набор заданных правил таблиц стилей должен применяться. Но иногда вы просто хотите установить значение лишь одного или нескольких свойств, неизвестных заранее; таким образом, имени класса не существует. Применение стилей напрямую к элементам (через свойство style, доступное для всех элементов DOM) автоматически переопределит стиль, заданный в таблице стилей (за некоторыми исключениями, например !important, но мы не собираемся здесь подробно обсуждать всю специфику CSS), что дает более точный контроль над отдельными элементами и их стилями.

Метод jQuery css() позволит вам манипулировать этими стилями, работая по принципу, аналогичному attr(). Можно установить индивидуальный стиль CSS, указав его имя и значение, или серию стилей, передавая их в объекте.

Аргумент value может также быть функцией аналогично методу attr(). Это значит, что вы можете, например, увеличить ширину всех элементов в наборе на 20 пикселов, умноженных на индекс элемента, как в следующем примере:

$('.expandable').css('width', function(index, currentWidth) {
  return parseInt(currentWidth, 10) + 20 * index;
});

В этом фрагменте нужно передать текущее значение в функцию parseInt(), потому что ширина элемента возвращается в пикселах как строка (например, «50px»). Без преобразования сумма будет совершаться как конкатенация строк наподобие «50px20» (если значение index равно 1).

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

$('.expandable').css('width', '+=20');

И аналогичное сокращение возможно, если вы хотите отнять заданное количество пикселов:

$('.expandable').css('width', '-=20');

Приведем еще один пример того, как jQuery упрощает работу: обычно проблемное свойство opacity будет отлично работать со всеми браузерами (даже старыми), если передать значение между 0.0 и 1.0; больше никакой путаницы с фильтрами alpha в старых IE!

Теперь рассмотрим пример использования второй сигнатуры метода css():

$('p').css({
  margin: '1em',
  color: '#FFFFFF',
  opacity: 0.8
});

Этот код установит указанные значения ко всем элементам в наборе. Но что, если вы хотите создать эффект уменьшения прозрачности для ваших элементов?

Так же как и в сокращенной версии метода attr(), можно применить функции как значения к любому свойству CSS в объекте параметров свойства, и они будут вызваны для каждого элемента в наборе, чтобы определить, какое значение следует применить. Для выполнения этой задачи задействуйте функцию как значение opacity вместо фиксированного числа:

$('p').css({
  margin: '1em',
  color: '#1933FF',
  opacity: function (index, currentValue) {
    return 1 - ((index % 10) / 10);
  }
});

Наконец, обсудим, как можно применить css() с переданным ему именем или массивом имен для получения вычисленного стиля свойства или свойств, связанных с этим именем (именами) первого элемента в объекте jQuery. Когда мы говорим «вычисленный стиль», имеем в виду стиль после применения всех связанных, включенных и встроенных CSS.

Этот вариант метода css() всегда возвращает значения как строку, так что если нужно число или какой-то другой тип, то следует проанализировать возвращаемое значение, используя, в зависимости от ситуации, функции parseInt() или parseFloat().

Чтобы понять, как работает метод чтения css(), когда ему передается массив имен, рассмотрим такой пример. Необходимо вывести в консоль свойство и соответствующее ему значение элемента, имеющего special как его класс для следующих свойств: font-size, color и text-decoration. Для выполнения задачи вы должны написать:

Метод css() — еще один пример того, как jQuery решает множество проблем с кросс-браузерной несовместимостью. Чтобы решить эту задачу с использованием только нативных методов, вам пришлось бы применить метод getComputedStyle() для всех версий Chrome, Firefox, Opera, Safari и Internet Explorer, начиная с версии 9, и свойства currentStyle и runtimeStyle для Internet Explorer 8 и ниже.

Прежде чем продолжить, мы хотим обратить внимание на два важных факта. Первый: разные браузеры могут возвращать разные значения для цветов в CSS, эквивалентных логически, но не текстуально. Например, если у вас есть объявления вроде color: black;, то некоторые браузеры могут вернуть #000, #000000 или rgb(0, 0, 0). Второй факт: получение сокращенных форм в свойствах CSS, таких как margin или border, библиотекой не гарантируется (хотя и работает в отдельных браузерах).

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

The post jQuery: Изменение стилей элемента. Добавление, получение и удаление классов appeared first on HackerX.

• Получение и замена HTML содержимое элемента — html()
• Получение и замена текстового содержимое элемента — text()

jQuery представляет два метода, с помощью которых можно получить или изменить содержимое HTML элементов. Первый метод — это html(). Если мы применим метод без параметров, то мы получим содержимое элемента в формате HTML.

Давайте посмотрим на примере. У нас на странице ест блочный элемент div, который имеет атрибут id с значением blockIdOne. У нас есть задача получить содержимое (с тегами и текстами) данного элемента.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<body>
  <div id="blockIdOne">
    <p class="one">Первый параграф первого дива</p>
    <p class="two">Второй параграф первого дива</p>
    <div class="myBlock">
      <p id="hello">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
    
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>
</html>

Выбираем конкретный элемент, содержимое которого хотим получить используя метод html().

var data = $("#blockIdOne").html();
console.log(data);

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

Ниже приведен пример использование метода html() с параметром, который заменит содержимое HTML элемента.

$("#hello").html("<strong>Lorem ipsum</strong><br> dolor sit amet");

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

Выше мы узнали, что можно получить и изменить HTML содержимое элемента, но мы кроме этого можем получить текстовое содержимое элемента или изменить / заменить его. Для этого мы можем использовать метод .text().

Пример использование метода text() для получение текстового содержимое элемента:

var data = $("#blockIdOne").text();
console.log(data);

Пример использование метода text() для замена текстового содержимое элемента:

$("#blockIdOne").text("hello hello hello");

The post Как заменить / изменить содержимое HTML элементов с помощью jQuery appeared first on HackerX.

Синтаксис метода .attr() для установки/изменение значение

• attr(name, value)
  • Устанавливает указанному атрибуту переданное значение для всех элементов в объекте jQuery.
• Параметры
  • name — (Строка) Имя атрибута, который должен быть установлен.
  • value — (Строка | Число | Логический тип | Функция) Указывает значение атрибута, который может быть любое выражение JavaScript. Любое значение, кроме функции, преобразуется в строку. Функция вызывается для каждого элемента в наборе, передает индекс элемента и текущее значение атрибута с данным именем в элементе. Возвращаемое функцией значение становится значением атрибута.
• Возвращает
  • Коллекцию jQuery.

Пример использование:

$('#my_image').attr('title', "My Image");

Первый вариант использование метода на первый взгляд кажется простым, но это не так! Как уже поняли, вторым параметром (value) метод .attr() принимает значение, которое будет установлено. Значение value может быть любым выражением JavaScript, который в конечном итоге вернет строку.

Станет куда интереснее, когда параметр value будет встроенной функцией или ссылкой на функцию. В таких случаях функция вызывается для каждого извлеченного элемента с возвращаемым значением функции, используемым в качестве значения атрибута. Когда вызывается функция, ей передается два параметра. Один из них содержит отсчитываемый от нуля индекс элемента в наборе, а другой — текущее значение атрибута с именем элемента. Кроме того, элемент устанавливается в качестве контекста функции (this) для ее вызова. Это позволяет функции настроить свою обработку для каждого конкретного элемента — главное преимущество использования ее таким образом.

Пример использование в качестве значение метода .attr() функцию:

$('[title]').attr('title', function(index, previousValue) {
  return previousValue + 'Я элемент ' + index + ' и меня зовут ' + (this.id || 'unset');
});

С помощью этого метода мы находимся на странице все HTML элементы, которые имеют атрибут title, и меняем атрибут каждого элемента. Изменение происходит путем добавления к имеющемуся значению строки, составленной с использованием индекса элемента в DOM и идентификатора атрибута каждого конкретного элемента, если таковой имеется, или в противном случае — строки ‘unset’ (позволяет сбросить все настройки).



Второй вариант применения метода .attr() — это установки / изменение значение нескольких атрибутов за раз.

Синтаксис метода, который может изменить значений нескольких атрибутов сразу

• attr(attributes)
  • Использует свойства и значения, указанные передаваемым объектом, для установки соответствующих атрибутов на всех элементах соответствующего набора.
• Параметры
  • name — (Строка) Имя атрибута, который должен быть установлен.
  • attributes — Объект, свойства которого копируются как атрибуты ко всем элементам в наборе.
• Возвращает
  • Коллекцию jQuery.

С помощью данного варианта использование метода attr() можно очень быстро изменить или установить значение нескольких атрибутов по всем элементам набора. Метод принимает один параметр и это должен быть объектом. Свойства объекта — это имена тех атрибутов, с которыми хотим работать.

Пример использование:

$('input').attr({
  value: '',
  placeholder: 'Поиск по сайту',
  title: 'Пожалуйста, введите значение'
});

Давайте разберем пример выше. Мы находимся на странице все элементы input и изменяем атрибуты value, placeholder и title всех найденных элементов, если они есть, а если нет, то добавляем.

ПРЕДУПРЕЖДЕНИЕ

Изменение атрибута type элемента input или button, которые созданы через метод document.createElement(), приводит к исключению в браузере Internet Explorer 6 — 8.

The post Как установить или изменить значение атрибута с помощью jQuery appeared first on HackerX.

Синтаксис метода .attr()

• .attr(name)
  • Получает значение, присвоенное указанному атрибуту для первого элемента в соответствующем наборе.
• Параметры
  • name — (Строка) Имя атрибута, значение которого должно быть взято.
• Возвращает
  • Значение атрибута для первого соответствующего элемента. Значение undefined возвращается, если соответствующий набор пуст или в первом элементе нет данного атрибута.

Примеры использование метода .attr()

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>.attr()</title>
</head>
<body>
   <img src="image1.jpg" id="my_image" alt="image 1" data-custom="my image 1">
</body>
</html>

Получение значение id элемента:

$('#my_image').attr('id');

Получение значение атрибута alt:

$('#my_image').attr('alt');

Также мы можем получить значение пользовательских атрибутов. Собственные атрибуты можно добавлять, если вы используете HTML5. Кроме всего прочего мы можем получить значение атрибута, которые добавление через JavaScript.

$('#my_image').attr('data-custom');

Имена атрибутов регистронезависимы в HTML. Независимо от того, как атрибут, например, title объявлен в разметке, можно получить атрибуты с помощью любого варианта из заданных: Title, TITLE, TiTlE и любых других комбинаций, они все эквивалентны. Хотя в XHTML для имен атрибутов в разметке должен использоваться нижний регистр, вы можете получить их, применяя любой вариант.

The post Как получить значение атрибута с помощью jQuery. Метод .attr() appeared first on HackerX.

Синтаксис метода .removeAttr()

• removeAttr(name) — Метод удаляет указанный атрибут или атрибуты из всех соответствующих элементов.

Параметры метода .removeAttr()

• name — (Строка) Имя атрибута или разделенный пробелами список имен атрибутов, которые должны быть удалены.

Что возвращает метод .removeAttr()

• Коллекция — После выполнения .removeAttr() он возвращает коллекцию jQuery.

Использование метода .removeAttr()

Давайте посмотрим на реальные примеры использование метода для удаление атрибутов.

Первый пример — у нас в HTML коде есть несколько изображение, которые имеют атрибуты title и alt.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>.removeAttr()</title>
</head>
<body>
   <h1>Первый пример</h1>
   <img src="image1.jpg" alt="image 1" title="my image 1">
   <img src="image2.jpg" alt="image 2" title="my image 2">
   <img src="image3.jpg" alt="image 3" title="my image 3">
</body>
</html>

Цель состоит в том, чтобы удалить атрибуты title и alt из всех изображений на странице. Для выполнения задачи можно написать следующую инструкцию:

$('img').removeAttr('title alt');

Метод removeAttr() использует функцию JavaScript removeAttribute(). Но у него есть преимущество: он вызывается напрямую на каждом элементе в объекте jQuery и позволяет применить цепочку.

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

$(".super_class").removeAttr("title");

Также можем удалить атрибуты всех элементов div, которые имеют одинаковые классы:

$("div.super_class").removeAttr("title");

Удаление атрибута не затрагивает соответствующее свойство из DOM-элемента JavaScript, хотя это может привести к изменению его значения. Например, удаление атрибута readonly из элемента поменяет свойство элемента readonly с true на false, но само свойство останется в элементе.

The post Как удалить атрибут HTML элемента с помощью метода .removeAttr() appeared first on HackerX.

Проверка класса элемента

Как мы знаем все HTML элементы могут иметь атрибут class, который может иметь несколько значение перечисленные пробелом.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мой сайт</title>
  </head>
  <body>
    <div id="blockId" class="myClass1 myClass2">Здесь могут быть вложенные HTML элементы.</div>

    <!-- Подключаем библиотеку jQuery -->
    <script src="./jquery.min.js"></script>
    <!-- Подключаем наш файл скриптов -->
    <script src="./script.js"></script>
  </body>
</html>

И так, у нас в HTML коде есть элемент div, который имеет два класса — myClass1, myClass2. У нас есть задача — проверить с помощью jQuery есть ли у элемента определенный класс по его ID. Это можно сделать с помощью метода .hasClass(). Например, если мы хотим узнать есть ли у элемента класс myClass2, то мы делаем следующую проверку.

if ( $("#blockId").hasClass("myClass2") ) {
    alert("У элемента задан класс myClass2!");
}

Метод .hasClass() всегда возвращает значение типа boolean. То есть, если у нас есть такой класс, то будет возвращен булевое значение true и проверка пройдет успешно. В нашем случае мы увидим сообщение «У элемента задан класс myClass2!».

Очень часто начинающие разработчики используют метод .attr() для проверки / сравнение классов. Но данный метод проверки будет работать неправильно, если атрибут класс имеет несколько значение. Пример кода ниже написан неправильно.

if ( $("#blockId").attr("class") == "myClass2" ) {
    alert("Неправильный вариант проверки!");
}

Узнать / получить значение класса элемента

Выше я уже рассказал, что с помощью метода .attr() нельзя проверить или сравнить значение атрибут class, но с помощью этого метода можно получить значение атрибутов. Если элемент имеет один класс, то мы можем получить его и использовать без дополнительных действий.

var classData = $("#blockId").attr("class");
alert(classData);

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

var theClasses = classData.match(/\w+|"[^"]+"/g);

С помощью этого метода можно узнать и получить значение любого атрибута.

The post Узнать класс HTML элемента с помощью jQuery appeared first on HackerX.