博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
两个jQuery冲突了怎么办
阅读量:6109 次
发布时间:2019-06-21

本文共 1472 字,大约阅读时间需要 4 分钟。

hot3.png

本篇文章主要是对JQuery的$和其它JS发生冲突的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。
 
然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:
 
我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点
 
举例:
 
方法一:
 
代码如下:
<script type="text/javascript">
    jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
    jQuery(function() { //使用jQuery
        jQuery("p").click(function(){
            alert( jQuery(this).text() );
        });
    });
    $("pp").style.display = 'none'; //使用prototype
</script>
 
方法二:
 
我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点
 
代码如下:
<script type="text/javascript">
    var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
    $j(function() { //使用jQuery
        $j("p").click(function(){
            alert( $j(this).text() );
        });
    });
    $("pp").style.display = 'none'; //使用prototype
</script>
 
还有其它的方法,都给大家列举出来,同理都可以看明白了吧,呵呵。
 
方法三:
 
代码如下:
<script type="text/javascript">
    jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
    jQuery(function($){ //使用jQuery
        $("p").click(function(){ //继续使用 $ 方法
            alert( $(this).text() );
        });
    });  
    $("pp").style.display = 'none'; //使用prototype
</script>
 
方法四:
代码如下:
<script type="text/javascript">
    jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
    (function($){ //定义匿名函数并设置形参为$
        $(function(){ //匿名函数内部的$均为jQuery
            $("p").click(function(){ //继续使用 $ 方法
                alert($(this).text());
            });
        });
    })(jQuery); //执行匿名函数且传递实参jQuery
    $("pp").style.display = 'none'; //使用prototype
</script>

转载于:https://my.oschina.net/colour10/blog/783576

你可能感兴趣的文章
22. linux 常用命令
查看>>
ASP.Net 使用GridView模板删除一行的用法
查看>>
(十六)字段表集合
查看>>
JPGraph
查看>>
实验二 Java面向对象程序设计
查看>>
------__________________________9余数定理-__________ 1163______________
查看>>
webapp返回上一页 处理
查看>>
新安装的WAMP中phpmyadmin的密码问题
查看>>
20172303 2017-2018-2 《程序设计与数据结构》第5周学习总结
查看>>
(转)HTML的代码(从朋友那转的,看着觉得会有用就转了)
查看>>
eclipse中将一个项目作为library导入另一个项目中
查看>>
Go语言学习(五)----- 数组
查看>>
Android源码学习之观察者模式应用
查看>>
Content Provider的权限
查看>>
416. Partition Equal Subset Sum
查看>>
centos7.0 64位系统安装 nginx
查看>>
数据库运维平台~自动化上线审核需求
查看>>
注解开发
查看>>
如何用 Robotframework 来编写优秀的测试用例
查看>>
Django之FBV与CBV
查看>>