作为火了十多年的老牌明星类库jQuery, 相信做前端的小伙伴肯定都或多或少的使用和追捧过,当然我也不例外, 作为第一个学习的js类库,我曾经也觉得它是真正的唯一, 帮助你处理恶心的浏览器CSS/JS等兼容性问题, 而我只需要关注实际的业务逻辑即可, 简单, 快速和高产是jQuery早期的几个重要标签

但是随着浏览器的持续迭代更新,及其相关新的API的出现, 如果你只需要支持现代浏览器的话,也许现在你不再需要导入jQuery类库了,在这篇文章中,我们将介绍一些实际的Javacript代码,直接就可以替代我们常用的jQuery代码,希望大家会觉得比较实用~


添加页面元素

jQuery代码:

$('i').prepend('<div>--New Element--</div>');

演示代码

JS代码:

var parent = document.querySelector(".container");
var p = document.createElement("p");
parent.prepend("Some text", p);

注意这个方法目前还是实验阶段,可能你的浏览器并不支持需要使用polyfill来使得浏览器支持

删除页面元素

jQuery代码:

$('i').remove();

JS代码:

elem.remove();

演示代码

插入页面元素

jQuery代码:

$elem.before($someOtherElem);

JS代码:

elem.before(someOtherElem);

替换页面元素

jQuery代码:

$elem.replaceWith($someOtherElem);

JS代码:

elem.replaceWith(someOtherElem);

找到最近的匹配元素

jQuery代码:

$elem.closest("div");

JS代码:

elem.closest("div");

目前的浏览器支持

如果想看看浏览器对以上API的支持程度,大家可以使用caniuse来查看jquery风格的DOM操作的支持兼容性情况

淡入淡出效果

jQuery代码:

$elem.fadeIn();

CSS代码:

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

JS代码:

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

只绑定一次事件

jQuery代码

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

JS代码(过去使用的方式)

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

JS代码(现代使用的简化版本)

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

或者

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

动画效果

jQuery

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

JS

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('https://some.url', {
  success: (data) => { /* do stuff with the data */ }
});

JS代码

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

当然上面有部分JS代码在浏览器中执行的可能并不完整,但是基本所有的javascript都可以找到对应的polyfill来解决相关的兼容性问题,如下:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

也许有朋友觉得使用以上JS代码还是相对来说麻烦或者不成熟,但是未来随着Javascript浏览器执行的标准越来越完善,我们将会使用更加简单的方式来实现前端javascript的相对功能, 这个还是非常值得大家去尝试滴~

曾经的超级明星类库jQuery未来也许不再会被前端程序猿追捧了!的更多相关文章

  1. X因素 开启它就能让你成为超级明星

    开启它就能让你成为超级明星" title="X因素 开启它就能让你成为超级明星"> "只要努力就能成为明星!"记得电影学院的不少老师都这样告诫学 ...

  2. jquery 未来元素事件示例 on() delegate() live()

    jquery 1.7版后建议使用on() $(document).on("click","#green",function(){$(this).after('& ...

  3. 程序猿Web面试之jQuery

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/powertoolsteam/article/details/32325013  又到了一年一度的 ...

  4. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  5. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. jQuery Mobile 是创建移动 web 应用程序的框架。

    jQuery Mobile jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTM ...

  7. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  8. 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序

    原文 砸金蛋:jQuery+PHP实现的砸金蛋中奖程序 砸金蛋被广泛应用于庆典活动.商家促销.电视娱乐等场合,它的趣味.悬念能迅速活跃现场气氛.同样,我们也可以将砸金蛋应用到WEB网站上,用于开展线上 ...

  9. 借助微软提供的url重写类库URLRewriter.dll(1.0)实现程序自动二级域名,域名需要泛解析

    二级域名和系统中会员帐号自动关联,也就是系统中注册一个会员,会员自动就可以通过二级域名来访问,比如我的帐号是zhangsan,我在morecoder.com注册后,访问zhangsan.morecod ...

随机推荐

  1. GUN WINDOW 工具

    GNU utilities for Win32 CoreUtils for Windows 或者 完整的 package dd for windows Unix ports - WHICH, TEE ...

  2. Android 之窗口小部件高级篇--App Widget 之 RemoteViews

    Android 之窗口小部件高级篇--App Widget 之 RemoteViews 在之前的一篇博文(Android 之窗口小部件详解--App Widget)中,已经介绍了App Widget的 ...

  3. 关于iosApp审核问题

    求各位大神指导!!!!我上周app打包上传给APPstore准备发布,可是苹果官方发来邮件,说我引用了非公有选择,原文如下: Non-public API usage: The app referen ...

  4. 通俗易懂地讲解 __block 变量

    __block 变量 一般来说,在block内只能读取在同一个作用域的变数而且没有办法修改在block外定义的任何变量,此时若我们想要这些变数能够在block中被修改,就必须在前面挂上__block的 ...

  5. NSNotification的使用(对观察者模式最通俗、易懂的讲解)

    这是一个观察者模式. 首先在你需要监听的类中加入观察者: - (void)addObserver:(id)observer selector:(SEL)aSelector name:(NSString ...

  6. java.security.InvalidKeyException: Illegal key size aes解密失败

    使用微信时定期提示:java.security.InvalidKeyException: Illegal key size和 com.qq.weixin.mp.aes.AesException: ae ...

  7. Mysql一个非常有用的内置函数今天碰到要把MySQL数据库中的varchar转换成date类型进

    Mysql一个非常有用的内置函数 今天碰到要把MySQL数据库中的varchar转换成date类型进行时间的比较和查询.在网上找了找,发现MySQL也跟其他数据库一样有自己内置的转换函数:str_to ...

  8. TextView字体,行距,html格式,超链接,最大长度的设定

    颜色,大小 <!-- 设置字体的大小,推荐用sp做单位:字体颜色以#开头 --> <TextView android:id="@+id/textView1" an ...

  9. 解决 dotNetZip 解压乱码的问题,支持ZIP分卷解压缩

    using (ZipFile zip = ZipFile.Read("D:\\test\\2007.zip",System.Text.Encoding.Default)) { fo ...

  10. [PHP] 6种负载均衡算法

    CP from  : https://www.cnblogs.com/SmartLee/p/5161415.html http://www.dataguru.cn/thread-559329-1-1. ...