[分析]jQuery 和 原生javasricpt 在常用方法上的比较

[分析]jQuery 和 原生javasricpt 在常用方法上的比较

工作上有的项目用jquery，有的使用vue，angularjs，在一些相同功能经常重用，总结下，以后方便调用

Creating Elements

/* jQuery */
$('
');
/* native */
document.createElement('div');

Inserting Elements Before & After

/* jQuery */
$('#myId').after('
1.1
');
$('#myId').before('
0.9
');
/* native */
document.getElementById('myId').insertAdjacentHTML('afterend', '
1.2
');
document.getElementById('myId').insertAdjacentHTML('beforebegin', '
0.8
');

Inserting Elements As Children

/* jQuery */
$('#myId').prepend('
newChild1
');
$('#myId').append('
newChild3
');
/* native */
document.getElementById('myId').insertAdjacentHTML('afterbegin', '
newChild2
');
document.getElementById('myId').insertAdjacentHTML('beforeend', '
newChild4
');

Moving Elements

/* jQuery */
$('#newChild1').append($('#newChild3'));
$('#newChild1').prepend($('#newChild3'));
/* native */
document.getElementById('newChild2').appendChild(document.getElementById('newChild4'));
document.getElementById('newChild2').insertBefore(document.getElementById('newChild4'), document.getElementById('newChild4'));

Removing Elements

/* jQuery */
$('#newChild4').remove();
/* native */
document.getElementById('newChild3').parentNode.removeChild(document.getElementById('newChild3'));

Adding & Removing CSS Classes

/* jQuery */
// Adding
$('#newChild1').addClass('bold');
// Removing
$('#newChild1').removeClass('bold');

/* native */
// Adding
document.getElementById('newChild1').classList.add('bold'); // IE9+
document.getElementById('newChild1').className += ' bold'; // All browsers
// Removing
document.getElementById('newChild1').classList.remove('bold'); // IE9+
document.getElementById('newChild1').className = document.getElementById('newChild1').className.replace(/^bold$/, ''); // All browsers

Adding/Removing/Changing Attributes

/* jQuery */
$('#newChild1').attr('role1', 'button1');
$('#newChild1').removeAttr('role1');
/* native */
document.getElementById('newChild1').setAttribute('role2', 'button2');
document.getElementById('newChild1').removeAttribute('role2');

Adding & Changing Text Content

/* jQuery */
$('#newChild2').text('Goodbye!');
/* native */
// IE 5.5+
document.getElementById('newChild2').innerHTML = 'Goodbye!';
// IE 5.5+ but NOT Firefox
document.getElementById('newChild2').innerText = 'GoodBye!';
// IE 9+
document.getElementById('newChild2').textContent = 'Goodbye!';

Adding/Updating Element Styles

/* jQuery */
$('#newChild2').css('fontSize', '18px');
/* native */
document.getElementById('newChild2').style.fontSize = '18px';

// get css
/* jQuery */
$('#newChild2').css('fontSize');
/* native */
function getStyle(elem, property) {
    return window.getComputedStyle ? window.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
}

show/hide Element

/* jQuery */
$('.myClass').hide();
$('.myClass').show();
/* native */
document.querySelector('.myClass').style.display = 'none';
document.querySelector('.myClass').style.display = '';

event bind

var eventName = 'click',
    eventHandler = function(e) {
        console.log(e)
    };
/* jQuery */
$('.myClass').off(eventName, eventHandler);
/* native */
document.querySelector('.myClass').removeEventListener(eventName, eventHandler);
/* jQuery */
$('.myClass').on(eventName, eventHandler);
/* native */
document.querySelector('.myClass').addEventListener(eventName, eventHandler);