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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现简单评论区功能
Oct 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使用eAccelerator的API开发详解
2013/06/09 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
理解JS绑定事件
2016/01/19 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
纯js三维数组实现三级联动效果
2017/02/07 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
JS+CSS实现过渡特效
2021/01/02 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python pygame实现方向键控制小球
2019/05/17 Python
django做form表单的数据验证过程详解
2019/07/26 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
自主招生自荐信范文
2013/12/04 职场文书
小学庆六一活动方案
2014/02/28 职场文书
科技工作者先进事迹
2014/08/16 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL