jQuery多库共存最优解决方案
接触jQuery也有一段时间了,看了两本关于jQuery的书了.《jQuery in Action》中文书名《jQuery实战》这本书写的确实好,看得我,晚上连睡意都没了。还有一本《Learning jQuery》中文书名《jQuery 基础教程》,说句实在话,这本书写的不怎么滴,没有看《jQuery in Action》之前觉得挺好的,看了《jQuery in Action》后,觉得讲的东西有些浅显了些,不够深入。我没兴趣的东西,他却讲了一大堆,其实就在网上下一插件就搞定了的事情。
好了不废话了,看看如何解决jQuery共存的问题吧。
官方给的方法如下:
jQuery.noConflict(),调用这个方法,会返回一个值,返回值可以理解为,为jQuery的$函数在取一个别名吧。
这个方法的解释如下:
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
这有助于确保jQuery不会与其他库的$对象发生冲突。
在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。
注意:这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。
OK,这样一来的话,$这个函数就没办法用了,这不是很郁闷,我可不想习惯了$在去投奔其它的函数名了。怎么办呢?办法还是有的,如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html http://www.w3.org/1999/xhtml" target=_blank>http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script><!--导入jQuery库,当然网站上用应该使用压文件,开发在VS08下使用jquery-1.3.2-vsdoc.js,会有智能提示-->
<script type="text/javascript">
$ = document.getElementById;//定义一个$函数,与jQuery的$函数发生冲突
(function($) {//使用匿名方法(闭包{具体叫法尚不明朗,先这么叫吧}),接收一个参数$
$(function() {
$("#show").css({ border: "1px dotted #336699", width: "200px", height: "150px", color: "red" }).html("今天天气不错,挺风和日丽的!");
});
})(jQuery);//给前的匿名函数传参,最终前面$里面存储的是jQuery,
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>
OK,有了这个后,我们就不必在为有多个库使用$而烦脑了。
好了不废话了,看看如何解决jQuery共存的问题吧。
官方给的方法如下:
jQuery.noConflict(),调用这个方法,会返回一个值,返回值可以理解为,为jQuery的$函数在取一个别名吧。
这个方法的解释如下:
OK,这样一来的话,$这个函数就没办法用了,这不是很郁闷,我可不想习惯了$在去投奔其它的函数名了。怎么办呢?办法还是有的,如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html http://www.w3.org/1999/xhtml" target=_blank>http://www.w3.org/1999/xhtml
<head>
<title></title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script><!--导入jQuery库,当然网站上用应该使用压文件,开发在VS08下使用jquery-1.3.2-vsdoc.js,会有智能提示-->
<script type="text/javascript">
$ = document.getElementById;//定义一个$函数,与jQuery的$函数发生冲突
(function($) {//使用匿名方法(闭包{具体叫法尚不明朗,先这么叫吧}),接收一个参数$
$(function() {
$("#show").css({ border: "1px dotted #336699", width: "200px", height: "150px", color: "red" }).html("今天天气不错,挺风和日丽的!");
});
})(jQuery);//给前的匿名函数传参,最终前面$里面存储的是jQuery,
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>
OK,有了这个后,我们就不必在为有多个库使用$而烦脑了。