是时候和 jQuery 说拜拜了么?

时间: 2017-11-09阅读: 1121标签: jquery

自从2006年,jQuery发布以来,浏览器的API和DOM取得了长足的发展。在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。这里就不再重复的再说这个陈旧的话题,不过自从那篇文章发表后,浏览器确实在一点一点的改变着,发展着。浏览器继续发布和更新它们的API,有的是直接从jQuery那借鉴过来的。

下面就来看看一些新的可以代替jQuery方法的浏览器的API。

从页面删除一个元素

在以前如果你要使用浏览器提供的API来删除一个元素,你不得不采用迂回的方法来达到目的。比如el.parentNode.removeChild(el);,现在就不用使用这样迂回的方法了。下面就来比较下jQuery和浏览器新的API删除一个元素的使用方法。

jQuery:

var $elem = $(".someClass") //选中元素
$elem.remove(); //删除元素

使用浏览器新API:

var elem = document.querySelector(".someClass"); //选中元素
elem.remove() //删除元素

这里提醒下,如果使用了$elem这种表示方法,代表使用了jQuery;如果是elem,则表示使用的是浏览器原生的方法。

插入一个元素

jQuery:

$elem.prepend($someOtherElem);

使用浏览器新API:

elem.prepend(someOtherElem);

在指定元素前插入内容

jQuery:

$elem.before($someOtherElem);

使用浏览器新API:

elem.before(someOtherElem);

替换元素

jQuery:

$elem.replaceWith($someOtherElem);

使用浏览器新API:

elem.replaceWith(someOtherElem);

找到最近的一个元素

jQuery:

$elem.closest("div");

使用浏览器新API:

elem.closest("div");

看到了么,在新的浏览器中,提供了和jQuery几乎一模一样的方法。随着浏览器技术的发展,jQuery迟早会光荣的退出历史的舞台,在web的发展史上也会留下浓墨重彩的一笔。

下面看看各个浏览器对这些新的DOM的操作方法的支持情况,数据来自Caniuse

可以发现在桌面上支持的也还不错,主要是IE的支持情况不是很理想;而在移动端支持的比较好,可以放心大胆的使用了。

隐藏一个元素

jQuery:

$elem.fadeIn();

为了使动画更自然,通过CSS配合js,可以做一个简单的过渡渐隐渐显的效果。

.thingy {
  display: none;
  opacity: 0;
  transition: .8s;
}

使用浏览器新API:

elem.style.display = "block";
requestAnimationFrame(() => elem.style.opacity = 1);

只触发一次事件

jQuery:

$elem.one("click", someFunc);

在以前当遇到这样只触发一次事件的时候,需要用到一个回调方法来删除事件。

function dostuff() {
  alert("some stuff happened");
  this.removeEventListener("click", dostuff);
}
var button = document.querySelector("button");
button.addEventListener("click", dostuff);

现在有更加方便的方法了,只需要给addEventListener方法传入一个布尔参数就可以达到这样的目的。

elem.addEventListener('click', someFunc, { once: true, });

如果你仍然想捕获这个事件并且也只调用一次,那么你依然可以通过传入一个参数来搞定:

elem.addEventListener('click', myClickHandler, {
  once: true,
  capture: true
});

动画

虽然jQuery提供了animate的方法,但是它的功能非常有限。

$elem.animate({
  width: "70%",
  opacity: 0.4,
  marginLeft: "0.6in",
  fontSize: "3em",
  borderWidth: "10px"
}, 1500);

在jQuery的文档中有说明,所以能被运动的属性的值,应该都是可以使用数字来表示的;如上所属,如果一个属性的值,不能够用数字来表示,则不能使用jQuery的animate方法。比如当你要用transform和颜色来实现动画效果的时候,就不能使用jQuery的animate方法了。不过,浏览器提供一个新的方法Web Animations API来制作动画效果。

var elem = document.querySelector('.animate-me');
elem.animate([
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0', 
    filter: 'blur(40px)', 
    opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }
], 1000);

Ajax

在过去jQuery一个关键的卖点就是它的Ajax方法,jQuery把XMLHttpRequest进行了很好的封装,提供了优雅的Ajax方法,使用起来也确实非常方便:

