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

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

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

Creating Elements

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

Inserting Elements Before & After

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

Inserting Elements As Children

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

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);