Обновлено 16.12.2022
Таблица — Аналогия методов jQuery с JavaScript
Команда название | Синтаксис на jQuery | Синтаксис на JavaScript |
Создать элемент |
$('<div/>'); |
document.createElement('tag'); |
Выбрать элемент |
$(obj);$('#id'); |
document.querySelector(obj); или document.querySelectorAll(obj); или document.getElementById('id'); |
Удалить элемент |
$(obj).remove(); |
obj.remove(); |
Найти элемент |
$(obj).find(selector); |
obj.querySelectorAll(selector); |
Копирование элемента |
$(obj).clone(); |
obj.cloneNode(true); |
Hide скрыть элемент |
$(obj).hide(); |
obj.style.display='none'; |
Show показать элемент |
$(obj).show(); |
obj.style.display=''; |
Получить родительский элемент |
$(obj).parent(); |
obj.parentElement; или obj.parentNode; |
Получить дочерний элемент |
$(obj).children(); |
obj.children; obj.firstElementChild; obj.children[0]; obj.lastElementChild; |
Получить следующий элемент |
$(obj).next(); |
obj.nextElementSibling; |
Получить предыдущий элемент |
$(obj).prev(); |
obj.previousElementSibling; |
Добавить класс |
$(obj).addClass('className'); |
obj.classList.add('className'); |
Изменить класс |
$(obj).attr('class','className'); |
obj.classList.replace('className'); |
Удалить класс |
$(obj).removeClass('className'); $(obj).removeClass(); |
obj.classList.remove('className'); obj.removeAttribute('class'); |
Получить класс |
$(obj).attr('class'); |
obj.getAttribute('class'); |
Проверка существования класса |
$(obj).hasClass('className'); |
obj.classList.contains('className'); |
$(obj).toggleClass('className'); |
obj.classList.toggle('className'); |
|
Добавить атрибут |
$(obj).attr('style','color: #fff'); |
obj.setAttribute('style','color: #fff'); |
Удалить атрибут |
obj.setAttribute('style','color: #fff'); |
obj.removeAttribute('style'); |
Получить текст |
obj.remove(); |
obj.textContent; |
Изменить текст |
$(obj).text('newText'); |
language="js"]$(obj).text('newText'); |
Получить атрибут |
$(obj).attr('value'); |
obj.getAttribute('value'); |
Получить ширину и высоту элемента |
$(obj).width(); $(obj).height(); |
obj.scrollWidth; obj.scrollHeight; |
Добавление строк |
$(obj).before(text); $(obj).after(text); $(parentEl).prepend(obj); $(parentEl).append(obj); |
obj.before(text); obj.after(text); obj.prepend(text); obj.append(text); |
Получить HTML |
$(obj).html(); |
obj.innerHTML |
Изменить HTML |
$(obj).html('newHTML'); |
obj.innerHTML='newHTML'; |
Добавление элементов в HTML |
$(obj).before(html); $(obj).after(html); $(parentEl).prepend(obj); $(parentEl).append(obj); |
obj.insertAdjacentHTML('beforebegin',html); obj.insertAdjacentHTML('afterend',html); obj.insertAdjacentHTML('afterbegin',html); obj.insertAdjacentHTML('beforeend',html); |
$(obj).replaceWith(newHTML); |
obj.outerHTML='newHTML'; |
|
Получить CSS |
$(obj).css('propertyName'); |
obj.getComputedStyle(obj)['propertyName'] |
Изменить CSS |
$(obj).css('font-size', '24px'); |
obj.style.fontSize='24px'; |
Получить значения |
$(obj).val(); |
obj.value |
Изменить значения |
$(obj).val('newValue'); |
obj.value='newValue'; |
Цикл each |
$(selector).each(function(index,el){ // your code }); |
var mas=document.querySelectorAll(obj); mas.forEach(function(el, index){ // your code }); |
wrap |
$(obj).wrap('<div class="elWrapper"></div>'); |
tag= document.querySelector(obj).innerHTML; newTag='<span id="">'+tag+'</span>'; document.querySelector(obj).outerHTML=newTag; |
unwrap |
$(obj).unwrap(); |
wrapperEl=document.querySelector(obj); while(wrapperEl.firstChild){ wrapperEl.before(wrapperEl.firstChild); } wrapperEl.remove(); |
Событие при загрузке DOM |
jQuery(function($){ //code }); |
document.addEventListener( 'DOMContentLoaded',()=>{ //code }); |
Событие on |
$(obj).on('eventName',()=>{ //code }); |
obj.addEventListener('eventName',()=>{ //code }); |
Событие при изменение параметров экрана |
$(window).resize(function(){ //code }); |
window.addEventListener( 'resize',()=>{ //code }); |
Ваш комментарий будет первым