很多的 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代碼

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

總結

以上是生活随笔為你收集整理的你可能不需要 jQuery！使用原生 JavaScript 进行开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。