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有其简单的一面,能够为程序员提供方便。

   

  

 


原文地址:https://www.cnblogs.com/zsswpb/p/6329459.html