jQuery实现动态加载(按需加载)javascript文件的方法分析


Posted in jQuery onMay 31, 2019

本文实例讲述了jQuery实现动态加载(按需加载)javascript文件的方法。分享给大家供大家参考,具体如下:

为了提高网页程序的性能,在很多情况下javascript 是按需加载,而不是全部写在 <head>里面。利用jQuery可以很方便的实现按需加载js.

$("#load").click(function(){
  $.getScript('helloworld.js', function() {
     $("#content").html('js 加载成功!');
  });
});

当id为“load" 的按钮被点击之后,将会动态加载 helloword.js , 然后就可以执行里面的方法。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
 <h1>利用 jQuery 动态加载 js</h1>
<div id="content"></div>
<br/>
<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>
<script type="text/javascript">
$("#load").click(function(){
 $.getScript('js-example/helloworld.js', function() {
   $("#content").html('
     Javascript is loaded successful! sayHello() function is loaded!
   ');
 });
});
$("#sayHello").click(function(){
 sayHello();
});
</script>
</body>
</html>

其中  helloworld.js 的代码如下:

function sayHello(){
  alert("Hello ~我是动态加载的!");
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现图片平滑滚动详解
Mar 22 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
jQuery实现高级检索功能
May 28 #jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python关键字and和or用法实例
2015/05/28 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python中str.format()详解
2017/03/12 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Pygame的程序开始示例代码
2020/05/07 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
岗位竞聘演讲稿范文
2014/04/24 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
现役军人家属慰问信
2015/03/24 职场文书
讲文明倡议书
2015/04/29 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis