本文介绍如何使用jQuery的$.getScript()方法来加载并执行外部JavaScript文件。通过实例演示了如何实现颜色渐变效果，展示了$.getScript()的基本用法及回调函数的应用。
$.getScript()方法用来直接加载.js文件，不需要对JavaScript文件进行处理，javascript会自动执行。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>$.getScript()方法</title>
6<script src="jquery-1.2.6.min.js"></script>
7<script type="text/javascript">
8
$(function()
{
9
$.getScript('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){
10 $("#go").click(function(){
11 $(".block").animate({backgroundColor:"pink"},1000)
12 .animate({backgroundColor:"blue"},1000);
13
});
14 })
15
})
16</script>
17<style type="text/css">
18div.block{ width:300px height:500px; line-height:25px;}
19</style>
20</head>
21<body>
22<input type="button" id="go" value="go"/>
23<div class="block">这是测试区块</div>
24</body>
25</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>$.getScript()方法</title>6
<script src="jquery-1.2.6.min.js"></script>7
<script type="text/javascript">8
$(function(){9
$.getScript('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){10
$("#go").click(function(){11
$(".block").animate({backgroundColor:"pink"},1000)12
.animate({backgroundColor:"blue"},1000);13
});14
})15
})16
</script>17
<style type="text/css">18
div.block{ width:300px height:500px; line-height:25px;}19
</style>20
</head>21
<body>22
<input type="button" id="go" value="go"/>23
<div class="block">这是测试区块</div>24
</body>25
</html>
扫一扫
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
