原始的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下利用arguments实现string.format函数
Aug 24 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
Vue.js实现可编辑的表格
Dec 11 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的博客ping服务代码
2012/02/04 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
用js实现放大镜效果
2020/10/28 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python网络编程示例(客户端与服务端)
2014/04/24 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
洗发露广告词
2014/03/14 职场文书
爱国演讲稿500字
2014/05/04 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
安全先进个人材料
2014/12/29 职场文书
幼儿学前班评语
2014/12/29 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书