原始的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获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 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
php $_ENV为空的原因分析
2009/06/01 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
详解python调度框架APScheduler使用
2017/03/28 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Django中多种重定向方法使用详解
2019/07/17 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
就业自荐信
2013/12/04 职场文书
法制教育演讲稿
2014/09/10 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js