jQuery 随笔 之 与其他JS库冲突的解决
2017-03-15 16:17
501 查看
在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局(global)对象都被很好地存储在jQuery命名空间里,一起jQuery和其他JS库一起使用时,不会引起冲突。
1、jQuery库在其他JS库之后导入
默认情况下,jQuery用$作为自己的快捷方式。
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JS库。
a、将jQuery()函数作为jQuery对象的制造工厂。
b、不产生冲突,同时自定义快捷方式
c、不产生冲突,还要继续使用$,两种方法:
2、jQuery在其他库之前导入
1、jQuery库在其他JS库之后导入
<script src="js/prototype.js"></script> <script src="js/jQuery.js"></script>
默认情况下,jQuery用$作为自己的快捷方式。
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JS库。
a、将jQuery()函数作为jQuery对象的制造工厂。
<script> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function(){ //使用jQuery jQuery('p').click(funciton(){ alert(jQuery(this).text() ); }); }); $('p').style.display = 'none'; //使用prototype </script>
b、不产生冲突,同时自定义快捷方式
<script> var $j = jQuery.noConflict(); //将变量$的控制权移交给prototype.js $j(function(){ //使用jQuery $j('p').click(funciton(){ alert($j(this).text() ); }); }); $('p').style.display = 'none'; //使用prototype </script>
c、不产生冲突,还要继续使用$,两种方法:
<script> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function($){ //使用jQuery $('p').click(funciton(){ alert($(this).text() ); }); }); $('p').style.display = 'none'; //使用prototype </script>
<script> jQuery.noConflict(); //将变量$的控制权移交给prototype.js (function($){ //使用jQuery $('p').click(funciton(){ alert($(this).text() ); }); })(jQuery); $('p').style.display = 'none'; //使用prototype </script>*这是最理想的方式,可以通过改变最少的代码实现兼容性。
2、jQuery在其他库之前导入
<script src="js/jQuery.js"></script> <script src="js/prototype.js"></script>如果jQuery库在其他库之前就导入了,那么可以直接使用”jQuery“来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。
<script> jQuery(function(){ //使用jQuery jQuery('p').click(funciton(){ alert(jQuery(this).text() ); }); }); $('p').style.display = 'none'; //使用prototype </script>
<script> $(function(){ //使用jQuery $('p').click(funciton(){ alert($(this).text() ); }); }); $('p').style.display = 'none'; //使用prototype </script>
<script> jQuery(function($){ //使用jQuery $('p').click(funciton(){ alert($(this).text() ); }); }); $('p').style.display = 'none'; //使用prototype </script>
<script> (function($){ //使用jQuery $('p').click(funciton(){ alert($(this).text() ); }); })(jQuery); $('p').style.display = 'none'; //使用prototype </script>
相关文章推荐
- 解决同一页面jQuery多个版本或和其他js库冲突方法
- jQuery多个版本和其他js库冲突的解决方法
- 解决jquery与其他js类库冲突
- Jquery与其他js起冲突的解决办法
- jquery和其他js库起冲突的解决方法
- 解决同一页面jQuery多个版本或和其他js库冲突方法
- jQuery库与其他JS库冲突的解决办法
- JQuery选取器与其它JS框架冲突的解决方法 确保jQuery不会与其他库的$对象发生冲突
- jQuery与其他JS库冲突解决
- jQuery与其他JS库冲突解决
- jquery类库和其他js类冲突的解决方法
- 解决jQuery多个版本,与其他js库冲突方法
- jquery类库和其他js类冲突的解决方法
- jquery与其他js冲突问题 解决
- 解决同一页面jQuery多个版本或和其他js库冲突方法
- jquery和其他js库的冲突解决方式
- jquery和其他js库起冲突的解决方法
- jquery和其他js库起冲突的解决方法
- jQuery库与其他JS库冲突的解决办法(转)
- 解决同一页面jQuery多个版本或和其他js库冲突方法