原始的js代码和jquery对比体会
更新时间：2013年09月10日 16:08:51 作者：
在我们自己处理的时候，甚至是这么简单的任务在不使用jquery的时候都会变得复杂，通过下面我们可以清晰的看到使用query代码比原生js代码写起来更容易
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代码写起来更容易，读起来更简单，运行起来更快。
复制代码 代码如下:
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代码写起来更容易，读起来更简单，运行起来更快。
相关文章
2016年推出微信小程序，时至今日，历经几个版本的更新，已形成了相对实用和稳定的服务平台。本文简单的介绍了微信小程序的入门用法，今后会继续关注和实践。需要的朋友可以参考学习，下面来一起看看吧。2017-03-03
这篇文章主要介绍了JavaScript中的pow()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
js获取height和width属性的值在日常开发中很常见，于是本人搜集整理了一下，感兴趣的朋友可以参考下2013-01-01
本文为大家详细介绍下时间标准指的是什么？UCT和GMT 的概念、关联和区别？以及时间表示标准有哪些？感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了JavaScript显式数据类型转换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了简介JavaScript中search()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
深入理解JavaScript系列（30）：设计模式之外观模式详解
这篇文章主要介绍了深入理解JavaScript系列（30）：设计模式之外观模式详解,外观模式（Facade）为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用,需要的朋友可以参考下2015-03-03
onkeyup，onkeydown和onkeypress的区别介绍
三者在事件的响应上还有一点不同，就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受，而响应onkeyup的时候，输入流已经被系统接受2013-10-10
JavaScript中require和import的区别详解
本文详细讲解了JS中require和import的区别，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了a标签添加onclick事件的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
最新评论