很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。
然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。
本文出处【http://www.cnblogs.com/lhb25/】
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。
jQuery：
|
1
2
3
4
5 |
$.ajax({ type: ‘POST‘, url: ‘/my/url‘, data: data}); |
IE8+：
|
1
2
3 |
var
request = new
XMLHttpRequest();request.open(‘POST‘, ‘/my/url‘, true);request.send(data); |
jQuery：
|
1
2
3
4
5
6
7
8
9
10 |
$.ajax({ type: ‘GET‘, url: ‘/my/url‘, success: function(resp) { }, error: function() { }}); |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
request = new
XMLHttpRequest();request.open(‘GET‘, ‘/my/url‘, true);request.onreadystatechange = function() { if
(this.readyState === 4){ if
(this.status >= 200 && this.status < 400){ // Success! resp = this.responseText; } else
{ // Error :( } }}request.send();request = null; |
jQuery：
|
1
2
3 |
$.getJSON(‘/my/url‘, function(data) {}); |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
request = new
XMLHttpRequest();request.open(‘GET‘, ‘/my/url‘, true);request.onreadystatechange = function() { if
(this.readyState === 4){ if
(this.status >= 200 && this.status < 400){ // Success! data = JSON.parse(this.responseText); } else
{ // Error :( } }}request.send();request = null; |
jQuery：
|
1 |
$(el).fadeIn(); |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
function
fadeIn(el) { var
opacity = 0; el.style.opacity = 0; el.style.filter = ‘‘; var
last = +new
Date(); var
tick = function() { opacity += (new
Date() - last) / 400; el.style.opacity = opacity; el.style.filter = ‘alpha(opacity=‘
+ (100 * opacity)|0 + ‘)‘; last = +new
Date(); if
(opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); } }; tick();}fadeIn(el); |
jQuery：
|
1
2 |
$(el).show();$(el).hide(); |
IE8+：
|
1
2 |
el.style.display = ‘‘;el.style.display = ‘none‘; |
jQuery：
|
1 |
$(el).addClass(className); |
IE8+：
|
1
2
3
4 |
if
(el.classList) el.classList.add(className);else el.className += ‘ ‘
+ className; |
jQuery：
|
1
2
3 |
$(el).before(htmlString);$(parent).append(el);$(el).after(htmlString); |
IE8+：
|
1
2
3 |
el.insertAdjacentHTML(‘beforebegin‘, htmlString);parent.appendChild(el);el.insertAdjacentHTML(‘afterend‘, htmlString); |
jQuery：
|
1 |
$(el).children(); |
IE8+：
|
1
2
3
4
5
6 |
var
children = [];for
(var
i=el.children.length; i--;){ // Skip comment nodes on IE8 if
(el.children[i].nodeType != 8) children.unshift(el.children[i]);} |
jQuery：
|
1
2
3 |
$(selector).each(function(i, el){}); |
IE8+：
|
1
2
3
4
5
6
7
8
9 |
function
forEachElement(selector, fn) { var
elements = document.querySelectorAll(selector); for
(var
i = 0; i < elements.length; i++) fn(elements[i], i);}forEachElement(selector, function(el, i){}); |
jQuery：
|
1 |
$(el).empty(); |
IE8+：
|
1
2 |
while(el.firstChild) el.removeChild(el.firstChild) |
jQuery：
|
1 |
$(selector).filter(filterFn); |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11 |
function
filter(selector, filterFn) { var
elements = document.querySelectorAll(selector); var
out = []; for
(var
i = elements.length; i--;) { if
(filterFn(elements[i])) out.unshift(elements[i]); } return
out;}filter(selector, filterFn); |
jQuery：
|
1
2 |
$(el).find(selector);$(‘.my #awesome selector‘); |
IE8+：
|
1
2 |
el.querySelectorAll(selector);document.querySelectorAll(‘.my #awesome selector‘); |
jQuery：
|
1
2
3
4 |
$(el).attr(‘tabindex‘);$(el).html();$(‘<div>‘).append($(el).clone()).html();$(el).text(); |
IE8+：
|
1
2
3
4 |
el.getAttribute(‘tabindex‘);el.innerHTMLel.outerHTMLel.textContent || el.innerText |
jQuery：
|
1 |
$(el).hasClass(className); |
IE8+：
|
1
2
3
4 |
if
(el.classList) el.classList.contains(className);else new
RegExp(‘(^| )‘
+ className + ‘( |$)‘, ‘gi‘).test(el.className); |
jQuery：
|
1 |
$(el).is(‘.my-class‘); |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
var
matches = function(el, selector) { var
_matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector); if
(_matches) { return
_matches.call(el, selector); } else
{ var
nodes = el.parentNode.querySelectorAll(selector); for
(var
i = nodes.length; i--;) if
(nodes[i] === el) { return
true; } return
false;}matches(el, ‘.my-class‘); |
jQuery：
|
1 |
$(el).prev(); |
IE8+：
|
1
2
3
4
5
6
7 |
// prevSibling can include text nodesfunction
previousElementSibling(el) { do
{ el = el.previousSibling; } while
( el && el.nodeType !== 1 ); return
el;}el.previousElementSibling || previousElementSibling(el); |
jQuery：
|
1 |
$(el).next(); |
IE8+：
|
1
2
3
4
5
6
7 |
// nextSibling can include text nodesfunction
nextElementSibling(el) { do
{ el = el.nextSibling; } while
( el && el.nodeType !== 1 ); return
el;}el.nextElementSibling || nextElementSibling(el); |
jQuery：
|
1 |
$(el).outerHeight() |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11 |
function
outerHeight(el, includeMargin){ var
height = el.offsetHeight; if(includeMargin){ var
style = el.currentStyle || getComputedStyle(el); height += parseInt(style.marginTop) + parseInt(style.marginBottom); } return
height;}outerHeight(el, true); |
jQuery：
|
1 |
$(el).outerWidth() |
IE8+：
|
1
2
3
4
5
6
7
8
9
10
11 |
function
outerWidth(el, includeMargin){ var
height = el.offsetWidth; if(includeMargin){ var
style = el.currentStyle || getComputedStyle(el); height += parseInt(style.marginLeft) + parseInt(style.marginRight); } return
height;}outerWidth(el, true); |
jQuery：
|
1 |
$.isArray(arr); |
IE8+：
|
1
2
3
4
5 |
isArray = Array.isArray || function(arr) { return
Object.prototype.toString.call(arr) == ‘[object Array]‘;}isArray(arr); |
jQuery：
|
1
2
3 |
$.map(array, function(value, index){}) |
IE8+：
|
1
2
3
4
5
6
7
8
9
10 |
function
map(arr, fn) { var
results = [] for
(var
i = 0; i < arr.length; i++) results.push(fn(arr[i], i)) return
results}map(array, function(value, index){}) |
类似的还有很多很多，可以参考这里：http://youmightnotneedjquery.com/
本文链接：你可能不需要 jQuery！编写原生的JavaScript代码
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
你可能不需要 jQuery！使用原生 JavaScript 进行开发
原文：http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html