$.ajax('https://some.url', {
  success: (data) => { /* do stuff with the data */ }
});

当然现在浏览器提供fetch API来代替XMLHttpRequest,并且现在所有的浏览器都支持它。

fetch('https://some.url')
  .then(response => response.json())
  .then(data => {
    // do stuff with the data
  });

当然fetch方法可能没有想象中的那么简单。但是,它比在以XMLHttpRequest上来建立任何功能要更加的通用和方便。

当然,我们如果要想更加的易于使用它,那可以借助与一些第三方的封装好的微型的类库...

Axios是一个非常流行的专门用来进行Ajax操作的库。非常轻量,它只专注与一件事即Ajax。虽然它们不会像jQuery一样被大规模的测试使用,但是它们确实为替代jQuery提供了可代替的选择。

虽然,按现在浏览器技术的发展,使用它们提供的DOM操作方法完全可以应付web开发工作!但还是有很多的顾虑,比如各个浏览器厂商支持程度不一样,很多的开发者为了保险起见,还是觉得使用jQuery更安全一些。大多数时候,你完全不用顾虑这么多,尽管用就是了,很多的时候只要在你的页面中引用一个 polyfill就能很好的处理那些不兼容新方法的浏览器。

只需要引入这个简单的脚步,就可以处理任何兼容问题。详细可以去它的官网看看polyfill.io

jQuery很慢吗?

当然,jQuery可能比那些写的糟糕的js要快,但是这也是你要更加好好学习javascript的理由!作为一个jQuery的主要贡献者Paul Irish曾说道:

为了有更好的性能,不要使用jQuery的hide()方法

作为jQuery的创建者,在它的一本书中Secrets of the JavaScript Ninja曾经说过这样一段话:

如果你在使用一个第三方的javascript的库的时候,你需要了解它的一个原理。最主要的一个原因是性能。了解一个库的工作原理,可以使你写出更加高性能的代码。

真的可以和jQuery说拜拜了么?

真的可以和jQuery说拜拜了么?还真不是那么容易,特别是jQuery发展了这么多年,已经形成了一个庞大的生态圈。所以现在有很多的微型库试图模仿jQuery的风格,来增加对开发者们的亲切感。

  • W3C的专家Lea Verou写过一篇文章jQuery Considered Harmful并且写了一个Bliss.js微型库。它就是模仿jQuery的语法风格$
  • Paul Irish也写过一个Bling.js脚本也是用来模仿模仿jQuery的语法风格$
  • Remy Sharp提供了一个微型脚本库min.js

当然我并不是一个jQuery反对者。现在依然还有很多非常棒的开发者选择使用jQuery。如果你已经习惯了使用它,当然可以继续使用它。现在很多的企业在招聘的时候,仍然把它作为一个必备的技能要求。不过,微软宣布了一个消息,Internet Explorer 11将是IE浏览器的最后一个版本,一旦IE退出了web的舞台,那么jQuery也可能随着IE的消亡也会推出历史舞台。到时候,jQuery可能就真多没有存在的必要了。

本文主要是从You Might Not Need jQuery这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!

两种方法使vue实现jQuery调用

vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作。而jQuery需要记忆的内容颇多

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

JQuery的ajax函数执行失败,alert函数弹框一闪而过

原因其实非常简单,把form表单里最后提交按钮的type=submit换为type=button,因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

关于jquery中ready()方法的几种写法总结

ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验。ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

jQuery中四个绑定事件的区别 on,bind,live,delegate

jQ中提供了四种事件监听方式,bind、live、delegate、on,对应的解除监听的函数分别是unbind,die,undelegate,off.用.bind(),把相同的一个事件处理机制用到所有匹配的DOM元素上;多事件处理

Eclipse去除jquery引入错误

去除eclipse的JS验证:第二步:右键项目 -> properties -> Builders 去掉JavaScript Validator 前面的勾,第三步:复制该js文件到某个地方,然后从eclipse中直接删除 了报错的js文件,错误消失,再把刚才那个js文件拷进来。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全