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

这篇文章主要介绍了如何使用jQuery动态加载JavaScript和CSS文件，对于需要灵活管理资源加载的小伙伴们来说，这无疑是一个宝贵的参考。

jQuery动态加载JavaScript和CSS文件的扩展方法

在现代web开发中，我们经常需要动态地加载Js文件和Css文件以满足不同的需求。使用jQuery，我们可以轻松地实现这一目标。

以下是使用jQuery实现动态加载的方法：

```javascript

$.extend({

includePath: '', // 设置文件路径

include: function(file) { // 动态加载文件

var files = typeof file == "string" ? [file]: file;

for (var i = 0; i < files.length; i++) {

var name = files[i].replace(/^\s|\s$/g, "");

// 判断文件类型

var isCSS = name.split('.').pop().toLowerCase() == "css";

var tag = isCSS ? "link" : "script";

var attr = isCSS ? "type='text/css' rel='stylesheet'" : "language='javascript' type='text/javascript'";

var link = isCSS ? "href" : "src";

if ($(tag+'['+link+'="'+$cludePath+name+'"]').length == 0) {

document.write("<"+tag+" "+attr+" "+link+"='"+$cludePath+name+"'>");

}

}

}

});

```

如何使用？

假设你想加载一个JavaScript文件和一个CSS文件，你可以这样做：

```javascript

$clude('

$clude('

```

或者，如果你已经设置了includePath，那么可以这样写：

```javascript

$cludePath='.jb51/html/';

$clude(['dedeajax.js', 'android.css']);

```

以上方法能够让你轻松地在网页中动态加载Js和Css文件，无需在初始加载页面时就载入所有资源。这种方法尤其适用于大型项目，可以有效减轻页面初次加载时的负担，提升用户体验。对于开发者而言，它也提供了更大的灵活性，允许你在运行时根据需要加载不同的资源。希望这篇文章能对你的学习有所帮助，为你的项目开发带来便利。