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 28 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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源代码
2009/08/21 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
自己的js工具 Event封装
2009/08/21 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python中partial()基础用法说明
2018/12/30 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
毕业生应聘求职信
2014/07/10 职场文书
求职意向书
2014/07/29 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
运动会1000米加油稿
2015/07/21 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python