如何使用jquery动态加载js，css文件

JavaScript019

如何使用jquery动态加载js，css文件,第1张

一、Jquery动态加载Js和Css扩展方法

$.extend({

includePath: '',

include: function(file) {

var files = typeof file == "string" ? [file]:file

for (var i = 0i <files.lengthi++) {

var name = files[i].replace(/^\s|\s$/g, "")

var att = name.split('.')

var ext = att[att.length - 1].toLowerCase()

var isCSS = ext == "css"

var tag = isCSS ? "link" : "script"

var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' "

var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"

if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">")

}

}

})

二、使用方法：

$.include('dedeajax.js')

$.include('android.css')

或者：

$.includePath='www/html/'

$.include([dedeajax.js','android.css'])

用JQ自带的AJAX来动态加载你想要的JS文件

$.getScript("这是你的JS名字.js", function(){

  alert("这是JS加载完了成功的回调函数")

})

这是动态加载的JS文件，ajax必须要有环境才能运行

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>动态引入jQuery</title> 

<style>

*{ padding:0margin:0font-size:14px }

</style>

</head>

<body>

<p>1</p>

</body>

<script type="text/javascript">

var script = document.createElement('script')

script.setAttribute("type", "text/javascript")

script.setAttribute("src", 'http://code.jquery.com/jquery-1.9.1.js')

document.head.appendChild(script)

// 由于是动态引入的，需要做个延时，不然页面是还没有加载jQuery文件的

setTimeout(function(){

$(function(){

$('p').text('aaaaaaaaaaaaa')

})

},5)

</script>

</html>