18910140161

如何动态加载jq文件

顺晟科技

2021-08-31 13:06:10

180

jquery中的 getScript() 方法,可以动态的使用 HTTP GET 请求来加载并执行js文件,具体的操作方法如下。

jq 中的 getScript() 方法

getScript():可以通过HTTP GET 请求来加载并执行JS文件!

语法:

jQuery.getScript(url,success(response,status))

参数:

url:外部JS文件的地址URL。

success(response,status):可省略,

jq 中的 getScript() 方法的使用

例:JQ直接加载并执行JS文件

1、先创建,一个“t.js”文件,并写入下面的代码,方法下面的例子调用!

alert('顺晟科技博客');

2、创建一个html页面,并写入下面的代码

<script>
    $.getScript("t.js");
</script>

运行html文件,直接弹出如下提示:

jq动态加载js文件的方法

例2:JQ加载JS文件,并绑定事件

1、修改js文件代码如下

$('#mochu').on('click',function(){
    alert('这是一个P标签');
});

2、修改HTML页面代码如下

<p id="mochu">点击我有弹出</p>
<script>
    $.getScript("t.js");
</script>

点击P标签如下图

jq动态加载js文件的方法

例3:JQ加载文件,成功后显示信息!

修改HTML页面如下:

<script>
$.getScript("t.js", function(){
    alert('JS文件加载成功!');
});
</script>

运行结果:

例4:事件触发JQ加载JS文件

html页面代码:

<button class="getjs">加载JS文件</button>
<script>
$('.getjs').on('click',function(){
    $.getScript("t.js", function(){
        alert('JS文件加载成功!');
    });
});
</script>

执行结果:

jq动态加载js文件的方法

使用 getScript() 方法注意事项

1、getScript() 等价于下面的代码

$.ajax({
    url: url,
    dataType: "script",
    success: success
});

2、getScript() 加载的JS文件不会被缓存

3、getScript() 加载的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。

4、jq 1.2版本之前 getScript() 不能跨域请求,1.2版本之后可以跨域!

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航