JavaScript 如何动态加载 jQuery

最近我需要动态加载 jQuery。要求是在 script 标签内加载 jQuery 脚本及其属性，并且最后放到 head 标签内。动态加载 jQuery 的方法其实很简单。它涉及到 JavaScript 动态创建 html DOM 元素和属性的方法。

下面的实例代码，首先先检查 jQuer 文件和版本有没有存在。如果它不存在则使用 JavaScript 的 createElement 函数创建脚本元素。再来使用  JavaScript 的 setAttribute 函数设置元素属性，最后将最新创建的元素添加到 head 标签内。

下面的示例代码将加载 jQuery 1.8.1 版本或给定的版本。

<script>
if(!(window.jQuery && window.jQuery.fn.jquery == '1.8.1')) {

var element = document.createElement('script');

element.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js');

element.setAttribute('type', 'text/javascript');

document.getElementsByTagName('head')[0].appendChild(element);

}
</script>

每一次执行该脚本时，如果你总是想要最新的 jQuery 版本被加载。那么试试下面代码来每次动态的加载最新的 jQuery 版本。

注意：上面的 jquery 地址用的是 Google 的 jquery，由于被墙的原因，你可以选择百度的 jquery 地址。

<script>
if(!(window.jQuery)) {

var element = document.createElement('script');

element.setAttribute('src', 'http://code.jquery.com/jquery-latest.js');

element.setAttribute('type', 'text/javascript');

document.getElementsByTagName('head')[0].appendChild(element);

}
</script>

上面的示例代码将始终包含最新的 jQuery 版本。