jQuery getScript()的用法（附带实例）

在页面中获取 JavaScript 文件内容的方法有很多，例如：

<script type="text/javascript" src="js/jquery.js"></script>

或者：

$("<script type='text/javascript' src='js/jquery.js'></script>").appendTo("head");

但这些方法都不是最理想的。在 jQuery 中通过全局函数 getScript() 加载 JavaScript 文件时，不仅可以像加载 HTML 片段一样简单、方便，而且 JavaScript 文件会自动执行，大大提高了页面的执行效率。具体代码如下：

$("#btn").on("click", function() {
    $.getScript("js/jquery.js");
});

与其他 AJAX 方法相同，$.getScript() 方法也有回调函数，它会在 JavaScript 文件成功加载后执行。

【实例】使用 $.getScript() 方法加载 JavaScript 文件。
1) 创建 index.html 页面，在页面中加入一个按钮和两个 <div> 元素。主要代码如下：

<input type="button" id="btn" value="改变背景色"/>
<div class="mofun">C语言中文网</div>
<div class="mofun">C语言入门教程</div>

2) 创建 test.js 文件，内容如下：

alert("test.js 加载成功！");

3) 在 index.html 页面中加载 test.js 文件，加载完毕后执行回调函数，给按钮添加 click 事件，使单击按钮时，改变 class 属性值为 mofun 的 <div> 元素的背景色。具体代码如下：

$(document).ready(function(){
    $.getScript("test.js",function(){
        $("#btn").on("click", function() {
            $(".mofun").css("backgroundColor","lightblue");
        })
    })
});

运行本实例，可以看到页面弹出“test.js文件加载成功！”的提示对话框，如下图所示：


之后单击“改变背景色”按钮，可以看到 class 属性值为 mofun 的 <div> 元素的背景色发生了改变，效果如下图所示。