动态加载jquery库的方法

有时候，我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库，可能在用户点击某个按钮后，才去加载 Jquery 库。好处不用我说，节省带宽，提高访问速度，因为用户可能不会点击这个按钮，也就不需要 Jquery 。那么如何动态加载 Jquery 库呢？一般可以用 Document.write 来打印出，也可以用 Ajax ，也可以用我下面的这种方式：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>动态加载Jquery库，不用创建Ajax请求。在 a 的 href 属性中写一段或多段代码</title> 
    <style type="text/css"> 
        #message { margin: 20px 10px; color:Green; } 
    </style> 
    <script language="javascript" type="text/javascript"> 
        function AjaxLoadJquerylibrary() 
        { 
            var d = document, s = d.getElementById('firebug-lite'); 
            if (s != null) 
                return; 
            s = d.createElement('script'); 
            s.type = 'text/javascript'; 
            s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'; 
            d.body.appendChild(s); 
            document.getElementById("content").style.display = "block"; 
        } 
    </script> 
</head> 
<body> 
<div> 
    <input type="button" value="动态导入Jquery" onclick="AjaxLoadJquerylibrary();" /><br /> 
</div> 
<div id="message">

</div>   
 <div id="content"> 
    请输入您的名字：<input type="text" value="" id="txtUserName" /><br /> 
    <a href="javascript:(function(){ var username = $('#txtUserName').val(); alert(username); })();void(0);">Jquery获取名字</a> 
 </div> 
</body> 
</html>

赞 (0)

相关推荐

  • jQuery结合ajax实现动态加载文本内容

    ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01&q

  • 动态加载jQuery的两种方法实例分析

    本文实例讲述了动态加载jQuery的两种方法.分享给大家供大家参考.具体如下: 第一种方法参考本站之前有人发的代码,增加了加载检测: 第二种方法来自去年的12306刷票脚本. 第一种方法: function withjQuery(callback) { if(!(window.jQuery)) { var js = document.createElement('script'); js.setAttribute('src', 'https://dynamic.12306.cn/otsweb/j

  • 一个简单的动态加载js和css的jquery代码

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the

  • 动态加载jQuery的方法

    本文实例讲述了动态加载jQuery的方法.分享给大家供大家参考.具体如下: function checkJquery() { if(!(window.jQuery)) { var s = document.createElement('script'); s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'); s.setAttribute('type', 'text/jav

  • 使用jquery动态加载js文件的方法

    方法很简单,这里就不多废话了,直接奉上代码: 复制代码 代码如下: $.extend({      includePath: '',      include: function(file) {         var files = typeof file == "string" ? [file]:file;         for (var i = 0; i < files.length; i++) {             var name = files[i].repl

  • 三种动态加载js的jquery实例代码另附去除js方法

    复制代码 代码如下: !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.

  • jQuery实现页面滚动时动态加载内容的方法

    本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).hei

  • jquery Tab效果和动态加载的简单实例

    一:tab效果显示 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题页</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="js/jquery-1.4.2-

  • jquery动态加载select下拉框示例代码

    如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

  • 动态加载jquery库的方法

    有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库.好处不用我说,节省带宽,提高访问速度,因为用户可能不会点击这个按钮,也就不需要 Jquery .那么如何动态加载 Jquery 库呢?一般可以用 Document.write 来打印出,也可以用 Ajax ,也可以用我下面的这种方式: 复制代码 代码如下: <!DOCTYPE html PUBLIC "

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

  • jquery动态加载js三种方法实例

    复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JS动态加载当前时间的方法

    本文实例讲述了JS动态加载当前时间的方法.分享给大家供大家参考.具体实现方法如下: <body bgcolor="#fef4d9" onload ="time()"> <script language="JavaScript"> function time () { var now = new Date(); var yr = now.getYear(); var mName = now.getMonth() + 1; v

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • Echarts教程之通过Ajax实现动态加载折线图的方法

    一.GIF图 二.前台代码 // 调用方法 hotlineLine(); // 定时刷新 setInterval(function () { hotlineLine(); },5000); function hotlineLine(){ // 初始化图表元素 var hotlineLine = echarts.init(document.getElementById('hotlineLine_id')); $.get('${pageContext.request.getContextPath()

  • AJAX和jQuery动态加载数据的实现方法

    AJAX和jQuery动态加载数据的实现方法

    什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服

  • jquery动态加载js/css文件方法(自写小函数)

    先来看jquery自带的getSrcript文件 方法 $.getScript(url,callback) 实例 复制代码 代码如下: var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 复制代码 代码如下: <script type="text/javascript

随机推荐