jQuery to JS - Переход к нативному JavaScript

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

Выбор элементов

jQuery

$(el);

JavaScript

document.querySelector(el);
document.querySelectorAll(el);

jQuery

Выбор элемента по id
$('#id');

JavaScript

Выбор элемента по id
document.getElementById('id');

Поиск элемента

jQuery

$(el).find(selector);

JavaScript

el.querySelectorAll(selector);

Цикл по каждому элементу - Each

jQuery

$(selector).each(function(index, el) {
    // code

});

JavaScript

var elements = document.querySelectorAll(el);
elements.forEach(function(el, index) {
    // code

});

События

Событие загрузки DOM-дерева

jQuery

jQuery(function($) {
    // code

});

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    // code

});

Событие «Изменение ширины/высоты экрана»

jQuery

$(window).resize(function () {
    // code

});

JavaScript

window.addEventListener('resize', () => {
    // code

});

Событие "on" (click, hover и т.п.)

jQuery

$(el).on('eventName', () => {
    // code

});

JavaScript

el.addEventListener('eventName', () => {
    // code

});

Перемещение по DOM

Предыдущий элемент

jQuery

$(el).prev();

JavaScript

el.previousElementSibling

Следующий элемент

jQuery

$(el).next();

JavaScript

el.nextElementSibling

Родительский элемент

jQuery

$(el).parent();

JavaScript

el.parentElement
// или

el.parentNode

Дочерний элемент (дети)

jQuery

Получить все дочерние элементы
$(el).children();

JavaScript

Получить все дочерние элементы
el.children
Первый дочерний элемент
el.firstElementChild
// или

el.children[0]
Последний дочерний элемент
el.lastElementChild

Работа с классами

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

jQuery

$(el).addClass('className');

JavaScript

el.classList.add('className');

Изменение класса

jQuery

$(el).attr('class', 'className');

JavaScript

el.classList.replace('className');

Удаление класса

jQuery

$(el).removeClass('className');

JavaScript

el.classList.remove('className');

Удаление всех классов

jQuery

$(el).removeClass();

JavaScript

el.removeAttribute('class');

Добавление-удаление

jQuery

$(el).toggleClass('className');

JavaScript

el.classList.toggle('className');

Наличие класса

jQuery

$(el).hasClass('className');

JavaScript

el.classList.contains('className');

Получение класса

jQuery

$(el).attr('class');

JavaScript

el.getAttribute('class');

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

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

jQuery

$(el).attr('value');

JavaScript

el.getAttribute('value');

Добавление атрибута

jQuery

$(el).attr('style', 'color: #043641');

JavaScript

el.setAttribute('style', 'color: #043641');

Удаление атрибута

jQuery

$(el).removeAttr('style');

JavaScript

el.removeAttribute('style');

Выполнение функции при скролле

jQuery

