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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery实现抽奖功能
Oct 22 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
Javascript之文件操作
2007/03/07 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
python比较2个xml内容的方法
2015/05/11 Python
python实现图片文件批量重命名
2020/03/23 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
J2EE模式面试题
2016/10/11 面试题
上课说话检讨书大全
2014/01/22 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
房产公证委托书范本
2014/09/20 职场文书
围城读书笔记
2015/06/26 职场文书
新闻稿标题
2015/07/18 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
教你用python实现12306余票查询
2021/06/30 Python
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers