你可能不需要 jQuery！使用原生 JavaScript 进行开发

　　很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。

　　然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。

您可能感兴趣的相关文章

期待已久的2013年度最佳 jQuery 插件揭晓
小伙伴们都惊呆了！8个超炫的 Web 效果
10大流行的 Metro UI 风格 Bootstrap 主题
推荐35款精致的 CSS3 和 HTML5 网页模板
精选12款优秀 jQuery Ajax 分页插件和教程

　　下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。

Ajax Post

jQuery：

$.ajax({type: 'POST',url: '/my/url',data: data
});

IE8+：

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.send(data);

Ajax Get

jQuery：

$.ajax({type: 'GET',url: '/my/url',success: function(resp) {},error: function() {}
});

IE8+：

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;

加载 JSON

jQuery：

$.getJSON('/my/url', function(data) {});

IE8+：

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：

$(el).fadeIn();

IE8+：

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：

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

IE8+：

el.style.display = '';
el.style.display = 'none';

添加 Class

jQuery：

$(el).addClass(className);

IE8+：

if (el.classList)el.classList.add(className);
elseel.className += ' ' + className;

插入 HTML

jQuery：

$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);

IE8+：

el.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(el);
el.insertAdjacentHTML('afterend', htmlString);

获取子节点

jQuery：

$(el).children();

IE8+：

var children = [];
for (var i=el.children.length; i--;){// Skip comment nodes on IE8if (el.children[i].nodeType != 8)children.unshift(el.children[i]);
}

循环节点

jQuery：

$(selector).each(function(i, el){});

IE8+：

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：

$(el).empty();

IE8+：

while(el.firstChild)el.removeChild(el.firstChild)

过滤节点

jQuery：

$(selector).filter(filterFn);

IE8+：

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：

$(el).find(selector);
$('.my #awesome selector');

IE8+：

el.querySelectorAll(selector);
document.querySelectorAll('.my #awesome selector');

获取属性、HTML或者文本

jQuery：

$(el).attr('tabindex');
$(el).html();
$('<div>').append($(el).clone()).html();
$(el).text();

IE8+：

el.getAttribute('tabindex');
el.innerHTML
el.outerHTML
el.textContent || el.innerText

判断是否包含某个 css class

jQuery：

$(el).hasClass(className);

IE8+：

if (el.classList)el.classList.contains(className);
elsenew RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

选择器匹配

jQuery：

$(el).is('.my-class');

IE8+：

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：

$(el).prev();

IE8+：

// prevSibling can include text nodes
function previousElementSibling(el) {do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );return el;
}el.previousElementSibling || previousElementSibling(el);

后一个节点

jQuery：

$(el).next();

IE8+：

// nextSibling can include text nodes
function nextElementSibling(el) {do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );return el;
}el.nextElementSibling || nextElementSibling(el);

外部高度

jQuery：

$(el).outerHeight()

IE8+：

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：

$(el).outerWidth()

IE8+：

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：

$.isArray(arr);

IE8+：

isArray = Array.isArray || function(arr) {return Object.prototype.toString.call(arr) == '[object Array]';
}isArray(arr);

数组转换

jQuery：

$.map(array, function(value, index){})

IE8+：

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 图片特效插件
精心挑选的优秀jQuery Ajax分页插件和教程
精心挑选的优秀 jQuery 文本特效插件和教程
8款非常棒的响应式 jQuery 幻灯片插件推荐
精心挑选12款优秀 jQuery 手风琴插件和教程

本文链接：你可能不需要 jQuery！编写原生的JavaScript代码

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源