原始的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 删除cookie失效的解决方法
Nov 12 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
vue配置多页面的实现方法
May 22 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php中__toString()方法用法示例
2016/12/07 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
keras多显卡训练方式
2020/06/10 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
自荐信写法介绍
2014/01/25 职场文书
旅游网创业计划书
2014/01/31 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
旅游市场营销方案
2014/03/09 职场文书
销售经理工作检讨书
2015/02/19 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android