无需 jQuery,编写JavaScript的10个小贴士

原创|使用教程|编辑:龚雪|2014-07-08 11:28:33.000|阅读 134 次

概述:无需 jQuery,也能编写JavaScript。这里介绍了十种方法供你尝试选择。

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就可以了。

总结

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



标签:JavaScript jQuery

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
购物车 在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat