Web Мастерская

Блог

Web Мастерская

SVG: preserveAspectRatio

Атрибут preserveAspectRatio используется в SVG (Scalable Vector Graphics) для управления тем, как содержимое рисунка сохраняется относительно своего контейнерного блока при изменении размеров окна просмотра или самого контейнера. Этот атрибут позволяет разработчикам контролировать поведение содержимого SVG при изменениях масштаба, гарантируя сохранение пропорций или центрирование внутри доступной области.

Основные компоненты атрибута

Значение по умолчанию (xMidYMid meet)
По умолчанию значение preserveAspectRatio равно "xMidYMid meet". Это значит, что рисунок центрируется горизонтально и вертикально, а также сохраняет своё соотношение сторон путём уменьшения размера, чтобы поместиться целиком в окно просмотра.

Формат значений
Формат значения выглядит следующим образом:

ВыделитьSVG

<preserveAspectRatio-value> = [ <align> || <meetOrSlice> ]

Где:

<align>: управляет выравниванием SVG-контента внутри контейнера.
<meetOrSlice>: контролирует, должно ли содержание растягиваться ("slice") или

...

Жалоба

Cannot read properties of undefined (reading 'trim')

JavaScript

Ошибка TypeError: Cannot read properties of undefined (reading 'trim') возникает, когда вы пытаетесь вызвать метод или прочитать свойство у переменной, которой присвоено значение undefined или null.

Обычно такая ошибка встречается в JavaScript, когда программа ожидает объект или строку, но по факту переменная не была инициализирована или стала неопределённой.

Наиболее частые причины появления этой ошибки

Обращение к свойствам объекта, который не определен
Например, вы вызвали метод .trim() на строке, но строка оказалась равна undefined:

ВыделитьJavaScript

let myVar = undefined;
console.log(myVar.trim()); // Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

Несуществующие элементы DOM
Если вы пытаетесь манипулировать элементом, который не существует в документе:

ВыделитьJavaScript

const element = document.querySelector('.nonexistent-class');
console.log(element.textContent.trim()); // Uncaught TypeError: Cannot read properties of null (reading 'trim')

Поддержка устар...

Жалоба

jQuery: Оптимизация производительности

Библиотека JS Производительность

Зачем заботиться о производительности? Скорость загрузки и реакции страницы напрямую влияет на удобство пользования сайтом и конверсии. Именно поэтому оптимизация — важная составляющая качественного продукта.

Кеширование селекторов

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

ВыделитьjQuery

// Плохой пример (медленно)
for(let i = 0; i < 100; i++) {
    $("#myDiv").addClass("active");
}

// Хороший пример (быстро)
let myDiv = $("#myDiv");
for(let i = 0; i < 100; i++) {
    myDiv.addClass("active");
}

Делегирование событий

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

ВыделитьjQuery

// Плохой пример (каждый item слушает

...

Жалоба

jQuery: Продвинутые техники манипуляции DOM

Библиотека JS

jQuery — это библиотека JavaScript, облегчающая работу с Document Object Model (DOM). Она помогает изменять структуру страницы, стилизовать элементы и создавать динамичный пользовательский интерфейс. В этой статье мы рассмотрим полезные техники и примеры для продвинутой работы с DOM.

Управление DOM-структурой

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

ВыделитьjQuery

// Создать новый div и добавить его в конец body
$('<div>Новый элемент!</div>').appendTo('body');

// Добавить элемент в начало списка ul
$('<li>Новый пункт списка</li>').prependTo('ul');

// Вставить элемент после другого элемента
$('<button>Нажмите меня</button>').insertAfter('#targetButton');

Копирование и перемещение элементов
Часто требуется переместить или скопировать элементы на странице. Вот как это делается:

ВыделитьjQuery

// Копируем элемент и помещаем копию в конец страницы
$('#myDiv').clone().appendTo('body');

//

...

Жалоба

jQuery: Использование псевдоклассов CSS

CSS Библиотека JS

Иногда при написании скриптов на jQuery хочется отобрать первые, последние или промежуточные элементы с помощью удобных выражений вроде :first, :last, :even, :odd. Однако эти псевдоклассы ведут себя особым образом и могут приводить к неожиданностям, если не соблюдать осторожность.

Какие бывают псевдоклассы?

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

:first — выбирает первый элемент из набора.
:last — выбирает последний элемент из набора.
:even — выбирает элементы с чётными индексами (начиная с нуля).
:odd — выбирает элементы с нечётными индексами.
:eq(N) — выбирает элемент с номером N (также начинается с нуля).
:gt(N) — выбирает элементы с номерами большими, чем N.
:lt(N) — выбирает элементы с номерами меньшими, чем N.

Когда использовать псевдоклассы?

Псевдоклассы удобно использовать в двух ситуациях:

Непосредственно в селекторе jQuery
Это самый простой и быстрый способ выбора элементов. Просто напиши псевдокласс рядом с основным селектором, и...

Жалоба