- 浏览: 501104 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (156)
- xml (4)
- web前端 (24)
- jQuery (18)
- java (38)
- SQL (9)
- perl (2)
- OTRS (1)
- GWT (4)
- Linux (32)
- Maven (2)
- Spring (2)
- Oracle Win7 (1)
- css (8)
- eclipse (3)
- mysql (11)
- tomcat (5)
- git (4)
- javascript (22)
- font (1)
- android (1)
- log4j (1)
- email (1)
- sublime plugin (1)
- html (2)
- matches (1)
- php (3)
- apache (3)
- gd (1)
- docker (5)
- rails (1)
- RabbitMQ (1)
- Ubuntu (3)
- L2TP VPN (1)
- nodejs (1)
- oraclejet (1)
- ubutun (1)
- ntp (1)
- ngix (1)
- ssl (1)
- https (1)
- Linux,Debian (2)
- dpkg (1)
- pac (1)
- vi (1)
- vim (1)
- java,http (0)
- httpClient (0)
- shutter (1)
- shell (1)
- redmine (1)
最新评论
-
纵观全局:
配置之后,连接显示不是私密连接
keytool生成证书与Tomcat SSL配置 -
zhuchao_ko:
可以 伪造
java获得ip地址 -
longhua2003:
代码太乱了
java下载文件 -
tomhat:
ccx410 写道 安装gwt报错,unable to ret ...
GWT CellTable -
ccx410:
安装gwt报错,unable to retrieve osgi ...
GWT CellTable
如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11。
你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗?
答案是,不行。因为现实生活是非常残酷的。举个例子:
现有网站已经引用了jQuery 1.5以及相关插件。如果直接将jQuery升级到最新版,这些插件就不工作了,除非你能把这些插件全部升级,或者等各个插件的作者发布支持最新版jQuery的版本。
现在,如果我们要基于jQuery开发新的插件或者写JavaScript代码,用新版本会比较省时省力。
但旧版本又绝对不能扔掉,怎么办?
方法是通过jQuery的noConflict()来让多版本共存。
当我们导入jQuery时,jQuery仅向window这个全局空间注入两个变量:
window.$ = window.jQuery = { jQuery object };
同时,jQuery内部保留旧的window.$和window.jQuery对象的引用。当我们调用:
var $jq = $.noConflict();
window.$被恢复,但window.jQuery仍是jQuery。
当我们调用:
var $jq = $.noConflict(true);
window.$和window.jQuery都被恢复了,一切看起来就像jQuery从未被导入过一样,只不过可以通过变量$jq来使用jQuery。
所以,让新旧版本共存的jQuery可以这样实现:
<script src="jquery-1.5.js"></script>
<script src="jquery-1.11.js"></script>
<script>
// 现在window.$和window.jQuery是1.11版本:
console.log($().jquery); // => '1.11.0'
var $jq = jQuery.noConflict(true);
// 现在window.$和window.jQuery被恢复成1.5版本:
console.log($().jquery); // => '1.5.0'
// 可以通过$jq访问1.11版本的jQuery了
</script>
<script src="myscript.js"></script>
在myscript.js中,用$jq就可以访问1.11版本的jQuery了。
至此,问题解决。
但是,引入两个版本的jQuery后,页面被搞得乱七八糟。如果有人看不懂代码,把var $jq = jQuery.noConflict(true);删掉了怎么办?或者,把导入jQuery的两行互换了位置,最后就得不到正确的jQuery版本。
最好的办法是不改动页面,直接引用我们编写的新的js文件:
<script src="jquery-1.5.js"></script>
<script src="myscript.js"></script>
这样一来,我们就在myscript.js内部引用最新版jQuery,而页面无论有没有jQuery,有哪个版本的jQuery,我们都不关心。
开始编写新的更好的解决方案。首先,把myscript.js的主体确定下来:
// myscript.js
(function () {
// BEGIN
// TODO: javascript code here...
// END
})();
用匿名函数是个好习惯,不污染全局变量,同时杜绝外部代码访问。
下一步是直接把jQuery 1.11的代码嵌进去:
// myscript.js
(function () {
// BEGIN
/*! jQuery v1.11.1 */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?...
if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...
},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...
var $ = jQuery.noConflict(true);
// TODO: javascript code here...
// END
})();
嵌入的当然是压缩后的代码,一共3行,然后加一句:
var $ = jQuery.noConflict(true);
注意到$是一个局部变量,在后面的代码中,可以随时引用这个$,跟页面上其他版本的jQuery全局变量$不是一个对象。
最后一步工作就是检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码。
你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗?
答案是,不行。因为现实生活是非常残酷的。举个例子:
现有网站已经引用了jQuery 1.5以及相关插件。如果直接将jQuery升级到最新版,这些插件就不工作了,除非你能把这些插件全部升级,或者等各个插件的作者发布支持最新版jQuery的版本。
现在,如果我们要基于jQuery开发新的插件或者写JavaScript代码,用新版本会比较省时省力。
但旧版本又绝对不能扔掉,怎么办?
方法是通过jQuery的noConflict()来让多版本共存。
当我们导入jQuery时,jQuery仅向window这个全局空间注入两个变量:
window.$ = window.jQuery = { jQuery object };
同时,jQuery内部保留旧的window.$和window.jQuery对象的引用。当我们调用:
var $jq = $.noConflict();
window.$被恢复,但window.jQuery仍是jQuery。
当我们调用:
var $jq = $.noConflict(true);
window.$和window.jQuery都被恢复了,一切看起来就像jQuery从未被导入过一样,只不过可以通过变量$jq来使用jQuery。
所以,让新旧版本共存的jQuery可以这样实现:
<script src="jquery-1.5.js"></script>
<script src="jquery-1.11.js"></script>
<script>
// 现在window.$和window.jQuery是1.11版本:
console.log($().jquery); // => '1.11.0'
var $jq = jQuery.noConflict(true);
// 现在window.$和window.jQuery被恢复成1.5版本:
console.log($().jquery); // => '1.5.0'
// 可以通过$jq访问1.11版本的jQuery了
</script>
<script src="myscript.js"></script>
在myscript.js中,用$jq就可以访问1.11版本的jQuery了。
至此,问题解决。
但是,引入两个版本的jQuery后,页面被搞得乱七八糟。如果有人看不懂代码,把var $jq = jQuery.noConflict(true);删掉了怎么办?或者,把导入jQuery的两行互换了位置,最后就得不到正确的jQuery版本。
最好的办法是不改动页面,直接引用我们编写的新的js文件:
<script src="jquery-1.5.js"></script>
<script src="myscript.js"></script>
这样一来,我们就在myscript.js内部引用最新版jQuery,而页面无论有没有jQuery,有哪个版本的jQuery,我们都不关心。
开始编写新的更好的解决方案。首先,把myscript.js的主体确定下来:
// myscript.js
(function () {
// BEGIN
// TODO: javascript code here...
// END
})();
用匿名函数是个好习惯,不污染全局变量,同时杜绝外部代码访问。
下一步是直接把jQuery 1.11的代码嵌进去:
// myscript.js
(function () {
// BEGIN
/*! jQuery v1.11.1 */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?...
if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...
},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...
var $ = jQuery.noConflict(true);
// TODO: javascript code here...
// END
})();
嵌入的当然是压缩后的代码,一共3行,然后加一句:
var $ = jQuery.noConflict(true);
注意到$是一个局部变量,在后面的代码中,可以随时引用这个$,跟页面上其他版本的jQuery全局变量$不是一个对象。
最后一步工作就是检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码。
发表评论
-
jquery-chosen.js示例使用方法
2021-02-21 17:18 1007## jquery-chosen.js示例使用方法 1. [ ... -
jquery-validate示例使用方法
2021-02-21 14:19 304## 示例使用方法 <form class=&qu ... -
JavaScript SizeToHuman 大小转换为mb kb tb等
2017-08-21 15:16 1465// byte数据单位转换(以B为基底) functio ... -
javascript 监听键盘事件
2017-04-14 10:38 2756var ie; var firefox; ... -
js去除字符串中的html标签,替换"为'
2016-11-10 14:10 1469今天做文本域编辑和提交,文本域的内容最好带格式,于是找了一些插 ... -
JavaScript从数组中删除指定值元素的方法
2016-10-11 13:13 714下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函 ... -
byte 的1024转换方法
2016-09-18 14:19 969今天在要用到字节转换并且带上不同单位,于是在网上找了一下,记录 ... -
安装nodejs oraclejet
2016-05-05 16:45 793ubuntu下安装nodejs Debian and Ubu ... -
CSS几种特效整理
2016-04-19 09:55 494css用伪类before和after制作三角形箭头网上有一堆教 ... -
javascript 生成随机码或随机数
2016-01-15 14:01 2002/** * [getRandomNum 生成随机数] ... -
js 一些知识,js获取contxtPath
2015-11-12 13:49 1155var num = 1; var str = '1'; ... -
IE指定文档模式
2015-10-15 15:21 919对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题。 ... -
JS判断鼠标向上滚动还是向下滚动
2015-09-25 17:52 2577js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚 ... -
js验证组织机构代码
2015-09-18 18:06 43211.全国组织机构代码由八位数字(或大写拉丁字母)本体代码和一位 ... -
jQuery 跳出each循环
2015-09-18 13:22 615jquery跳出 each 循环,要实现break和conti ... -
JSP和JSTL获取服务器参数
2015-09-11 13:57 1158<%@ page language="java ... -
JS,Jquery获取各种屏幕的宽度和高度,clientX,offsetX,在父窗口中获取iframe中的元素
2015-04-22 16:49 3367JS,Jquery获取各种屏幕的宽度和高度 Javascri ... -
javascript 保留2位小数
2014-09-15 13:15 1701<script type="text/ ... -
Spring MVC @RequestBody接收JSON报HTTP 415/400问题的解决
2014-08-27 13:06 3757Ajax请求传@RequestBody(接收JSON)参数时, ... -
JavaScript中实现replaceAll方法
2014-08-21 18:04 1042使用JavaScript replace方法,如果不使用正则表 ...
相关推荐
如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11。 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是,不行。因为现实生活是非常残酷的。举个栗子...
它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,能够响应和反馈多种事件。它提供了个性化的定制服务,支持灵活的参数配置,用户...
该控件中的checkbox小插件的 id是写死的,所以当 有多个datatable 引用到一个页面中的时候,全选事件会匹配全部的datatable ,所以造成全部多个表格的 checkbox被都被选中。 【解决方法】 所以最好是修改jquery....
你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 -------------------------------------------------------------------------------- A shorthand ...
该控件中的checkbox小插件的id是写死的,所以当有多个datatable引用到一个页面中的时候,全选事件会匹配全部的datatable,所以造成全部多个表格的checkbox被都被选中。 【解决方法】 所以最好是修改jquery....
这样也方便在一个页面上多个好友选择器共存而不相互影响。 所有需要写的参数都在最下面的giant.ui.friendsuggest.defaults 中给了默认值。在未传入参数时,会调用默认值。另外,在以下划线开头的方法,我约定为...
它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,能够响应和反馈多种事件。它提供了个性化的定制服务,支持灵活的参数配置,用户...
1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第2章 选择符 2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符 2.4 属性选择符 2.5 自定义选择...
ECgroupon是ecshop的一个团购插件,具备团购网站所有特征及功能!ECgroupon是一个独立的团购程序,用户完全看不到商城网站繁琐的流程!ECgroupon和ecshop可以友好共存,互相关照!给你的商城增加团购功能而又不需要...