JQuery 加载 CSSJS 文件的方法有哪些？

Posted 2020-06-28

在进行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文件的几种方法，大家可以根据自己的喜好来选择种类。希望能帮助到大家。