原始的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 相关文章推荐
js判断两个日期是否相等的方法
Sep 10 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
js动态创建标签示例代码
Jun 09 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
小试小程序云开发(小结)
Jun 06 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
一个简单计数器的源代码
2006/10/09 PHP
PHP简介
2006/10/09 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
python中的计时器timeit的使用方法
2017/10/20 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python telnet登陆功能实现代码
2020/04/16 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
考博专家推荐信模板
2013/12/02 职场文书
运动会100米解说词
2014/01/23 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
宣传稿格式范文
2015/07/23 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2016年父亲节寄语
2015/12/04 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python数字类型和占位符详情
2022/03/13 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript