原始的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 相关文章推荐
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
使用svg实现动态时钟效果
Jul 17 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
PHP 函数语法介绍一
2009/06/14 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
简单实现php上传文件功能
2017/09/21 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python+Splinter实现12306抢票功能
2018/09/25 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
同事打架检讨书
2014/02/04 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
营业用房租赁协议书
2014/11/26 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技