怎么使用jquery在运行时装载javaScript文件

为了提高站点的性能和减少返回的所有文件的大小,你也许想在需要的时候才去装载JavaScript(.js)文件。在jquery,你能够使用$.getScript函数来按需或在运行时装载(下载)JavaScript文件。

例如:

$("#load").click(function(){
        $.getScript('helloworld.js', function() {
                $("#content").html('Javascript is loaded successful!');
        });
});

当一个id为load的按钮被点击时,helloworld.js文件将会在运行时动态的装载。

 注意:$.getScript 是采用异步请求,来实现的。

你可自己去试一下:

 

在一下的例子中,当点击load按钮,它将会装载helloworld.js文件,此文件有一个sayhello()

函数。

<html>
<head>
 
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
 
</head>
<body>
  <h1>Load Javascript dynamically with jQuery</h1>
 
<divid="content"></div>
<br/>
 
<buttonid="load">Load JavaScript</button>
<buttonid="sayHello">Say Hello</button>
 
<scripttype="text/javascript">
 
$("#load").click(function(){
  $.getScript('js-example/helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! sayHello() function is loaded!
     ');
  });
});
 
$("#sayHello").click(function(){
  sayHello();
});
 
</script>
</body>
</html>

helloworld.js 文件内容为:

function sayHello(){
	alert("Hello ~ jQuery!");
}


初始效果:

点击load javascript 按钮后:


接着点击say hello 的效果:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值