原始的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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 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
PHP个人网站架设连环讲(一)
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python 定时修改数据库的示例代码
2018/04/08 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
PyTorch中的C++扩展实现
2020/04/02 Python
序列化Python对象的方法
2020/08/01 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
技术负责人任命书
2014/06/05 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL