原始的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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
js中数组的常用方法小结
Dec 30 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
Vue看了就会的8个小技巧
Jan 21 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环境搭建最新方法
2006/09/05 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
Python类的继承和多态代码详解
2017/12/27 Python
TensorFlow实现创建分类器
2018/02/06 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python矩阵的转置和逆转实例
2018/12/12 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Django Form常用功能及代码示例
2020/10/13 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
异常和异常类的概念
2014/09/12 面试题
2014年保密工作总结
2014/11/22 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
学会感恩主题班会
2015/08/12 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python