首页 > 代码库 > 你可能不需要 jQuery!使用原生 JavaScript 进行开发

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

jquery 转原生js 的一些方法 / jq转js / jquery与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 = http://www.mamicode.com/JSON.parse(this.responseText);>

淡入效果

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.innerHTMLel.outerHTMLel.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 nodesfunction 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 nodesfunction 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/。

源:http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

 

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