jquery动态加载js/css文件方法(自写小函数)


Posted in Javascript onOctober 11, 2014

先来看jquery自带的getSrcript文件

方法

$.getScript(url,callback)

实例

var testVar = 'New JS loaded!';

alert(testVar); function newFun(dynParam) {

alert('You just passed '+dynParam+ ' as parameter.');

}

动态调用方法
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的,当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>

上面的只能动态加载js代码,但不能加载css,后来自己写了一个可加载js与css的程序。

代码如下

$.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 att = name.split('.');

var ext = att[att.length - 1].toLowerCase();

var isCSS = ext == "css";

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

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

var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";

if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");

}

}

});

$.include(['hdivbox.js','pop_win.css']);
Javascript 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 #Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 #Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 #Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 #Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 #Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 #Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 #Javascript
You might like
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
javascript 处理null及null值示例
2014/06/09 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python正则表达式经典入门教程
2017/05/22 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python paramiko模块学习分享
2017/08/23 Python
Python内置模块turtle绘图详解
2017/12/09 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python文件拆分与重组实例
2018/12/10 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
百联网上商城:i百联
2017/01/28 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
RealTek面试题
2016/06/28 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
《大海那边》教学反思
2014/04/09 职场文书
个人整改方案范文
2014/10/25 职场文书
2015年推普周活动总结
2015/03/27 职场文书
放假通知怎么写
2015/08/18 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
Python中的 Set 与 dict
2022/03/13 Python