原始的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 写类方式之七
Jul 05 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue中实现高德定位功能
Dec 03 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
JavaScript日历实现代码
2010/09/12 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python 装饰器深入理解
2017/03/16 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
django框架中间件原理与用法详解
2019/12/10 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
工作会议通知
2015/04/15 职场文书
工作态度怎么写
2015/06/25 职场文书
2016寒假假期总结
2015/10/10 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers