原始的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 select下拉框操作常用方法
Nov 09 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
Snoopy类使用小例子
2008/04/15 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
学习php中的正则表达式
2014/08/17 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
Python3简单实例计算同花的概率代码
2017/12/06 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
新三好学生主要事迹
2014/01/23 职场文书
文化宣传方案
2014/03/13 职场文书
安全生产承诺书范文
2014/05/22 职场文书
事业单位鉴定材料
2014/05/25 职场文书
工程部岗位职责范本
2015/04/11 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript