使用jquery动态加载Js文件和Css文件

使用jQuery动态加载JavaScript文件和CSS文件的方法，可以帮助提高网站的性能，降低网站的加载时间。下面是详细讲解使用jQuery动态加载JS文件和CSS文件的完整攻略：

加载JavaScript文件

使用$.getScript方法加载单个JS文件

jQuery提供了一个getScript方法，可以通过Ajax加载JavaScript文件，使用如下：

$.getScript('path/to/your/script.js', function() {
  // script is loaded and executed
});

上面的代码中，path/to/your/script.js是需要加载的JS文件的路径，当文件加载成功后，回调函数将被触发。在回调函数中，可以放置一些需要在JS文件加载成功后执行的代码。

使用$.when和$.getScript方法加载多个JS文件

上述示例只能加载单个JS文件，如何同时加载多个文件呢？此时可以使用jQuery的$.when和$.getScript方法，如下：

$.when(
  $.getScript('path/to/your/script1.js'),
  $.getScript('path/to/your/script2.js')
).done(function() {
  // all scripts are loaded and executed
});

上面的代码中，我们同时传递了两个参数到$.when函数中，分别是$.getScript方法加载的两个JS文件路径。当两个JS文件都加载成功后，回调函数将被触发。

加载CSS文件

使用$('')标签动态加载CSS文件

与加载JS文件不同，加载CSS文件需要使用标签添加到DOM树中。因此，jQuery提供的方法不是直接加载文件，而是创建一个link标签并添加到DOM树中，如下所示：

$('head').append('<link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css">');

其中，path/to/your/stylesheet.css是需要加载的CSS文件的路径。

使用$.get方法加载CSS文件

也可以使用jQuery的$.get方法，通过Ajax请求CSS文件内容，再动态创建link标签，并将内容添加到该标签中，如下所示：

$.get('path/to/your/stylesheet.css', function(data) {
  var $style = $('<style></style>').appendTo('head');
  $style.append(data);
});

上面的代码中，我们通过Ajax请求CSS文件的内容，将其添加到创建的style标签中，最后把该标签添加到head标签中。

通过上述两种方式，我们就可以使用jQuery动态加载JavaScript文件和CSS文件，从而提高网站性能，避免过度加载。