Как заменить jQuery на современный JavaScript: основные методы

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

1. Выбор элементов (Селекторы)

jQuery версия:

// jQuery
$('.my-class')
$('#my-id')
$('div')
$('div.my-class')
$('.my-class:first')

Современный JavaScript:

// JavaScript
document.querySelector('.my-class')            // первый элемент
document.querySelectorAll('.my-class')         // все элементы
document.getElementById('my-id')               // по ID
document.getElementsByTagName('div')           // по тегу
document.querySelector('div.my-class')         // комбинированный селектор
document.querySelectorAll('.my-class')[0]      // первый элемент из коллекции

2. Манипуляции с DOM

Добавление и удаление классов

// jQuery
$('.element').addClass('new-class')
$('.element').removeClass('old-class')
$('.element').toggleClass('active')

// JavaScript
element.classList.add('new-class')
element.classList.remove('old-class')
element.classList.toggle('active')

Изменение содержимого

// jQuery
$('.element').html('<span>Новый контент</span>')
$('.element').text('Просто текст')

// JavaScript
element.innerHTML = '<span>Новый контент</span>'
element.textContent = 'Просто текст'

3. Работа с атрибутами

// jQuery
$('.element').attr('src', 'image.jpg')
$('.element').removeAttr('title')
$('.element').prop('checked', true)

// JavaScript
element.setAttribute('src', 'image.jpg')
element.removeAttribute('title')
element.checked = true

4. События

Простое добавление событий

// jQuery
$('.button').click(function() {
    console.log('Клик!')
})

// JavaScript
document.querySelector('.button').addEventListener('click', () => {
    console.log('Клик!')
})

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

// jQuery
$('#parent').on('click', '.child', function() {
    console.log('Клик по дочернему элементу')
})

// JavaScript
document.getElementById('parent').addEventListener('click', (e) => {
    if (e.target.matches('.child')) {
        console.log('Клик по дочернему элементу')
    }
})

5. AJAX запросы

Простой GET запрос

// jQuery
$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(response) {
        console.log(response)
    },
    error: function(xhr, status, error) {
        console.error(error)
    }
})

// JavaScript
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error))

POST запрос с данными

// jQuery
$.ajax({
    url: '/api/data',
    method: 'POST',
    data: JSON.stringify({ name: 'John' }),
    contentType: 'application/json',
    success: function(response) {
        console.log(response)
    }
})

// JavaScript
fetch('/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'John' })
})
    .then(response => response.json())
    .then(data => console.log(data))

6. Анимации

Простое скрытие/показ элементов

// jQuery
$('.element').hide()
$('.element').show()

// JavaScript
element.style.display = 'none'
element.style.display = 'block'

Плавное появление/исчезновение

// jQuery
$('.element').fadeOut()
$('.element').fadeIn()

// JavaScript
// CSS
.fade-transition {
    transition: opacity 0.3s ease-in-out;
}

// JavaScript
function fadeOut(element) {
    element.style.opacity = '0'
    setTimeout(() => {
        element.style.display = 'none'
    }, 300)
}

function fadeIn(element) {
    element.style.display = 'block'
    setTimeout(() => {
        element.style.opacity = '1'
    }, 10)
}

7. Работа с формами

// jQuery
$('form').serialize()
const value = $('input').val()

// JavaScript
const formData = new FormData(form)
const value = input.value

8. Манипуляции с размерами и позицией

// jQuery
const width = $('.element').width()
const offset = $('.element').offset()

// JavaScript
const width = element.offsetWidth
const rect = element.getBoundingClientRect()

9. Работа с коллекциями элементов

// jQuery
$('.items').each(function() {
    $(this).addClass('active')
})

// JavaScript
document.querySelectorAll('.items').forEach(item => {
    item.classList.add('active')
})

10. Утилиты для работы с массивами и объектами

// jQuery
$.extend({}, obj1, obj2)
$.merge(array1, array2)

// JavaScript
Object.assign({}, obj1, obj2)
[...array1, ...array2]

Полезные функции-помощники

// Функция для удобного выбора элементов
const $ = selector => document.querySelector(selector)
const $$ = selector => document.querySelectorAll(selector)

// Функция для добавления нескольких обработчиков событий
function addEventListeners(element, events, handler) {
    events.split(' ').forEach(event => {
        element.addEventListener(event, handler)
    })
}

// Функция для проверки наличия класса
function hasClass(element, className) {
    return element.classList.contains(className)
}

Советы по миграции с jQuery

1. Постепенная миграция: Заменяйте jQuery код по частям, а не весь сразу
2. Используйте полифилы: Для поддержки старых браузеров
3. Тестируйте тщательно: Особенно в разных браузерах
4. Документируйте изменения: Это поможет другим разработчикам

Преимущества перехода на чистый JavaScript

1. Меньший размер кода (нет необходимости загружать jQuery)
2. Лучшая производительность
3. Современный и поддерживаемый код
4. Лучшее понимание JavaScript
5. Упрощенная отладка