原始的js代码和jquery对比体会


Posted in Javascript onSeptember 10, 2013

Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript, we could add the highlightedclass as shown in the following code snippet:

window.onload = function() { 
var divs = document.getElementsByTagName('div'); 
for (var i = 0; i < divs.length; i++) { 
if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) { 
divs[i].className += ' highlight'; } 
} 
function hasClass( elem, cls ) { 
var reClass = new RegExp(' ' + cls + ' '); 
return reClass.test(' ' + elem.className + ' '); 
} 
};

在我们自己处理的时候,甚至是这么简单的任务在不使用jquery的时候都会变得复杂。用原始的js,我们可以使用下面的代码片段添加highlighted类:

Despite its length, this solution does not handle many of the situations that jQuery takes care of for us in Listing 1.2, such as the following:
• Properly respecting other window.onloadevent handlers
• Acting as soon as the DOM is ready
• Optimizing element retrieval and other tasks with modern DOM methods
尽管很长,但是这个解决方案依然没有处理很多jquery在列表1.2中为我们做到的一些事情,比如下面的这些:
1、合适的处理其他的window.load事件
2、在DOM结构准备好的时候开始行动。
3、使用现代的DOM方法优化元素查找和其他任务。

We can see that our jQuery-driven code is easier to write, simpler to read, and faster to execute than its plain JavaScript equivalent.

我们可以清晰的看到我们的使用query的代码比原生js代码写起来更容易,读起来更简单,运行起来更快。

Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
js获取url参数值的两种方式
Sep 10 #Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 #Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 #Javascript
jquery实现按Enter键触发事件示例
Sep 10 #Javascript
验证手机号码的JS方法分享
Sep 10 #Javascript
js控制frameSet示例
Sep 10 #Javascript
js判断两个日期是否相等的方法
Sep 10 #Javascript
You might like
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Django框架视图函数设计示例
2019/07/29 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
应届生人事助理求职信
2013/11/09 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
加强作风建设心得体会
2014/10/22 职场文书
如何写辞职书
2015/02/26 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis