加下web前端干货分享qqqun：477149581免费领取全套教学视频资料！
作为火了十多年的老牌明星类库jQuery，
相信做前端的小伙伴肯定都或多或少的使用和追捧过，当然我也不例外， 作为第一个学习的js类库，我曾经也觉得它是真正的唯一，
帮助你处理恶心的浏览器CSS/JS等兼容性问题， 而我只需要关注实际的业务逻辑即可， 简单， 快速和高产是jQuery早期的几个重要标签
但是随着浏览器的持续迭代更新，及其相关新的API的出现， 如果你只需要支持现代浏览器的话，也许现在你不再需要导入jQuery类库了，在这篇文章中，我们将介绍一些实际的Javacript代码，直接就可以替代我们常用的jQuery代码，希望大家会觉得比较实用~
添加页面元素
jQuery代码：
$('i').prepend('
--New Element--');演示代码
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操作的支持兼容性情况
加下web前端干货分享qqqun：477149581免费领取全套教学视频资料！
淡入淡出效果
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来解决相关的兼容性问题，如下：
也许有朋友觉得使用以上JS代码还是相对来说麻烦或者不成熟，但是未来随着Javascript浏览器执行的标准越来越完善，我们将会使用更加简单的方式来实现前端javascript的相对功能， 这个还是非常值得大家去尝试滴~
最后给程序员几点建议：
1、写出可以运行的代码只是最基本的要求
当一个程序可以运行起来了，不要高兴得太早，这只是一个开始。例如你是否考虑到了各种边界情况；当程序收到非预期的输入会发生什么；所依赖的外部服务出现异常会怎样，发生错误时是否能从日志中还原出现场；如果程序处理的数据量或运行时间提高几个数量级会发生什么；构建、测试和部署过程是否做到了自动化；代码是否为将来的修改做好了准备等等。
2、分享到这就结束了，还是要推荐下我的web前端群：524262608，每天晚上20:00我都会开直播给大家分享web前端学习知识和路线方法，群里会不定期更新最新的教程和学习方法，大家都是学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的前端党，欢迎初学和进阶中的小伙伴。
3、先精通一种语言，再广泛涉猎
很多新手会各种编程语言搞得头晕目眩，不知道先从哪个学起，索性不如左右开弓，同时学习。
一旦你这样做了就会发现很难将同时学习的两种语言的知识区分开，因为它们实在太像了。但如果你先精通一门语言，了解了它每个语法的工作方式之后再学习其他语言就很轻松了，因为你对已掌握的语言已经足够了解，不会和新语言混淆。而且你会不由自主地用已掌握的语言去和新语言比较，更容易发现它们之间的差异，发现各自语法的内在逻辑。
网友评论