毫無疑問，JQuery是一款非常優(yōu)秀的JavaScript庫瓮钥，它讓我們開發(fā)項目變得更加便捷容易。
不過窿克，當你準備在一個項目（特別是移動項目）中使用JQuery時骏庸，你真的該好好思考一下毛甲，你會用到JQuery的哪些功能年叮，是否真的需要jQuery。因為隨著JavaScript的不斷改善進化玻募，現(xiàn)在它內置的功能已經非常強大只损，在很大程度上，已經可以實現(xiàn)以前需要在JQuery中才能實現(xiàn)的技術（如果你的項目需要在IE8之前的瀏覽器中使用七咧，建議還是使用JQuery跃惫，這樣可以省卻很多兼容性問題）。
下面將列出一些可以使用JavaScript來實現(xiàn)JQuery功能的代碼：
1艾栋、查找搜索選擇器
按ID查找：
$('#test') => document.getElementById('test');
按class類名查找：
$('.test') => document.getElementsByClassName('test')
按標簽名查找：
$('div') => document.getElementsByTagName('div')
當然爆存，你也可以統(tǒng)一查找：
$('#test')
document.querySelector('#test')
$('#test div') => document.querySelectorAll('#test div')
$('#test').find('span') => document.querySelectorAll('#test span');
獲取單個元素：
$('#test div').eq(0)[0] => document.querySelectorAll('#test div')[0]
獲取HTML、head蝗砾、body：
$('html') => document.documentElement
$('head') => document.head
$('body') => document.body
判斷節(jié)點是否存在
$('#test').length > 0 => document.getElementById('test') !== null
$('div').length > 0 => document.querySelectorAll('div').length > 0
遍歷節(jié)點：
$('div').each(function(i, elem) {})
function forEach(elems, callback) {
if([].forEach) {
[].forEach.call(elems, callback);
} else {
for(var i = 0; i < elems.length; i++) {
callback(elems[i], i);
}
}
}
var div = document.querySelectorAll('div');
forEach(div, function(elem, i){
});
清空節(jié)點
$('#test').empty() => document.getElementById('test').innerHTML = '';
節(jié)點比較
$('div').is($('#test')) => document.querySelector('div') === document.getElementById('test')
2先较、獲取/設置內容（值）
獲取/設置元素內的內容
$('div').html() => document.querySelecotr('div').innerHTML
$('div').text() => var t = document.querySelector('div');
t.textContent || t.innerText;
$('div').html('<span>abc</span>'); => document.querySelecotr('div').innerHTML = '<span>abc</span>';
$('div;).text('abc') => document.querySelecotr('div').textContent = 'abc'
獲取包含元素本身的內容
$('<div>').append($('#test').clone()).html() => document.getElementById('test').outerHTML
$('<div>').append($('#test').clone()).html('<span>abc</span>') => document.getElementById('test').outerHTML = '<span>abc</span>'
獲取表單值
$('input').val() => document.querySelector('input').value
$('input').val('abc') => document.querySelector('input').value = 'abc'
3、class類名操作
類名新增
$('#test').addClass('a')
function addClass(elem, className) {
if(elem.classList) {
elem.classList.add(className);
} eles {
elem.className += ' ' + className;
}
}
addClass(document.getElementById('test'), 'a');
類名刪除
$('#test').removeClass('a');
function removeClass(elem, className) {
if(elem.classList) {
elem.classList.remove(className);
} else {
elem.className = elem.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
removeClass(document.getElementById('test'), 'a');
類名包含：
$('#test').hasClass('a')
function hasClass(elem, className) {
if(elem.classList) {
return elem.classList.contains(className);
} else {
return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
}
}
hasClass(document.getElementById('test'), 'a');
4悼粮、節(jié)點操作
創(chuàng)建節(jié)點
$('<div>') => document.createElement('div')
復制節(jié)點：
$('div').clone() => document.querySelector('div').cloneNode(true)
插入節(jié)點：
$('div').append('<span></span>')
var span = document.createElement('span');
document.querySelector('div').appendChild(span);
在指定節(jié)點之前插入新的子節(jié)點
$('<span>').insertBefore('#test');
var t = document.getElementById('test');
var span = document.createElement('span');
t.parentNode.insertBefore(span, t);
/*更簡單的*/
t.insertAdjacentHTML('beforeBegin', '<span></span>');
在指定節(jié)點后插入新的子節(jié)點：
$('<span>').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', '<span></span>');
獲取父節(jié)點
$('#test').parent() => document.getElementById('test').parentNode
刪除節(jié)點
$('#test').remove()
var t = document.getElementById('test');
t.parentNode(t);
獲取Element子節(jié)點
$('#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'));
獲取下一個兄弟節(jié)點：
$('#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'));
獲取上一個兄弟節(jié)點：
$('#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(一)
如有錯誤，歡迎指正申尤！如有更好建議癌幕，歡迎留言！
