使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>使用getScript()方法异步加载并执行js文件</title>

         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

         <style>

             #divtest

             {

                 width: 282px;

             }

             #divtest .title

             {

                 padding: 8px;

                 background-color:blue;

                 color:#fff;

                 height: 23px;

                 line-height: 23px;

                 font-size: 15px;

                 font-weight: bold;

             }

             ul

             {

                 float: left;

                 width: 280px;

                 padding: 5px 0px;

                 margin: 0px;

                 font-size: 14px;

                 list-style-type: none;

             }

             ul li

             {

                 float: left;

                 width: 280px;

                 height: 23px;

                 line-height: 23px;

                 padding: 3px 8px;

             }

             .fl

             {

                 float: left;

             }

             .fr

             {

                 float: right;

             }

         </style>

     </head>

     <body>

         <div id="divtest">

             <div class="title">

                 <span class="fl">我最喜欢的运动</span>

                 <span class="fr">

                     <input id="btnShow" type="button" value="加载" />

                 </span>

             </div>

             <ul></ul>

         </div>

         <script type="text/javascript">

             $(function () {

                 $("#btnShow").bind("click", function () {

                     var $this = $(this);

                     $.getScript("./sport.js",function(){

                         $this.attr("disabled", "true");

                     });

                 })

             });

         </script>

     </body>

 </html>
 var data = [{

         "name":"足球"

     },{

         "name":"篮球"

     },{

         "name":"乒乓球"

     },{

         "name":"排球"

 }];

 $.each(data,function(index,sport){

     $("ul").append("<li>"+sport['name']+"</li>");

 });

使用getScript()方法异步加载并执行js文件的更多相关文章

  1. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  2. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  3. JQuery文档加载完成执行js的几种方法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  4. 动态加载CSS，JS文件

    var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); //文件全部加 ...

  5. 脚本加载后执行JS回调函数的方法

    动态脚本简单示例 // IE下: var HEAD = document.getElementsByTagName('head')[0] || document.documentElement var ...

  6. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  7. 火狐浏览器怎么查看页面加载了那些js文件，那系js文件有作用

    方法一: 右击查看原代码,点击js链接如果能够看到文件内容,证明加载成功 方法二: 按F12键,如果控制台没有加载错误,证明加载成功:

  8. .NET Web后台动态加载Css、JS 文件，换肤方案

    后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...

  9. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

随机推荐

  1. 网站如何提高PR值

    做了站长这些年,积累些经验,记录下来,分享兄弟. 一.商城类型网站 对于商城型的网站站内优化来说,主要是用户咨询和浏览产品时产生的疑问.比如当某用户看到一些自己感兴趣的产品需要咨询的时候,自然就会寻找 ...

  2. gcc常用选项

    gcc选项:    -c         只编译,不链接成为可执行文件,编译器只是由输入的.c等源代码文件生成.o为后缀的目标文件,通常用于编译不包含主程序的子程序文件.    -std=     指 ...

  3. C++ const用法小结 （欢迎大家拍砖）

    C++const 关键字小结 const 是constant的缩写,本意是不变的,不易改变的意思. const 在C++中是用来修饰内置类型变量,自定义对象,成员函数,返回值,函数参数. 一.cons ...

  4. 分享：mysql 随机查询数据

    在mysql中查询5条不重复的数据,使用以下: 1 SELECT * FROM `table` ORDER BY RAND() LIMIT 5  就可以了.但是真正测试一下才发现这样效率非常低.一个1 ...

  5. return *this和return this的区别

    别跟我说, return *this返回当前对象, return this返回当前对象的地址(指向当前对象的指针). 正确答案为:return *this返回的是当前对象的克隆(当然, 这里仅考虑返回 ...

  6. linux设备驱动模型

    尽管LDD3中说对多数程序员掌握设备驱动模型不是必要的,但对于嵌入式Linux的底层程序员而言,对设备驱动模型的学习非常重要. Linux设备模型的目的:为内核建立一个统一的设备模型,从而又一个对系统 ...

  7. Objective-C的内省(Introspection)小结

    内省(Introspection)是面向对象语言和环境的一个强大特性,Objective-C和Cocoa在这个方面尤其的丰富.内省是对象揭示自己作为一个运行时对象的详细信息的一种能力.这些详细信息包括 ...

  8. ThinkPHP/Common/extend.php

    <?php // +---------------------------------------------------------------------- // | ThinkPHP [ ...

  9. ASP.NET MVC 学习第二天

    今天使用mvc完成简单的增删改,内容比较简单,来熟悉一下mvc,数据库操作是用前面的ef,也算是温习一下ef吧. 新建mvc项目,在项目中的Models内添加ef,我这里只操作一下简单的user表.里 ...

  10. WinForm程序界面假死，寻求完美解决方案

    故事的开端是这样的,小白是一个程序员,他确实也是一个小白,目前还在程序员发展的道路上,兢兢业业的小心求学. 有一天,小白接到一个任务,完成一个Winform程序,附加一个功能就是可以读IC卡. 小白终 ...