如今技術日新月異，各類框架庫也是層次不窮。即便當年漫山紅遍 的JQuery（讓開發者write less, do more，So Perfect!!）如今也有被替代的大勢。但JS原生API寫法依舊；並且有時候只不過小寫一個Demo，或者產品中只有少量的前端效果或DOM操作，就去花時間&空間引入jQuery，或者React？不免有取宰牛之刀以殺雞之嫌。
在jQuery的溫柔鄉里，是否還能記得原生她javascript原生？如果僅為使用個選擇器($)或者類似的東西，是否真的有必要加載jQuery？故此瞭解下JS常用原生寫法還是蠻有必要的。
[update-2015-12-07]有看到拋棄jQuery，擁抱原生JavaScript 一文中提到，jQuery 代表著傳統的以 DOM 為中心的開發模式，但現在複雜頁面開發流行的是以 React 為代表的以數據/狀態為中心的開發模式； React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用場景大大減少。
Talk is cheap. Show me the code
選擇元素 1
2
3
4
5
6
7
8
9
10
11
12
// jQuery
var els = $('.el');
//==========================================================//
// 原生方法
var els = document.querySelectorAll('.el');
// 函數法
var $ = function (el) {
return document.querySelectorAll(el);
}
var els = $('.el');
創建元素 1
2
3
4
5
6
// jQuery
var newEl = $('<div/>');
//==========================================================//
// 原生方法
var newEl = document.createElement('div');
添加/移除/切換類 1
2
3
4
5
6
7
8
9
10
// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');
//==========================================================//
// 原生方法
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
判斷是否包含類 1
2
3
4
5
6
7
8
9
10
11
12
13
// jQuery
$('.el').hasClass('className');
$('.el').has('.className'); //也可以用來 判斷是否包含某個元素
//==========================================================//
// 原生方法(1)
_hasClass(document.querySelector('.el'), className);
function _hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
};
// 原生方法(2)
if(el.classList.contains("someClass")){}
添加事件監聽器 1
2
3
4
5
6
7
8
9
10
// jQuery
$('.el').on('event', function() {
});
//==========================================================//
// 原生方法
[].forEach.call(document.querySelectorAll('.el'), function (el) {
el.addEventListener('event', function() {
}, false);
});
原生－DOM綁定事件－優化1參考HERE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//DOM綁定事件-之自執行
var BindEvent = (function () {
if ('addEventListener' in document) {
return function (dom, event, handle, ex) {
dom.addEventListener(event, handle, ex || false);
}
} else if ('attachEvent' in document) {
return function (dom, event, handle) {
dom.attachEvent('on' + event, handle);
}
} else {
return function (dom, event, handle) {
dom['on' + event] = handle;
}
}
})();
原生－DOM綁定事件－優化2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//DOM綁定事件-之惰性加載(調用方去觸發BindEvent之時才去做初始化)//
var BindEvent = function (dom, event, handle, ex) {
if ('addEventListener' in document) {
BindEvent = function (dom, event, handle, ex) {
dom.addEventListener(event, handle, ex || false);
}
} else if ('attachEvent' in document) {
BindEvent = function (dom, event, handle) {
dom.attachEvent('on' + event, handle);
}
} else {
BindEvent = function (dom, event, handle) {
dom['on' + event] = handle;
}
}
BindEvent(dom, event, handle, ex);
};
設置/獲取屬性 1
2
3
4
5
6
7
8
// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
//==========================================================//
// 原生方法
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
附加內容（Append） 1
2
3
4
5
6
// jQuery
$('.el').append($('<div/>'));
//==========================================================//
// 原生方法
document.querySelector('.el').appendChild(document.createElement('div'));
克隆元素 1
2
3
4
5
6
// jQuery
var clonedEl = $('.el').clone();
//==========================================================//
// 原生方法
var clonedEl = document.querySelector('.el').cloneNode(true);
移除元素 1
2
3
4
5
6
7
8
9
10
// jQuery
$('.el').remove();
//==========================================================//
// 原生方法
remove('.el');
function remove(el) {
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
}
獲取父元素 1
2
3
4
5
6
// jQuery
$('.el').parent();
//==========================================================//
// 原生方法
document.querySelector('.el').parentNode;
上一個/下一個元素 1
2
3
4
5
6
7
8
// jQuery
$('.el').prev();
$('.el').next();
//==========================================================//
// 原生方法
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;
修改CSS屬性 總是通過Javascript修改和檢索CSS屬性，這樣會比使用jQuery CSS函數更加簡單快速，並且沒有任何不必要的代碼。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//----設置CSS屬性----
/* jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px",
height: "100px",
display: "block"
});
//==========================================================//
/* 原生 */
var el = document.querySelector(".main-content");
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";
XHR或AJAX 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// jQuery
$.get('url', function (data) {
});
$.post('url', {data: data}, function (data) {
});
//==========================================================//
// 原生方法
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
// post
var xhr = new XMLHttpRequest()
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({data: data});
參考文章：http://www.iteye.com/news/28503 http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报 。
