JavaScript и jQuery – одинаковые функции

Admin JavaScript Обсудить

Справочная информация по одинаковым функциям в JavaScript и jQuery. Здесь же можно увидеть наглядно отличие JS и jQuery.

Эта статья вовсе не о преимуществах jQuery. Наоборот, библиотека jQuery постепенно уходит в прошлое, ставя чистый JS код на первое место.

Эта статья-подсказка, как сделать что-то в js или jQuery, зная только один из них. Из-за того, что они похожи, очень легко запутаться.

Добавить или удалить класс

JS

Класс указывается без точки.

el.classList.add('class');
el.classList.remove('class');

jQuery

el.removeClass(".class");
el.addClass('.class');

В отличие от JS в jQuery можно сочетать добавления в одну строчку:

el.removeClass(".class").addClass('.class');

Проверить класс на существование

JS

if (el.classList.contains('class')) { }

jQuery

if (el.hasClass('class')) { }

Применить функцию ко всем объектам

JS

var
blockId = document.getElementById('id'),
class = blockId.querySelector('.class'),
el = class.querySelectorAll('.class2');

el.forEach(function(el) {}

jQuery

jQuery('id').find('.class').each(function (el) { }

Сравнение размера экрана

JS

if (window.innerWidth > 500 ) { }

jQuery

jQuery(window).width() > 500 {}

click

JS

el.addEvent('click', function(){}

jQuery

jQuery('.class').on('click', function(){}

Или:

el.on('click', function(){}

children

JS

Такого нет в JS. Надо делать иначе.

jQuery

var class = el.children('.class')

События

JS

addEventListener

jQuery

addEvent

Выбрать только элементы начиная с какого-нибудь по счету

JS

Сначала собираем элементы, затем переводим в массив. Дальше, отсекаем часть, например, 1. И после ставим нужный нам класс.

var class = previous-class.querySelectorAll('.class');
var len = class.length;

if (len > 1) {
    class = Array.from(class);
    class = class.slice(1);

    class.forEach(function (block) {
        var classInside   = block.querySelector('.class-inside');
        classInside.classList.add('new-class');
    });
}

jQuery

Обратить внимание на :gt() Selector.

jQuery(document).ready(function($) {
       var line = $('.line'),
        divCount = line.length,
        divLine = $('.line:gt(2)');

    if(divCount > 2) {
        line.each(function () {
            divLine.addClass('new-class');
        });
    }
});

Нажатие на кнопку

Разница:

  • Клик в js отрабатывается с помощью функции addEvent, в jQuery с помощью on
  • Создание переменных в jQuery проще. В JS нужна длинная конструкция document.querySelector

JS

+function() {
    var clickButton = document.querySelector('.class');

    clickButton.addEvent('click', function () {
        alert('123');
    });
}();

jQuery

jQuery(document).ready(function($) {
    var clickButton = $('.class');

    $('.class2').find(clickButton).each(function () {
        clickButton.on('click', function () {
            alert('123');
        });
    });
});

Закрываем открытую область при клике за ней

JS
jQuery

data-set

Описания различий в data-set.

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "JavaScript и jQuery – одинаковые функции"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>