Web前端学习分享-JavaScript和jQuery常用方法的对比

在学习JavaScript DOM和jQuery的过程中，小伙伴们是否和我有同样的感受：方法这么多，傻傻分不清，有点乱！本文以初学者角度对JS和jQuery的常用方法做一个直观的对比，在对比中学习，个人感觉有助于知识点的快速掌握。

jQuery实质上就是用JavaScript语言将常用的DOM的属性和方法封装起来的一个JavaScript库，它倡导的是write less，do more，即写更少的代码，做更多的事，学习jQuery能极大的简化JavaScript的编程，下面我们就一起对比着来看看，对于同一种操作，原生的JavaScript和用JavaScript封装的jQuery的实现方法都是什么？

下文为书写简单起见，JavaScript简写为JS。

一、等待加载

一般情况下，jQuery的库文件和JavaScript代码往往都是在body元素之前加载，此时会存在无法及时获取DOM对象的问题。JS和jQuery都提供了相应方法来解决此问题。

JS：JS提供了windowonload来延迟加载它所绑定的函数，即用window.onload = function(){ //代码}包裹的代码是在网页全部加载完毕（包括DOM元素所关联的文件，如<img>标签所指向的图片）后才执行。

jQuery：jQuery使用$(document).ready()方法来延迟加载，和window.onload不同的是，它是在网页中的DOM加载完毕后就执行它所绑定的函数，此时DOM元素关联的文件并不一定都加载完毕。如在一个包含大量图片的网页中，包含img元素在内的所有DOM元素加载完毕后，就会执行绑定的函数，而不需要等待所有img元素的src属性指向的图片都加载完毕才执行。

问：在实际应用中，一个网页中如果有多个js文件，每个js文件中都会用到window.onload方法，这个时候每个js文件中的代码都能依次执行吗？

JS：

运行代码后，发现只弹出"js2"的对话框，这说明，同一个网页中如果有多个window.onload方法，后面的window.onload法会覆盖前面的,最后只能执行最后一个，如果两个都想执行，只能将绑定的函数写在一个window.onload=function(){}中，但这样无疑增加了工作量，不利于网页的维护和更新。

jQuery：jQuery就不存在以上的问题

同样是一个网页中包含多个$(function(){})，运行代码后，每个js文件中的代码都依次执行，依次弹出"jq1","jq2"

这样就很好的解决了一个网页中存在多个js文件，并保证都依次执行的问题，如果后面要追加新的功能，完全可以独立追加一个新的js文件，而不用破坏原有的。

二、获取元素

问：分别通过ID，标签名，class来获取以下元素

JS:

jQuery：

问：如果页面中某个元素后期因为某种原因被删除了，此时js代码会受到什么影响？

所以，jQuery无论是获取存在，还是不存在的元素，其结果都是返回[object Object]，jQuery内部有晚上的容错机制，这样如果网页上因为某种原因删掉某个元素，这个网页用jQuery写的js代码也不会报错，但如果是用原生JS写的话，就会报错。JS为避免此种问题，就需要事先对元素的存在与否进行判断。如果要操作的元素很多，对每一个元素都进行判断的话，会非常繁琐。这也是jQuery一个很大的亮点所在。

三、设置和获取HTML、文本和值

问：获取和设置p的HTML。文本的值

JS：

jQuery：

四、DOM节点操作

1、创建节点并追加

要求：创建一个<p>，设置文本内容为"我是一个段落"，并添加到body这个父元素中

JS：createElement()、createTextNode()、appendChild()

jQuery：$(html)、append()

可以直接写为

注意：无论是用JS还是jQuery，创建的新元素和文本节点都不会自动添加到网页文档中，都需要进一步追加到父节点的操作才能在网页中显示。

补充：jQuery还提供了其他追加节点的方式：appendTo()、prepend()、prependTo()

如下：向<p>中添加"<strong>哈哈!</strong>"

动态创建节点中，jQuery相比于原生JS的操作就简便很多，原生JS中，元素节点和文本节点要一个一个分别创建，然后从下往上一层一层的追加，非常繁琐。

jQuery只需要两步就可完成：第1步：直接将要创建的HTML代码写入$(html)中；第2步：挂载到文档中的父元素上；无论$(html)中的html多么复杂，都可实现。

2、插入节点

要求：在现有的p节点的前面或后面插入一个新的元素节点div

JS：insertBefore()

注意：JS并没有提供现成的inserAfter()方法，但是可以利用现有的方法实现，此处不做说明

jQuery：before()、insertBefore()、after()、insertAfter()

3、删除节点

JS：removeChild()

jQuery：remove()、detach()、empty()

4、复制节点

要求：点击按钮，会复制一个新的按钮

JS：cloneNode()

jQuery：clone()

5、替换元素

目标：将p中的"<strong>我是一个段落</strong>"替换成“<em>我是一段倾斜的文本</em>”

JS：replaceChild()

jQuery：replaceWith()、replaceAll()

六、读取和设置样式

JS：

注意：以上通过js获取style属性的样式的方式只能获取行内样式，无法获取到外部CSS设置的样式，这就有很大的局限性了。

jQuery：

注意：jQuery中的css()方法无论是内联样式，还是外部CSS设置的样式，都可以获取

通过以上对JS和jQuery常用方法的对比，对jQuery倡导的"write less,do more"理念是不是有了更直观的认识。

以上方法也只是其中的一部分，还有很多方法需要进一步的学习，如有疏漏，欢迎指正,一起加油！