• JQuery学习笔记


    收集资料开始学习JQuery,有关谷歌CDN介绍的内容来自网络,不知道是谁写的。

    直接以代码开始:

     1 <script type="text/javascript">
     2         var oldglobvar = {};
     3         for (var i in window) {
     4             oldglobvar[i] = 1;
     5         }
     6     </script>
     7     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     8     <script type="text/javascript">
     9         for (var i in window) {
    10             if (i in oldglobvar) {
    11                 continue;
    12             }
    13             else alert(i);
    14         }
    15     </script>

    上面的代码多了一行可以看出我们加载JQuery库之后,多了两个全局变量,JQuery,$.现在我们输出看一下他们是什么

    1 $: function( selector, context ) { 
    2 // The jQuery object is actually just the init constructor 'enhanced'
    3  return new jQuery.fn.init( selector, context ); 
    4 } jQuery: function( selector, context ) { 
    5 // The jQuery object is actually just the init constructor 'enhanced'
    6  return new jQuery.fn.init( selector, context );
    7  } 

    可以看出Jquery和$等价的,都是指向一个函数体,如果你不确定可以这样

    document.writeln($===jQuery);//返回true

    通常发布的是时候可以使用Google或Microsoft提供的CDN jQuery源。

    Google Ajax API CDN

    http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

    Google Ajax CDN Documentation

    Microsoft CDN

    http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js

    http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js

    Ajax CDN Announcement, Microsoft Ajax CDN Documentation

    使用 Google jQuery 的CDN方法用起来也很简单,直接在网页里引用Google服务器上的相关js文件就可以了。不过,如果引用多个js,就要插入多段的script。
    Google也提供了相应的办法,那就是google load。我们只需要在页面里引用一个js文件,就可以根据需要实时加载用到的js库了。

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    加载jQuery,可以这样使用:

    google.load("jquery","1.4.4");

    这样我们就从Google的最近的CDN镜像上加载了jQuery 1.4.4版的js库,接下来就可以正常写js代码了。不过,即使是Google的CDN镜像,下载也毕竟是需要时间的,万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办?我们可以设定在js库加载完以后才开始执行js:

    google.setOnLoadCallback(function(){//要执行的代码});

    更多有关google jsapi的相关介绍和文档,可以参考:google AJAX 库 API

    当然我们还有其他的类库可以加载

    在google 类库 http://code.google.com/intl/zh-CN/apis/libraries/devguide.html

    有各种各样的CDN,比如EXT Core、jQuery UI 、Dojo等等。

    虽然 CDN jQuery 源相当的稳定,不过我们也不能保证其能随时访问,万一大局域网一激动,我们不就蛋疼了,所以我们还要给它另外一个选择,让它根据条件加载 jQuery,加一个备用源,如下:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
    !window.jQuery && document.write('<script src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js><\/script>');
    //-->
    </script>

    也可以这样写:

    <!--
    document.write(unescape("%3Cscript src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    !window.jQuery && document.write(unescape("%3Cscript src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
    //-->

    然后保存到 jQuery.js 放在本地加载,文件很小,加载也快,变更版本也很方便。

    其中第二个地址可以换成你本地的 jQuery 以保证链接稳定性。这样的意义是:先去加载谷歌的jquery库文件,如果加载失败那么就加载微软的 jquery 库文件。如果加载 google jquery 成功则会忽略后面的微软 jQuery 代码。


    好多的中文手册,就不在写关于JQuery了,自己之前也没接触过WEB应用,还是好好练习下。

  • 相关阅读:
    Dev 之 GridControl 列表 显示底部(包括底部统计)
    DEV 之 有些控件不允许拖动。
    Split 之特殊用法
    WebSerivce与WebAPI的区别
    DevExpress的DateEdit设置显示日期和时间
    indexOf 和 lastIndexOf的区别
    DevExpress GridControl使用教程:之 添加 checkbox 复选框
    APP通用测试用例大全
    Windows下搭建easyMock
    Centos8搭建Easy-Mock详细步骤
  • 原文地址:https://www.cnblogs.com/rohelm/p/2484421.html
Copyright © 2020-2023  润新知