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

Web前端学习分享-JavaScript和jQuery常用方法的对比【摘要】在学习JavaScriptDOM和jQuery的过程中，小伙伴们是否和我有同样的感受：方法这么多，傻傻分不清，有点乱！本文以初学者角度对JS和jQuery的常用方法做一个直观的对比，在对比中学习，个人感觉有助于知识点的快速掌握。在学习JavaScriptDOM和jQuery的过程中，小伙伴们是否和我有同样的感受：方法这么多，傻傻分不清，有点乱！本文以初学者角度对JS和jQuery的常用方法做一个直观的对比，在对比中学习，个人感觉有助于知识点的快速掌握。jQuery实质上就是用JavaScript语言将常用的DOM的属性和方法封装起来的一个JavaScript库，它倡导的是writeless，domore，即写更少的代码，做更多的事，学习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无论是获取存在，还是不存在的元素，其结果都是返回[objectObject]，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代码