轉自：http://itakeo.com/blog/2015/07/28/nojq/
隨着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
1 $('.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();
原生js
ele.children;
上一個節點
JQuery
$('.xxx').prev();
原生js
var prev = ele.previousElementSibling || ele.previousSibling
下一個節點
JQuery
$('.xxx').next();
原生js
var next = ele.nextElementSibling || ele.nextSibling
父節點
JQuery
$('.xxx').parent();
原生js
ele.parentNode
上下節點
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
$(selector).each(function(i, el){ //xxx });
原生js
[].forEach.call(ele,function(el,i){ //xxx });
克隆節點
JQuery
$('.xxx').clone(true);
原生js
ele.cloneNode(true)
創建節點
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 //獲取 //也可通過attribute方法來設置獲取和刪除 ele.setAttribute('data-foo', 52);//設置 ele.getAttribute('data-foo'); //獲取 ele.removeAttribute('data-foo');//刪除
獲取內容
JQuery
var html = $(ele).html();
原生js
var html = ele.innerHTML;
清空元素內容
JQuery
$(el).empty();
原生js
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;'
獲取css
JQuery
$(obj).css('marginLeft');
原生js
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; }; };
顯示隱藏
JQuery
$(el).show();
$(el).hide();
原生js
el.style.display = '';
el.style.display = 'none';
元素的高度（寬度同理）[height]
JQuery
$(ele).height();
原生js
function height(el){ var _height = el.clientHeight; var style = el.currentStyle || getComputedStyle(el); return _height - (parseInt(style.paddingTop) + parseInt(style.paddingBottom)); };
元素的內高度（寬度同理）[height + padding]
JQuery
$(ele).innerHeight();
原生js
ele.clientHeight;
元素的外高度（寬度同理）[height + padding + border]
JQuery
$(ele).outerHeight();
原生js
ele.offsetWidth;
元素的外高度（寬度同理）[height + padding + border + margin]
JQuery
$(ele).outerHeight(true);
原生js
function outerHeight(el){ var style = el.currentStyle || getComputedStyle(el); var height = el.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom); return height; };
元素的位置
JQuery
$(ele).position().left;
$(ele).position().top;
$(ele).offset().left;
$(ele).offset().top;
原生js
ele.offsetLeft; ele.offsetTop; function getposi(obj){ var t = 0,l = 0; while(obj){ t+=obj.offsetTop; l+=obj.offsetLeft; obj = obj.offsetParent; }; return {top:t,left:l}; }; //getposi(ele).left //getposi(ele).top ele.getBoundingClientRect().top + window.pageYOffset; ele.getBoundingClientRect().bottom + window.pageYOffset; ele.getBoundingClientRect().left + window.pageYOffset; ele.getBoundingClientRect().right + window.pageXOffset;
Document Ready 事件
JQuery
$(document).ready(function() { // Code });
原生js
document.addEventListener("DOMContentLoaded", function() {
// Code
},false);
Document load 事件
JQuery
$(window).load(function() { // Code });
原生js
document.addEventListener("load", function() {
// Code
},false);
添加事件
JQuery
$(document).click(function(){ //xxx });
原生js
document.onclick = function(){ //XXX };
綁定事件
JQuery
$(ele).on('click',function(){
//xxx
});
原生js
document.addEventListener("click", function() {
//xxx
},false);
[].forEach.call(ele,function(o){
o.addEventListener("click", function() {
//xxx
},false);
});
獲取數據類型
JQuery
$.type(obj);
原生js
function type(obj){ return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, "$1").toLowerCase(); };
判斷是否為數組
JQuery
$.isArray(arr);
原生js
function isArray (v){ return Object.prototype.toString.call(v) === '[object Array]'; };
去除字符串兩端的空格
JQuery
$.trim(string);
原生js
//去除兩端空格 String.prototype.trim = function() { var reExtraSpace = /^\s*(.*?)\s+$/; return this.replace(reExtraSpace, "$1") } /***擴展一下***/ //去除左邊空格 String.prototype.ltrim = function() { return this.replace( /^(\s*| *)/, ""); } //去除右邊空格 String.prototype.rtrim = function() { return this.replace( /(\s*| *)$/, ""); } //替換全部 String.prototype.replaceAll = function(s1, s2) { return this.replace(new RegExp(s1, "gm"), s2) } //去除所有空格，需要配合上面的替換全部 String.prototype.trimAll = function() { var reExtraSpace = /\s*(.*?)\s+/; return this.replaceAll(reExtraSpace, "$1") }
Cookie
JQuery
$.cookie('cookie'); // 讀取 cookie
$.cookie('cookie', 'value'); // 存儲 cookie
$.cookie('cookie', 'value', { expires: 7 }); // 存儲一個帶7天期限的 cookie
$.cookie('cookie', '', { expires: -1 }); // 刪除 cookie
原生js
- 原生js對cookie的操作，請移步之前的文章，點擊打開
Ajax
JQuery
$.ajax({ type: 'POST', url: '/my/url', data: data });
原生js
var request = new XMLHttpRequest(); request.open('POST', '/my/url', true); request.send(data);