首页 > 其他分享 >【B/S】引用Google或微软的CDN加载jQuery

【B/S】引用Google或微软的CDN加载jQuery

时间:2023-05-06 20:08:11浏览次数:42  
标签:jQuery jquery Google CDN js ajax 加载


一、前言

前文介绍了JQuery的基础知识,下面小编给大家介绍一下引用Google或微软的CDN加载jQuery。

二、内容分析

      在网页中我们经常使用jQuery库,选择使用的jQuery加载源,能有效加快网站的加载速度,目前最佳的选择就是使用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 代码。

四、小结

      前些日子学习JavaScript的时候发现自己学习的不踏实,很飘的感觉。现在回过头来重新学习了一下JQuery,发现JavaScript很简单,还是要多多的尝试,多多总结。加油~~~


标签:jQuery,jquery,Google,CDN,js,ajax,加载
From: https://blog.51cto.com/u_16100820/6251073

相关文章

  • Jquery Validate验证
    HTML代码<formid="RegisterForm"><divclass="login-screen"><divclass="login-form"><divclass="form-group"><p>账号</p>&......
  • Google推荐的图片加载库Glide介绍
    Fresco以及我们今天的主角Glide。它们各有千秋,不能评定谁一定比谁好,只能说哪一个更适合你。我的理解下面我来谈一下个人对这些图片加载库的理解,如有错误,还望指教。UniversalImageLoader:一个强大的图片加载库,包含各种各样的配置,最老牌,使用也最广泛。Picasso:Square出品,必属精品......
  • jQuery 获得 form 表单值
     jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作;假如我们有如下页面:<inputtype="text"name="textname"id="text_id"value="">  ...下面来看怎么取得FORM中的各种值等等;functionget_form_value(){/*获得TEXT.AREATEXT的值*/va......
  • struts2+Spring+Hibernate+Jquery (json)
          Struts2文件的上传和下载http://wing929.javaeye.com/blog/216118基于struts+spring+hibernate+jquery的jmesa的分页实现样例http://wing929.javaeye.com/blog/216292http://hi.baidu.com/angel_lishiwen/blog/item/cf266627fcb59327d4074288.html stru......
  • jQuery扩展-noconflict
    Extendsindex.html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="../../Scripts/jquery-3.4.1.min.js"></script><scriptsrc="my......
  • jQuery AJAX之异步访问和加载片段
    HTML文件<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="../../Scripts/jquery-3.4.1.min.js"></script><scriptsrc="ajaxindex.js&......
  • jQuery效果-淡入淡出-滑动-回调
    <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><scriptsrc="../JQuery/jquery-1.8.0.min.js"></script><scriptsrc="JavaScript1.js">......
  • jquery的$()
    jquery的$().each,$.each的区别在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().eac......
  • jquery获取input输入框中的值
    如何用javascript获取input输入框中的值HTML<inputtype="text"id="CSDN_NAME"name="CSDN_NAME"class="CSDN_NAME">一、jquery方法通过namevarname=$('input[name="CSDN_NAME"]').val();通过**id**varna......
  • Google谷歌语法 - 让搜索事半功倍
    高效率的搜索方法-谷歌语法适用于多种搜索引擎,原主要对象为Google搜索引擎,其他搜索引擎也适用,如必应bing,百度,搜狗等语法类搜索方法site语法site意思为站点,该语法是限制搜索的目标为域名,然后搜索子域名。比如我们搜索“site:edu.cn”,这样搜出来的内容都是有关于学校的内容,而......