原始的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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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
解析CodeIgniter自定义配置文件
2013/06/18 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python条件和循环的使用方法
2013/11/01 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
pytorch forward两个参数实例
2020/01/17 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
2015最新民情日记范文
2015/06/26 职场文书