发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库。
好处不用我说,节省带宽,提高访问速度,因为用户可能不会点击这个按钮,也就不需要 Jquery 。那么如何动态加载 Jquery 库呢?一般可以用 Document.write 来打印出,也可以用 Ajax ,也可以用我下面的这种方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./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./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>
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
利用JQuery的load函数动态加载页面 - Master HaKu - 博客园
<div class="buttonListArea"> <div class="buttonArea"> <div class="button" id="btnLoad1">Load 1</div> ...
学习JQuery的$.Ready()与OnLoad事件比较[转]
学习JQuery的$.Ready()与OnLoad事件比较[转]在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:1.加载多...
基于Jquery的动态添加控件并取值的实现代码
$(''.del-text'').live(''click'',function(){ $(this).parent().remove();</script> </head> <body> <div id="main"> <div>...
WordPress速度优化——图片延时加载
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js?ver=1.7.2">&...
qrcode.js生成二维码
$.ajax
$.ajax<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).re...
jquery插件懒加载
jquery插件懒加载。DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1&q...
Jquery EasyUi实战教程布局篇
Jquery EasyUi实战教程布局篇。使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件,引用如下:<script src="../j...
利用jquery实现图片显隐特效 | 知更鸟
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></sc...
微信扫码,在手机上查看选中内容