$(window).scroll(function(){
    // code

}

JavaScript

window.onscroll = () => {
    // code

}

Ширина элемента

jQuery

$(el).width();

JavaScript

el.scrollWidth;

Ширина с padding, но без border

jQuery

$(el).innerWidth();

JavaScript

el.clientWidth;

Ширина с padding + border

jQuery

$(el).outerWidth();

JavaScript

el.offsetWidth;

Высота элемента

jQuery

$(el).height();

JavaScript

el.scrollHeight;

Высота с padding, но без border

jQuery

$(el).innerHeight();

JavaScript

el.clientHeight;

Высота с padding + border

jQuery

$(el).outerHeight();

JavaScript

el.offsetHeight;

Создание элементов

jQuery

$('<div/>');

JavaScript

document.createElement('tag');

Добавление элементов (узлов или строк)

Добавление элементов (узлов или строк) JavaScript

Добавление до элемента (рядом)

jQuery

$(el).before(text);

JavaScript

el.before(node или строка);

Добавление после элемента (рядом)

jQuery

$(el).after(text);

JavaScript

el.after(node или строка);

Добавление внутри элемента (в начало)

jQuery

$(parentEl).prepend(el);

JavaScript

el.prepend(node или строка);

Добавление внутри элемента (в конец)

jQuery

$(parentEl).append(el);

JavaScript

el.append(node или строка);

Добавление элементов (HTML)

Добавление элементов (узлов или строк) JavaScript

Добавление до элемента (рядом)

jQuery

$(el).before(html);

JavaScript

el.insertAdjacentHTML('beforebegin', html);

Добавление после элемента (рядом)

jQuery

$(el).after(html);

JavaScript

el.insertAdjacentHTML('afterend', html);

Добавление до элемента (внутри него)

jQuery

$(parentEl).prepend(el);

JavaScript

el.insertAdjacentHTML('afterbegin', html);

Добавление после элемента (внутри него)

jQuery

$(parentEl).append(el);

JavaScript

el.insertAdjacentHTML('beforeend', html);

Копирование (клонирование)

jQuery

$(el).clone();

JavaScript

el.cloneNode(true);

Замена элементов

jQuery

$(el).replaceWith(newHTML);

JavaScript

el.outerHTML = 'newHTML';

Замена тега с сохранением содержимого

Создание обёртки

jQuery

$(el).wrap('<div class="elWrapper"></div>');

JavaScript

tag = document.querySelector(el).innerHTML;
newTag = '<span id="">' + tag + '</span>';
document.querySelector(el).outerHTML = newTag;

Удаление обёртки

jQuery

$(el).unwrap();

JavaScript

wrapperEl = document.querySelector(el);
while (wrapperEl.firstChild) {
    wrapperEl.before(wrapperEl.firstChild);
}
wrapperEl.remove();

Удаление элементов

jQuery

$(el).remove();

JavaScript

el.remove();

Текст

Получение текста

jQuery

$(el).text();

JavaScript

el.textContent

Изменение текста

jQuery

$(el).text('newText');

JavaScript

el.textContent = 'newText';

Изменение текста у элемента без тега

jQuery

Изменить текст у 1-го элемента
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

$(parentEl).textNodes().first().replaceWith(newText);
Изменить текст у всех таких элементов
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

$(parentEl).textNodes().replaceWith(newText);

JavaScript

parentEl.childNodes[3].textContent = 'newText';
childNodes[{номер_DOM_узла}]

HTML

Получение HTML

jQuery

$(el).html();

JavaScript

el.innerHTML

Изменение HTML

jQuery

$(el).html('newHTML');

JavaScript

el.innerHTML = 'newHTML';

CSS

Получение CSS

jQuery

$(el).css('propertyName');

JavaScript

el.getComputedStyle(el)['propertyName']

Изменение CSS

jQuery

$(el).css('font-size', '17px');

JavaScript

el.style.fontSize = '17px';

Value

Получение value

jQuery

$(el).val();

JavaScript

el.value

Изменение value

jQuery

$(el).val('newValue');

JavaScript

el.value = 'newValue';

Форма

Сброс (обнуление) полей формы

jQuery

$('form').trigger('reset');

JavaScript

form.reset();

Эффекты

Hide

jQuery

$(el).hide();

JavaScript

el.style.display = 'none';

Show

jQuery

$(el).show();

JavaScript

el.style.display = '';

FadeIn

jQuery

$(el).fadeIn();

JavaScript

// fadeIn function

function fadeIn(el, display) {
    el.style.opacity = 0;
    el.style.display = display || 'block';
    (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += .1) > 1)) {
            el.style.opacity = val;
            requestAnimationFrame(fade);
        }
    })();
}

Пример.

fadeIn(document.querySelector('.hiddenEl'), 'flex');

FadeOut

jQuery

$(el).fadeOut();

JavaScript

// fadeOut function

function fadeOut(el) {
    el.style.opacity = 1;
    (function fade() {
        if ((el.style.opacity -= .1) < 0) {
            el.style.display = 'none';
        } else {
            requestAnimationFrame(fade);
        }
    })();
};

FadeToggle

jQuery

$(el).fadeToggle();

JavaScript

el.classList.toggle('showEl');
el {
    visibility: hidden;
    opacity: 0;
    transition: .25s visibility, .25s opacity;
}
.showEl {
    visibility: visible;
    opacity: 1;
}

AJAX

JSON

jQuery

$.getJSON('/path', function(data) {
    // code

});

JavaScript

var request = new XMLHttpRequest();
request.open('GET', '/path', true);

request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
    // при успешном подключении

    var data = JSON.parse(this.response);
    } else {
    // подключились к серверу, но он вернул ошибку

    }
};

request.onerror = function() {
    // ошибка подключения

};

request.send();

GET

jQuery

$.ajax({
    type: 'GET',
    url: '/path',
    success: function(resp) {

    },
    error: function() {

    }
});

JavaScript

var request = new XMLHttpRequest();
request.open('GET', '/path', true);

request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
        // при успешном подключении

        var resp = this.response;
    } else {
    // подключились к серверу, но он вернул ошибку


    }
};

request.onerror = function() {
    // ошибка подключения

};

request.send();

POST

jQuery

$.ajax({
    type: 'POST',
    url: 'path/',
    data: data
});

JavaScript

var request = new XMLHttpRequest();
request.open('POST', '/path', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

Альтернативный вариант: метод fetch

Админ admin
» »