Web Мастерская | Блог

Блог

Web Мастерская

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

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
Это самый простой и быстрый способ выбора элементов. Просто напиши псевдокласс рядом с основным селектором, и...

Жалоба

CSS: Как отменить float: left / right;

CSS

Чтобы отменить свойство float: left / right; в CSS, можно использовать несколько способов.

Использовать float: none;

Самый простой способ — это явно указать float: none; для элемента, чтобы отменить его плавающее положение:

ВыделитьCSS

.element {
    float: none;
}

Использовать clear: both;

Свойство clear позволяет отменить влияние плавающих элементов. Если вы хотите, чтобы следующий элемент не обтекал плавающий элемент, используйте clear: both;:

ВыделитьCSS

.element {
    clear: both;
}

Использовать overflow: hidden; или overflow: auto;

Если вы хотите отменить плавание для родительского элемента, можно использовать overflow: hidden; или overflow: auto;. Это заставит родительский элемент обрезать плавающие элементы и не позволять им выходить за его пределы:

ВыделитьCSS

.parent-element {
    overflow: hidden;
}

Использовать display: block; или display: inline-block;

Если вы хотите отменить плавание и вернуть элемент к нормальному потоку документа, можно использовать display: block; ил...

Жалоба

Манипуляция SVG с помощью JavaScript

JavaScript SVG

Scalable Vector Graphics (SVG) — это формат векторной графики, широко используемый в веб-разработке. Одним из мощных инструментов для работы с SVG является JavaScript, который позволяет динамически изменять атрибуты, стили и поведение SVG-элементов.

В этой статье мы рассмотрим основные приемы манипуляции SVG с помощью JavaScript.

Доступ к SVG-элементам

Для того чтобы манипулировать SVG-элементами, нужно сначала получить доступ к ним с помощью JavaScript. Вот несколько способов:

Получение элемента по ID:

ВыделитьJavaScript

let svgCircle = document.getElementById('myCircle');

Получение элементов по классу:

ВыделитьJavaScript

let circles = document.getElementsByClassName('circle');

Получение всех элементов SVG:

ВыделитьJavaScript

let svgElements = document.querySelectorAll('svg *');

Изменение атрибутов SVG

Один из самых частых способов манипуляции SVG — это изменение атрибутов элементов. Вот несколько примеров:

Изменение цвета заливки и обводки:

ВыделитьJavaScript

let circle =

...

Жалоба

Простые и эффективные техники анимации SVG с GSAP

JavaScript SVG

GreenSock Animation Platform (GSAP) — это мощная библиотека для создания качественной анимации в веб-пространстве. Вместе с SVG GSAP позволяет создавать потрясающе выглядящие и интерактивные элементы. В этой статье мы рассмотрим простые и эффективные техники, которые помогут оживить SVG с помощью GSAP.

Введение в GSAP и SVG

Что такое GSAP?
GSAP — это высокопроизводительная библиотека для анимации, позволяющая анимировать практически любые CSS-свойства и DOM-элементы. В отличие от CSS-анимации, GSAP предлагает больший контроль и лёгкость управления.

Как подключить GSAP?
Подключить GSAP можно через CDN:

ВыделитьHTML

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Простые техники анимации SVG с GSAP

Анимация движения (Motion Path)
GSAP позволяет анимировать путь (motion path) по траектории, заданной в SVG. Это особенно полезно для создания плавных перемещений объектов:

ВыделитьHTML

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10,10

...

Жалоба