• 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深入学习的第一节完成了

  • 相关阅读:
    JS两个页面通过URL传值
    新起点 新开始
    Spring Boot 常见标签
    关于Redis缓存数据库
    JPA问题汇总
    Dynamic 报表服务开发
    Dynamic crm自定义页面
    Dynamic 根据用户的角色权限设置相应的按钮显示
    Dynamic 工具类
    Dynamic 点击按钮,弹出一个漂浮页面
  • 原文地址:https://www.cnblogs.com/fengmitianxia/p/3330313.html
Copyright © 2020-2023  润新知