放弃jQuery, 使用原生js

随着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');

//原生js
el.classList.add('class_name');  

删除class

//JQuery
$('.xxx').removeClass('class_name');  

//原生js
el.classList.remove('class_name');  

切换class

//JQuery
$('.xxx').toggleClass('class_name');

//原生js
el.classList.toggle('class_name');

是否包含某个class

//JQuery
$('.xxx').hasClass('class_name');

//原生js
el.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);

//原生js
parent.appendChild(el);  
el.insertBefore(NewDom,ele);  
ele.insertAdjacentHTML("beforeend", '<li>内容</li>');
//

具体insertAdjacentHTML的介绍，请移步到 这篇文章（点击这里）

获取子节点/父节点

//JQuery
$('.xxx').children();
$('.xxx').parent();

//原生js
ele.children;
ele.parentNode

上一个节点

//JQuery
$('.xxx').prev();

//原生js
var prev = ele.previousElementSibling || ele.previousSibling

下一个节点

//JQuery
$('.xxx').next();

//原生js
var next = ele.nextElementSibling || ele.nextSibling

上下节点

//JQuery
$(ele).siblings();

//原生js
var 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);  
});

创建节点

//JQuery
var ele = $('<div></div>');

//原生js
var ele = document.createElement('div');

删除节点

//JQuery
$(ele).remove();

//原生js
parent.removeChild(ele);

获取、设置、删除属性

//JQuery
$(ele).attr(name,value) //设置  
$(ele).attr(name) //获取  
$(ele).removeAttr(name) //删除

//原生js
ele.setAttribute(name,value);//设置  
ele.getAttribute(name);//获取  
ele.removeAttribute(name);//删除

Data属性

//JQuery
$("body").data("foo", 52);  //设置  
$("body").data("foo");  //获取  
$("body").removeData("foo");  //删除

//原生js
ele.dataset.foo = 52  //设置  
ele.dataset.foo  //获取  

获取内容/清空内容

//JQuery
var html = $(ele).html();
$(el).empty();

//原生js
var html = ele.innerHTML;
el.innerHTML = '';

获取文本

//JQuery
$(ele).text();

//原生js
var txt = ele.textContent || ele.innerText

设置css

//JQuery
$(ele).css('height','300px');  
  
$(ele).css({  
    height:300  
});

//原生js
ele.style.height = '300px';  
ele.style.cssText = 'height:200px;color:red;left:100px;'

显示隐藏

//JQuery
$(el).show();  
$(el).hide();

//原生js
el.style.display = '';  
el.style.display = 'none';

元素的内高度[height + padding]/元素的外高度[height + padding + border]

//JQuery
$(ele).innerHeight();
$(ele).outerHeight();

//原生js
ele.clientHeight;
ele.offsetHeight;

元素的位置

//JQuery
$(ele).offset().left;  
$(ele).offset().top;

//原生js
ele.offsetLeft;  
ele.offsetTop;