原始的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 相关文章推荐
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 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
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
北京奥运会主题口号
2014/06/13 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
师德承诺书2015
2015/04/28 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
死亡诗社观后感
2015/06/05 职场文书
《草船借箭》教学反思
2016/02/23 职场文书