交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • jQuery实现动态加载(按需加载)javascript文件的方法分析

    本文实例讲述了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常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

    您可能感兴趣的文章:

    • 使用jQuery动态加载js脚本文件的方法
    • jquery及js实现动态加载js文件的方法
    • jquery getScript动态加载JS方法改进详解
    • 一个简单的动态加载js和css的jquery代码
    • 三种动态加载js的jquery实例代码另附去除js方法
    • 如何使用jquery动态加载js,css文件实现代码
    • jquery动态加载js/css文件方法(自写小函数)
    • 使用jquery动态加载Js文件和Css文件
    • 使用jquery动态加载javascript以减少服务器压力
    • jquery动态加载js三种方法实例
    • 使用jquery动态加载js文件的方法

    广而告之:
    热门推荐:
    基于Vue-cli快速搭建项目的完整步骤

    前言 vue-cli 是一个官方发布 vue.js 项目脚手架,Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。 下面话不多说了,来一起看看详细的介绍吧 一、准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue···

    监听element-ui table滚动事件的方法

    背景 做管理平台的项目,用到了element-ui,需要通过监听el-table滚动的位置来获取最新的数据,那么怎么样监听el-table的滚动呢? 准备 我们默认的技术栈是 vue+element-ui template代码: <el-table :data="logList" :show-header="false" row-class-name="tabl···

    为php4加入动态flash文件的生成的支持

    想象过在网站上动态生成flash动画吗,本文就让你步入php+flash的激动时代。 php真是个好东西呀,真是无法预料她明天会变的怎样。。。好了,言归正传,下面 介绍怎样实现这个功能。 一、需要的软件 swf的支持库 http://reality.sgi.com/grafica/flash/dist.99.linux.···

    js中日期的加减法

    今天就算对JS中日期的加减法做个总结,一共两步 第一步,引入date.format.js,这个JS的作用是将日期转为指定的格式,代码如下 var dateFormat = function () { var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g, timezon···

    在控制面板如何调用新闻

    <?php $w_query="select * from {$dbtbpre}ecms_news where checked=1 order by newstime desc limit 5"; $w_sql=$empire->query($w_query); while($w=$empire->fetch($w_sql)) { $titleurl=sys_ReturnBqTitleLink($w); ?> 标题:<?=$w[title]?> 时间:<···

    HTML5----响应式(自适应)网页设计

    第一步:在网页代码的头部,加入一行viewport元标签 ActionScript <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度, 上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=dev···

    关于JS管理作用域的问题

    关键字:标识符、执行上下文、作用域、作用域链、变量对象、活动对象理论知识 理解JavaScript如何管理作用域和作用域链很重要。因为在作用域链中要查找的变量对象的个数直接影响标识符解析的性能。标识符在作用域链中的位置越深,查找和访问它所需的时间越长;如果作用域···

    vue.js 使用v-if v-else发现没有执行解决办法

    使用v-if v-else发现没有执行 最近在学习Vue,因为刚开始学习,所以总会遇到这样那样的问题,今天要说的一个错误就是在看Vue的官方文档的时候,发现在使用v-if和v-else指令的时候,相应的内容都出现了 初始代码: <div v-if="Math.random > 0.5"> " Math.random >···

    vue.js删除列表中的一行

    splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。 注:index--规定添加/删除项目的位置 num--要删除的项目数量 item--向数组添加的新项目 splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多···