标签：
在进行web前端开发（http://www.maiziedu.com/course/web-px/）时，我们可能会需要使用JQuery加载一个外部的css文件或者js文件，加载外部文件的方法有多种，下面具体看看各种加载方法
JS 方式加载 CSS、JS 文件：
//加载 css 文件function includeCss(filename) {
var head = document.getElementsByTagName(’head’)[0];
var link = document.createElement(’link’);
link.href = filename;
link.rel = ’stylesheet’;
link.type = ’text/css’;
head.appendChild(link)}
//加载 js 文件function includeJs(filename) {
var head = document.getElementsByTagName(’head’)[0];
var script = document.createElement(’script’);
script.src = filename;
script.type = ’text/javascript’;
head.appendChild(script)}
上面这种方式很简单，但也会出现一些问题，比如加载 JS 文件之后，需要执行 JS 内的方法，这时候偶尔会找不到方法执行，因为可能加载 JS 文件的时候，网络卡掉了，所以，需要换种方式加载，使用 JQuery 加载 CSS 文件：
$("head").append("<link>");var css = $("head").children(":last");css.attr({
rel: "stylesheet",
type: "text/css",
href: "address_of_your_css"});
Jquery 加载 JS 文件，有两种方式：
$.ajax({
url: "js file",
dataType: "script",
cache: true,
success: function () {
//todo
}});
$.getScript(’js file’, function () {
//todo});
上面两种方式都可以，并且都是在加载 JS 文件之后，再执行 JS 内部的方法（不会出现找不到方法执行错误），第二种会更简单些。
那如果我们需要加载多个 JS 文件呢？
$.when(
$.getScript( "/mypath/myscript1.js" ),
$.getScript( "/mypath/myscript2.js" ),
$.getScript( "/mypath/myscript3.js" ),
$.Deferred(function(deferred){
$(deferred.resolve);
})
).done(function(){
//place your code here, the scripts are all loaded});
如果需要多次调用，也可以抽离出方法：
//定义$.getMultiScripts = function(arr, path) {
var _arr = $.map(arr, function(scr) {
return $.getScript( (path||"") + scr );
});
_arr.push($.Deferred(function( deferred ){
$( deferred.resolve );
}));
return $.when.apply($, _arr);}
//调用var script_arr = [
’myscript1.js’,
’myscript2.js’,
’myscript3.js’
];$.getMultiScripts(script_arr, ’/mypath/’).done(function() {
// all scripts loaded});
以上就jquery加载js文件、css文件的几种方法，大家可以根据自己的喜好来选择种类。希望能帮助到大家。
标签：