jQuery中Ajax快捷方法之$.getScript() 

 jQuery中Ajax快捷方法之$.getScript()
 本节演示 提问
$.getScript()使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件,书写格式如下

jQuery.getScript( url [, success(script) ] )
url 类型: String 一个包含发送请求的URL字符串
success(script)类型: Function()当请求成功后执行的回调函数
本节课程实例代码
(function() {
  var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js";
  $.getScript(url, function() {
    $("#go").click(function(){
      $(".block")
        .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "olive" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "##1ab" }, 1000 );
    });
  });
})();
我们知道在jQuery中animate()方法并不能执行让北京颜色进行变化的函数,因为颜色值不像宽度高度等值是固定可变的,因此我们只能依赖color插件实现上述功能,所以我们先使用$.getScript()方法将color插件加载下来之后,再去执行颜色动画
<!-- HTML代码片段中请勿添加<body>标签 //-->
 
<button id="go">&raquo;点击加载js插件</button>
 
<div class="block"></div>


<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

 

/*CSS源代码*/
button{
  display:inline-block;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:4px;
  background:#1aba85;
  color:#fff;
  font-size:13px;
  text-align:center;
  line-height:1.4;
  margin:5px;
  cursor:pointer;
}
div{
  width:120px;
  height:100px;
  background:#1ab;
  margin:5px;
  border-radius:4px;
}
/*Javascript代码片段*/
(function() {
  var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js";
  $.getScript(url, function() {
    $("#go").click(function(){
      $(".block")
        .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "olive" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "##1ab" }, 1000 );
    });
  });
})();

 

posted on 2017-10-11 09:07  奔跑的葛根  阅读(444)  评论(0)    收藏  举报

导航