原始的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 相关文章推荐
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
基于layui数据表格以及传数据的方式
Aug 19 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
关于时间计算的结总
2006/12/06 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Python设计模式之观察者模式简单示例
2018/01/10 Python
使用pip安装python库的多种方式
2019/07/31 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
爱之链教学反思
2014/04/30 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
升职感谢信
2015/01/22 职场文书
实施意见格式范本
2015/06/05 职场文书
小学体育课教学反思
2016/02/16 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript
Python创建SQL数据库流程逐步讲解
2022/09/23 Python