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

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

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

　　下面就带大家一起看看在 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); else   el.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 IE8   if (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); else   new 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！使用原生JavaScript 进行开发_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)