随着IE6、7、8的逐渐淘汰，HTML5的兴起，以及侧重点放在了移动端，jQuery可能变的不在那么重要，原生一样很好用。下面介绍几个原生替换jq的方法。
获取元素
//jQuery$('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx p:first'); //第一个P元素//原生js//querySelector基本上实现了jq选择器同样的功能，具体可以自己测试，另外querySelector返回的是第一个元素，querySelectorAll则返回所有选择的元素。 document.querySelector('.xxx'); //class获取 document.querySelector('#xxx');//id获取 document.querySelector('.xxx.ccc');//同时包含xxx和ccc document.querySelector('.xxx,.ccc');//多选 document.querySelector('.xxx div');//子类 document.querySelector('.xxx p:first-child');//第一个P元素 添加class
//JQuery$('.xxx').addClass('class_name');//原生jsel.classList.add('class_name'); 删除class
//JQuery$('.xxx').removeClass('class_name'); //原生jsel.classList.remove('class_name'); 切换class
//JQuery$('.xxx').toggleClass('class_name');//原生jsel.classList.toggle('class_name'); 是否包含某个class
//JQuery$('.xxx').hasClass('class_name');//原生jsel.classList.contains('class_name'); 上面是HTML5提供的新的方法，如果你非要为了兼容所谓的IE，可以用下面的这些
//是否包含class function hasClass(o, n){ return new RegExp('\\b'+n+'\\b').test(o.className); }; //添加class function addClass(o, n){ if(!hasClass(o, n)) o.className+=' '+n; }; //删除class function delClass(o, n){ if(hasClass(o, n)){ o.className = o.className.replace(new RegExp('(?:^|\\s)'+n+'(?=\\s|$)'), '').replace(/^\s*|\s*$/g, ''); }; }; 插入HTML
//JQuery$(el).before(htmlString); $(parent).append(el); $(el).after(htmlString);//原生jsparent.appendChild(el); el.insertBefore(NewDom,ele); ele.insertAdjacentHTML("beforeend", '具体insertAdjacentHTML的介绍，请移步到 这篇文章
获取子节点/父节点
//JQuery$('.xxx').children();$('.xxx').parent();//原生jsele.children;ele.parentNode 上一个节点
//JQuery$('.xxx').prev();//原生jsvar prev = ele.previousElementSibling || ele.previousSibling 下一个节点
//JQuery$('.xxx').next();//原生jsvar next = ele.nextElementSibling || ele.nextSibling 上下节点
//JQuery$(ele).siblings();//原生jsvar siblings = Array.prototype.slice.call(el.parentNode.children); for (var i = siblings.length; i--;) { if (siblings[i] === el) { siblings.splice(i, 1); break; }; }; [].forEach.call(el.parentNode.children, function(child){ if(child !== el); }); 创建节点
//JQueryvar ele = $(' ');//原生jsvar ele = document.createElement('div'); 删除节点
//JQuery$(ele).remove();//原生jsparent.removeChild(ele);
获取、设置、删除属性
//JQuery$(ele).attr(name,value) //设置 $(ele).attr(name) //获取 $(ele).removeAttr(name) //删除//原生jsele.setAttribute(name,value);//设置 ele.getAttribute(name);//获取 ele.removeAttribute(name);//删除
Data属性
//JQuery$("body").data("foo", 52); //设置 $("body").data("foo"); //获取 $("body").removeData("foo"); //删除//原生jsele.dataset.foo = 52 //设置 ele.dataset.foo //获取 获取内容/清空内容
//JQueryvar html = $(ele).html();$(el).empty();//原生jsvar html = ele.innerHTML;el.innerHTML = '';
获取文本
//JQuery$(ele).text();//原生jsvar txt = ele.textContent || ele.innerText
设置css
//JQuery$(ele).css('height','300px'); $(ele).css({ height:300 });//原生jsele.style.height = '300px'; ele.style.cssText = 'height:200px;color:red;left:100px;' 显示隐藏
//JQuery$(el).show(); $(el).hide();//原生jsel.style.display = ''; el.style.display = 'none';
元素的内高度[height + padding]/元素的外高度[height + padding + border]
//JQuery$(ele).innerHeight();$(ele).outerHeight();//原生jsele.clientHeight;ele.offsetHeight;
元素的位置
//JQuery$(ele).offset().left; $(ele).offset().top;//原生jsele.offsetLeft; ele.offsetTop;