JavaScript和JQuery之战再续

之前写过关于JavaScript和Jquery的之间的比较，现在再看比较偏向于理论知识，还不是很理解。经过这一段时间的项目的锻炼，对JQuery有了新的认识。

原生JavaScript和jQuery的较量

JavaScript和Jquery的比较，这让我想起我们一开始学习VB就接触到的函数，函数的功能就是能够完成某项功能，我们现在所用的JavaScript和Jquery也是实现某种功能，让某元素有一个行为，下面这个图就能看出这三者之间的关系，只是在越来越精细化。

接下来就以JavaScript中一个重要的事件window.onload和JQuery中的$(document).ready()事件来对比，详细说明二者的不同。

不同点

一、执行时机：

window.onload方法是网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行

$(document).ready()在DOM树加载完成就可以被调用

举一个简单的例子，当我们搜索百度图片时，为网页中图片添加某些行为（例如单击后让图片显示或隐藏），使用window.onload方法，用户必须等到每一幅图片都加载完毕后，才可以进行操作。如果使用JQuery来进行设置，只要DOM就绪（与图片有关的HTML下载完成，并且解析为DOM树，但很可能图片还未加载完成，所以此时图片的高度和宽度的属性不一定有效）出来就可以进行操作，不需要等待所有图片下载完成。很显然后者才会有更好的用户体验。

二、编写个数：

window.onload方法不能同时编写多个下面的代码并且正确执行；

      window.onload=function(){
	    alert("test1");

      }

      window.onload=function(){
	   alert("test2");
      }
 

结果：

只输出“test2”

$(document).ready()可同时编写多个

    $(document).ready(function(){
	alert("Hello world");
     });
     $(document).ready(function(){
	alert("Hello agin");
     });

结果：

两次都输出

三、简写：

JavaScript中无简写形式

JQuery中简写形式：

$(function(){

//...编写代码

})

$().ready(function(){

//...编写代码

})

JavaScript只有这一种书写方式，对于元素的查找比较复杂,而Jquery提供了多种方式，能够通过简单的代码找到所需要的元素。

总结：

通过上面可以看出，Jquery与JavaScript与HTML的交互，是通过事件来处理的。当文档或者某个元素行为发生变化，浏览器自动生成一个事件，但二者的机制不同，而且相对于复杂的JavaScript，Jquery有其简单的一面，能够为程序员提供方便。