jquery的发展由来和深入理解(一)

由于前三天帮其他同学做个项目的界面设计和布局之类的事情,很久没上来写点东西来记录自己的历程了

好了,再未来的三天内,我会重温一下jquery的知识,都是自己的深入的理解,因为最近在做项目,或者帮其他同学做他们的毕业设计之类的前端东西,感觉juqery实在是一个很好的东西,所以最近想重温一下以前的东西,自己感触很深,理解更加透彻了,所以在这里写下来,也算是自己对自己的历程的总结吧,不过不是很全面,但是我觉得是精彩的地方,我没有写过书什么的,所以记下来的东西不是很 全面,所以有阅读的朋友需要全面地知识的话,还是劝你上网找个全面的电子书看一下,学习一下,比较好一点

好了,今天开始了,重返博客园呢,呵呵。。又在自言自语了,不过,已经习惯了

首先,说一下js吧,由于js的出现,使得网页和用户之间实现了一种实时的,动态的,交互的关系,使网页更加炫,更加酷了。

但同时,js的弊端也慢慢浮现出来了,js自身的三大弊端:第一:复杂的文档对象模型(Dom问题)  第二:不一致的浏览器实现(浏览器问题)  第三:缺乏便捷的开发,调试工具(工具问题)

正当js慢慢退下的时候,这个时候ajax出现了,ajax得出现,使得wed的应用更强大很多很多,所以围绕实现的ajax技术的相应的知识或者框架就慢慢浮现出来了

就在这个时候2006年的一个开源项目里,jquery出现了。

  好把,这里自己总结一下jquery的优势:

   第一:轻量级,

    完整的jquery的库有一百多k的,经过普通的压缩后,变成了四十多k吧,然后如果再经过服务器的gzip压缩后,就剩下十几k了,这是相当的乐观的,能够用上jquery强的功能,却不用付出太大的用户体验的网页浏览速度来得到,是非常好的,对于现在家庭的带宽如此大,这都只是瞬间完成的

    第二:强大的选择器;

   这个提一下js对dom进行选择吧,每一个都是getelementbyid或者getelementbytagname或者getelementbyname之类的,过长的提取方法和每一次单一的提取,让很多程序员都很抓狂,相对js的选择操作,jquery的强大的选择器绝对是玩爆呢,只要是css1--css3几乎所有的选择器,以及jquery独创的高级而复杂的选择器,甚至可以让开发者自己编写属于自己的选择器,这实在是太强大了

  第三:出色的dom操作的封装

   jquery封装了大量常用的dom操作,使开发者在编写dom操作相关程序的时候能够得心应手

 第四:可靠的事件处理机制

 第五:完善的ajax

  jquery将所有的ajax操作封装到一个函数$.(ajax)里,使得开发者处理ajax的时候能够专心处理业务逻辑而无需关心复杂的的浏览器兼容性和XMLHttpRequet对象的创建和使用的问题

 第六:出色的浏览器兼容性

   作为一个流行的js库,jquery能够在IE6以上,或者ff  safari  opera等都是很好的兼容的

     在jquery库中,$就是juqery的一个简写形式

往下,我们在网页里面调用js的时候,都是在<script></script>之间的写入jquery或者js的操作的,我们写入jquery的操作的时候,第一句总是$(document).ready(function){},而我们在 调用js操作的时候,第一句总是window.onload=function(){},然而,他们之间有什么区别呢?

首先,讨论执行时机这个点上,windon.onload必须等待网页中的内容加载完毕后(包括图片)才能执行,而$(document).ready(),在网页中所有的dom结构绘制完毕后就执行,可能dom元素关联的东西并没有加载完,也是可以执行的

然后,在编写一个数上,window.onload=function{}不能出现多个,只能出现一个,而$(document).ready()则可以出现多个。然后在这多个里面执行他们要处理的动作

在简写方面:window.onload是没有简写的,而$(document).ready()有几个简写的,其中一个就是:$(function(){})

好,继续往下学习:

jquery强大的链式操作:

  例子:

        $(".has_children").click(function{

         $(this).addClass("highlight")

          .children("a").show().end()                                //将子节点的<a>元素显示出来并重新定位到上次操作的元素

           .siblings().removeClass("highlight")

            .children("a").hid();

              })

来学习一下js对象:

   var domObj = document.getElementById("id");            //获得DOM对象

   var ObjHtml = domObj.innerHTML;         

学习jquery对象:

    说白了,jquery对象就是通过jquery包装DOM对象后产生的对象

    jquery对象是独有的,如果一个对象是jquery对象,那么就可以使用jquery里的方法

   $("#foo").html();          等同于:   document.getElementById("foo").innerHTML;

   在jquery中无法使用DOM对象的人和方法,Dom也不能用jquery对象的任何方法

    

    jquery对象转换成DOM对象:

    var  $cr   = $("#cr");     //juqery 对象

    var cr =    $cr[0];  或者 var cr = $cr.get(0);            //Dom对象

    alert(cr.checked)                           //检测这个checkbox是否被选中了

这样子转换之后,就可以使用DOM对象的方法了                           if(cr.checked)                  //DOm方式判断

      DOm对象转换jquery对象:

      var cr = document.getElementById("cr");             //dom对象

       var $cr  =$(cr);                                    //jquery对象

这样子转换之后就可以使用jquery的方法了                        if($cr.is(":checked"))             //jquery方法判断   返回boolean值

   备注:DOM对象才能使用DOM方法,jquery对象才能不可以使用DOM中的方法,但jquery对象提供了一套更加完整的工具用于操作DOM元素,后面会讲到

    平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂

解决jquery库和其他库的冲突问题:

   1.jquery库在其他库之后导入:

        可以在任何时候调用jQuery.noConflict()函数来讲变量$的控制权交给其他的js库

      例子:<script>

               jQuery.noConflict();               //将变量$的控制权移交给prototype,js

                JQuery(function(){                   //使用jQuery

                 jQuery(“p”).click(function(){

               })

                 })

               $("pp").style.display='none';             //使用prototype

              </script>

           然而,就可以在程序里将jQuery()函数作为jQuery对象的制造工厂

          此外,还有另一种选择,如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:

         var $j= jQuery.noConflict();            //自定义一个快捷方式

           $j(function(){})

             如果不想给jQuery自定义这些备用名称,还想用$而不管其他库的$()方法,同时又不想与其他库相冲突,那么有以下两种解决方法

         第一种:

              jQuery.noConflict();                        //将变量$控制权让给其他库

              jQuery(function($){                      //使用jQuery设定页面加载时执行的函数

             $("p").click(function(){                 //在函数内部继续使用$()方法

               alert($(this).text());

           })

               })

        第二种方法:

        jQuery.noConfict();                                 //将变量$的控制权交给其他库,

       (function($){                                            //定义匿名函数并设置形参为$

       $(function(){                                          //匿名函数内部的$均为jQury

         $('p").click(function(){                                 //继续使用$()方法

           alert($(this).text());               

           })

      

      })

          })

         

如果jQury库在其他库之前倒入

             这样子的情况下,直接用"jQuery"来做一些jQuery的一些工作,其他后面的库直接用$来用就行的

    例子:

         jQuery(function(){                                  //使用jQuery来进行工作

          jQuery("p").click(function(){

           alert(jQuery(this).text());                  //直接用jQuery来代替$

           })

          })

          $("pp").style.display="none";                  //使用prototype库

好了,到这里,jQuery深入学习的第一节完成了

原文地址:https://www.cnblogs.com/fengmitianxia/p/3330313.html