Справочная информация по одинаковым функциям в JavaScript и jQuery. Здесь же можно увидеть наглядно отличие JS и jQuery.
Эта статья вовсе не о преимуществах jQuery. Наоборот, библиотека jQuery постепенно уходит в прошлое, ставя чистый JS код на первое место.
Эта статья-подсказка, как сделать что-то в js или jQuery, зная только один из них. Из-за того, что они похожи, очень легко запутаться.
Добавить или удалить класс
JS
Класс указывается без точки.
el.classList.add('class');
el.classList.remove('class');
el.classList.remove('class');
jQuery
el.removeClass(".class");
el.addClass('.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) {}
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');
});
}
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');
});
}
});
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');
});
}();
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');
});
});
});
var clickButton = $('.class');
$('.class2').find(clickButton).each(function () {
clickButton.on('click', function () {
alert('123');
});
});
});
Закрываем открытую область при клике за ней
data-set
Описания различий в data-set.
