如何使用jquery动态加载js,css文件实现代码

使用jQuery动态加载JS、CSS文件是网站开发中非常常见的需求。下面将对如何使用jQuery动态加载JS、CSS文件进行详细讲解。

1. 动态加载CSS文件

动态加载CSS文件可以用来在页面加载时加载一些基本的CSS文件，同时也可以在用户操作的时候动态加载一些适配性的CSS文件。

动态加载CSS文件需要使用jQuery的$.get方法来获取所需的CSS文件，然后再使用jQuery的$("<link>")方法将获取的CSS文件插入到head标签中。

以下是一个动态加载CSS文件的示例代码：

$.get("style.css", function(css){
  $("<link>").attr({
    rel: "stylesheet",
    type: "text/css",
    href: "style.css"
  }).appendTo("head");
});

在上面的代码中，我们使用了$.get方法来获取style.css文件，并在获取成功后使用$("<link>")方法动态创建link标签，并将rel属性设置为stylesheet，type属性设置为text/css，href属性设置为获取到的style.css文件的路径。最后，使用.appendTo("head")方法将新创建的link标签插入到head标签中。

2. 动态加载JS文件

动态加载JS文件可以用来在页面加载时加载一些必要的JS文件，同时也可以在用户操作的时候动态加载一些适配性的JS文件。

动态加载JS文件需要使用jQuery的$.getScript方法来获取所需的JS文件，然后再将获取到的JS文件插入到head标签中。

以下是一个动态加载JS文件的示例代码：

$.getScript("myScript.js", function(){
  console.log("myScript.js loaded");
});

在上面的代码中，我们使用了$.getScript方法来获取myScript.js文件，并在获取成功后输出一条日志信息。这里需要注意的一点是，获取到的JS文件会自动插入到head标签中，无需再进行插入操作。

3. 完整示例

下面是一个完整的示例代码，其中包含了两个动态加载CSS文件和两个动态加载JS文件：

$.get("style1.css", function(css){
  $("<link>").attr({
    rel: "stylesheet",
    type: "text/css",
    href: "style1.css"
  }).appendTo("head");
});

$.get("style2.css", function(css){
  $("<link>").attr({
    rel: "stylesheet",
    type: "text/css",
    href: "style2.css"
  }).appendTo("head");
});

$.getScript("script1.js", function(){
  console.log("script1.js loaded");
});

$.getScript("script2.js", function(){
  console.log("script2.js loaded");
});

在上面的代码中，我们先使用$.get方法获取两个CSS文件，然后使用$("<link>")方法将获取到的CSS文件插入到head标签中。接着，我们使用$.getScript方法获取两个JS文件，并在获取成功后输出一条日志信息。

至此，我们已经完成了使用jQuery动态加载JS、CSS文件的完整攻略。