JQuery 加载 CSS、JS 文件的方法有哪些?

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

时间: 2024-10-03 14:55:47

JQuery 加载 CSS、JS 文件的方法有哪些?的相关文章

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来

Vue 加载外部js文件

Vue.js  加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/MGT2' } //函数的定义 export function formatXml(text) { return text } 使用外部的js <script> import {config,formatXml} from '../static/config.js' export default {

ThinkPHP 3.2.3 自动加载公共函数文件的方法

方法一.加载默认的公共函数文件 在 ThinkPHP 3.2.3 中,默认的公共函数文件位于公共模块 ./Application/Common 下,访问所有的模块之前都会首先加载公共模块下面的配置文件(Conf/config.php)和公共函数文件(Common/function.php),即默认的公共函数文件为 ./Application/Common/Common/function.php. 例如,在 ./Application/Common/Common 下新建 function.php,

通过本地加载ga.js文件提高Google Anlytics性能

Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载时间确实存在影响 Google分析代码到底会不会影响网页性能?本地托管ga.js是否可行?本文提供本地服务器托管ga.js的基本思路与实现方法. Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted.出现请

Chrome - 调试 Web Worker 加载的 js 文件

以前在使用 requirejs 时遇到过加载的 js 无法在控制台调试的情况,今天做了下总结 - 创建了 script 标签引入的 js 在 FF,Chrome 都能在调试器里找到. - Web Worker 引入的 js 无法直接在 FF,Chrome 的调试器里找到,需要在: Chrome 中:在引入的 js 文件顶部加上`//@ sourceURL=async_test.js`,然后就能在 (no domain) 中找到该 js FF 中:怎么处理还不会... eg: test.html

kettle转换JavaScript加载外部js文件

日常开发中,时常会出现这样一种情况.有大量的函数是通用的.而每个JavaScript里面写一遍,给维护带来很大的困扰.因而需要将公共的函数写在外部js文件中.这时就需要引入外部的公共文件了.下面是在转换里的JavaScript组件中引入外部公共js文件. //加载js文件 LoadScriptFile(getVariable("Internal.Transformation.Filename.Directory", "") +"/common_Functi

jquery加载解析XML文件

xml文件 <?xml version="1.0" encoding="utf-8" ?> <taxrates> <taxrate id="1"> <lower>0</lower> <upper>500</upper> <rate>5</rate> <buckle>0</buckle> </taxrate>

如何调试异步加载的js文件

最近在一个新的web项目中开发功能.这个项目的管理界面有一个特点,框架是固定的,不会刷新,每次点新的页面仅仅刷新一个div.div里面不是套的iframe,于是导致了一个问题,用浏览器无法调试异步加载页面里包含的js文件.简单的说就是在调试工具里面看不到异步加载页面里包含的js文件. 网上找到了一个解决办法,就是在需要调试的js文件顶部加一行代码: //@ sourceURL=msgprompt.js 注意,@符号和sourceURL间必须有空格.Chrome下效果: FireFox下也是OK的

springboot 中另一种加载css/js失败问题

首先在控制器中存在这样的一个映射 @RequestMapping(value = {"/login","login.html","user/login","user/login.html"}) public String Login(){ System.out.println("xx"); return "user/login"; } 理论上这四个URL都应该映射到一个html文件上 当