不要过分依靠JQuery（一）

复制节点：

$('div').clone() => document.querySelector('div').cloneNode(true)

插进去节点：

$('div').append('')
var span = document.createElement('span');
document.querySelector('div').appendChild(span);

在指定节点之前插进去新的子节点

$('').insertBefore('#test');
var t = document.getElementById('test');
var span = document.createElement('span');
t.parentNode.insertBefore(span, t);
/*更简朴的*/
t.insertAdjacentHTML('beforeBegin', '');

在指定节点后插进去新的子节点：

$('').insertAfter('#test')
function insertAfter(elem, newNode){
if(elem.nextElementSibling) {
elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
} else {
elem.parentNode.appendChild(newNode);
}
}
var t = document.getElementById('test');
var span = document.createElement('span');
insertAfter(t, span);
/*更简朴的*/
t.insertAdjacentHTML('afterEnd', '');

猎取父节点

$('#test').parent() => document.getElementById('test').parentNode

删除节点

$('#test').remove()
var t = document.getElementById('test');
t.parentNode.removeChild(t);

猎取Element子节点

$('#test').children()
function children(elem) {
if(elem.children) {
return elem.children;
} else {
var children = [];
for (var i = el.children.length; i--;) {
if (el.children[i].nodeType != 8)
children.unshift(el.children[i]);
}
return children;
}
}
children(document.getElementById('test'));

猎取下一个兄弟节点：

$('#test').next()
function nextElementSibling(elem) {
if(elem.nextElementSibling) {
return elem.nextElementSibling;
} else {
do {
elem = elem.nextSibling;
} while ( elem && elem.nodeType !== 1 );
return elem;
}
}
nextElementSibling(document.getElementById('test'));

猎取上一个兄弟节点：

$('#test').prev()
function previousElementSibling(elem) {
if(elem.previousElementSibling) {
return elem.previousElementSibling;
} else {
do {
elem = elem.previousSibling;
} while ( elem && elem.nodeType !== 1 );
return elem;
}
}
previousElementSibling(document.getElementById('test'));

5、属性操纵

猎取属性

$('#test').attr('class') => document.getElementById('test').getAttribute('class')

删除属性

$('#test').removeAttr('class') => document.getElementById('test').removeAttribute('class')

设置属性

$('#test').attr('class', 'abc') => document.getElementById('test').setAttribute('class', 'abc');

6、CSS款式操纵

设置款式

$('#test').css('height', '10px'); => document.getElementById('test').style.height = '10px';

猎取款式

$('#test').css('height')
var getStyle = function(dom, attr) {
return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
};
getStyle(document.getElementById('test'), 'height');

猎取伪类的CSS款式

window.getComputedStyle(el , ":after")[attrName];

注：IE是不支持猎取伪类的

7、字符串操纵

去除空格

$.trim(' abc ')
function trim(str){
if(str.trim) {
return str.trim();
} else {
return str.replace(/^\s+|\s+$/g, '');
}
}
trim(' abc ');

8、JSON操纵

JSON序列化

$.stringify({name: "TG"}) => JSON.stringify({name: "TG"})

JSON反序列化

$.parseJSON('{ "name": "TG" }') => JSON.parse('{ "name": "TG" }')


原文链接：不要过分依靠JQuery(一)

若有毛病，迎接斧正！若有更好发起，迎接留言！