开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文:你可能不需要 jQuery!使用原生 JavaScript 进行开发   很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。
+关注继续查看
原文:你可能不需要 jQuery!使用原生 JavaScript 进行开发

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
你可能不需要 jQuery!使用原生 JavaScript 进行开发
  很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。
867 0
《jQuery与JavaScript入门经典》——2.7 问与答
就Cookie调试而言,您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
1071 0
《jQuery与JavaScript入门经典》——2.6 小结
您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助,因为这些方法有助于消除常见的简单语法错误,为您节省大量时间,避免令人沮丧的情况发生。
1141 0
《jQuery与JavaScript入门经典》——1.4 问与答
为渲染HTML以及与JavaScript交互,浏览器使用了一个引擎,这个引擎对来自服务器的数据进行分析、创建对象并将其交给图形渲染引擎,后者再将这些对象显示到屏幕上。由于浏览器使用的引擎各不相同,因此它们解释脚本的方式存在细微差别,尤其是未标准化的边缘元素。
1158 0
《jQuery与JavaScript入门经典》——1.3 小结
在本章中,您学习了Web服务器和浏览器通信的基本知识、GET和POST请求的差别以及服务器端和客户端脚本的用途,还学习了DOM以及浏览器如何使用它来渲染显示给用户的网页。
1288 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1020 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
942 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载