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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现的分页插件完整示例
May 26 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 字符串操作入门教程
2006/12/06 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP程序员编程注意事项
2008/04/10 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python实现随机漫步方法和原理
2019/06/10 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
安全生产检讨书
2014/01/21 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
聘任书模板
2014/03/29 职场文书
兴趣小组活动总结
2014/05/05 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书