掌握JavaScript的10个实用技巧，无需依赖jQuery

jQuery是一款优秀的JS库，它是在IE6盛行时出现的。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。不得不说jQuery是一个编写跨浏览器代码的完美工具。

而现在，网页浏览器比刚开始时先进多了。我们可以轻松地使用ES5提供的所有功能。而且还可以尽情支配使用HTML5 APIs，使得围绕DOM的工作更轻松愉快。如今，开发者们可以有选择的摒弃jQuery，与此同时，工作效率并不会因此降低。

我们可以不那么依赖jQuery了，但是jQuery依旧是一款非常棒的库，并且很多时候用了比不用好。但我要说的是，在完成一些只有少量js交互，浏览器扩展和移动站点的简单页面时，可使用vanilla JS。如你想尝试，这里介绍10种方法。

1.监听文件

编写jQuery时要做的第一件事就是将你的代码包含进$(document).ready()call，然后你才能知道DOM什么时候能执行操作。没有了jQuery，我们就使用 DOMContentLoaded 事件。

2. 选择元素

很久以前，我们只能通过id，class和tag name来选择元素，而拥有智能css类选择器的jQuery简直就是大救星。浏览从此流行起来，两款重要的API也进入人们的视线：querySelector和 querySelectorAll。

3.添加和删除事件侦听器

监听事件是构建一个web应用程序的一个基础部分。曾经因为这个问题而划分出两大阵营——IE和其他浏览器。但今天我们都用addEventListener。addEventListener需要第三个参数 (useCapture)，但有时也不需要。结果是代码看起来越来越像jQuery。

4.操作类和属性

不使用jQuery操作一个元素的类名称在以往是很不方便的一件事。现在就不会了，这多亏有了classList property。如果你需要操作属性，这里还有setAttribute。

5. 获取和设置元素内容

jQuery有着方便易用的 text() 和 html() methods。在他们的位置，你可以使用textContent和innerHTML属性。

6. 插入和移除元素

虽说有jQuery会更简单方便，但要是没有也可以就用javascript添加和移除DOM元素。添加、移除、替换任意元素都可以。

7. 遍历DOM树

每个真正的JS ninja都知道，DOM藏有巨大能量。与jQuery相比，普通的DOM api提供有限的功能。然而，仍然有很多事情可以做去遍历整个树。

8.阵列循环

jQuery提供的一些实用方法可用ES5的标准。对于迭代数组，我们可以使用forEach和map而非他们的jQuery版本——each()和map()。只是小心的不同参数和回调的默认的这个值。

9. 动画

jQuery的动画比你那些自己贴合在一起的东西都要好。要是你需要复杂的、可编写脚本的动画你还是该继续使用jQuery的。但是好在有了CSS3，一些简单的case仅仅使用Animate.css这种轻量级库就可以搞定。只需添加和移除类的名字到元素就可以触发动画效果了。

10. AJAX

AJAX也是一种创建交互式网页应用的网页开发技术。好消息是，我们现在到处都可以使用相同的代码了。不好的是，示例和用XMLHttpRequest发送AJAX请求依旧很复杂，所以最好还是留给库来完成。但是你不需要因此就把整个jQuery包含进去，只需使用一个lightweight libraries就可以了。

总结

一个小巧的网页是值得我们为之努力的，不仅加载迅速，而且用户体验也更好。今天分享的这些小贴士还是有很多地方能用得上的。但要记住不要为了降低字节数而牺牲好的开发实践。