快捷導(dǎo)航

jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法分析

更新時(shí)間：2019年05月31日 09:28:45 作者：輕舞肥羊

這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法,結(jié)合實(shí)例形式分析了jQuery根據(jù)調(diào)用函數(shù)按需動(dòng)態(tài)加載javascript文件相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法。分享給大家供大家參考，具體如下：

為了提高網(wǎng)頁程序的性能，在很多情況下javascript 是按需加載，而不是全部寫在 <head>里面。利用jQuery可以很方便的實(shí)現(xiàn)按需加載js.

$("#load").click(function(){
  $.getScript('helloworld.js', function() {
     $("#content").html('js 加載成功!');
  });
});

當(dāng)id為“l(fā)oad" 的按鈕被點(diǎn)擊之后，將會(huì)動(dòng)態(tài)加載 helloword.js , 然后就可以執(zhí)行里面的方法。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
 <h1>利用 jQuery 動(dòng)態(tài)加載 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 ~我是動(dòng)態(tài)加載的!");
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery easyui datagrid動(dòng)態(tài)查詢數(shù)據(jù)實(shí)例講解
接下來將從前臺(tái)提交查詢條件，從MSSQL返回json數(shù)據(jù)的一個(gè)事例來講解一下datagrid動(dòng)態(tài)查詢數(shù)據(jù)，感興趣的你可不要錯(cuò)過了哈，希望本文可以幫助到你
2013-02-02
基于Jquery實(shí)現(xiàn)表單驗(yàn)證
本文給大家分享的是一段基于Jquery實(shí)現(xiàn)表單驗(yàn)證的代碼，非常簡單實(shí)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
jQuery AJAX與jQuery事件的分析講解
今天小編就為大家分享一篇關(guān)于jQuery AJAX與jQuery事件的分析講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-02-02
jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
這篇文章主要介紹了jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
jQuery通過點(diǎn)擊行來刪除HTML表格行的實(shí)現(xiàn)示例
從一個(gè)HTML表使用一些時(shí)髦的效果，只要按一下該行，改行即可被刪除，這個(gè)示例比較簡單，新手朋友們可以學(xué)習(xí)下
2014-09-09
jQuery aminate方法定位到頁面具體位置
jQuery如何定位到頁面具體位置，我們可以通過jQuery的aminate動(dòng)畫方法定位，下面有個(gè)不粗的示例，感興趣的朋友可以參考下
2013-12-12
jQuery animate效果演示
一個(gè)簡單的animate函數(shù)嘗試，這個(gè)效果在web應(yīng)用中非常的實(shí)用，提供大家參考！
2009-10-10
使用JQUERY Tabs插件宿主IFRAMES
這篇文章提供了一個(gè)使用asp.net和JQuery UI Tabs plug-in用IFRAME元素去宿主web頁面。
2010-01-01
jquery提示效果實(shí)例分析
這篇文章主要介紹了jquery提示效果,以一個(gè)簡單實(shí)例較為詳細(xì)的分析了jQuery提示效果的實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-11-11
基于jquery的$.ajax async使用
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
2011-10-10